Poprzednie

Następne

Ćwiczenie — pisanie kodu w celu wdrożenia aplikacji internetowej

Ukończone

W tej lekcji użyjesz narzędzi deweloperskich do utworzenia kodu dla początkowej aplikacji internetowej.

Tworzenie nowego projektu internetowego

Najważniejszym narzędziem interfejsu wiersza polecenia platformy .NET jest dotnet. Za pomocą tego polecenia utworzysz nowy projekt internetowy ASP.NET Core.

Najpierw zainstaluj odpowiednią wersję polecenia dotnet w usłudze Cloud Shell. W tym ćwiczeniu będziemy korzystać z zestawu SDK 3.1.102.

1. Uruchom następujące polecenia w usłudze Azure Cloud Shell po prawej stronie, aby pobrać i zainstalować aplikację dotnet:

   wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404
   export PATH="~/.dotnet:$PATH"
   echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc
   

2. Następnie uruchom następujące polecenie, aby utworzyć nową aplikację ASP.NET Core MVC o nazwie "BestBikeApp":

   dotnet new mvc --name BestBikeApp
   

Polecenie utworzy nowy folder o nazwie „BestBikeApp” do przechowywania projektu.

Opcjonalne testowanie aplikacji internetowej

Otwórz drugą sesję powłoki poleceń, przechodząc do https://shell.azure.com/ strony na nowej karcie. Aplikację można przetestować lokalnie na platformie Azure. Aby to zrobić, wykonaj następujące kroki:

1. W podstawowej sesji powłoki poleceń wykonaj następujące polecenia, aby skompilować i uruchomić aplikację internetową:

   cd BestBikeApp
   dotnet run
   

   Powinny zostać wyświetlone dane wyjściowe podobne do następujących:

   info: Microsoft.Hosting.Lifetime[0]
         Now listening on: https://localhost:5001
   info: Microsoft.Hosting.Lifetime[0]
         Now listening on: http://localhost:5000
   info: Microsoft.Hosting.Lifetime[0]
         Application started. Press Ctrl+C to shut down.
   info: Microsoft.Hosting.Lifetime[0]
         Hosting environment: Development
   info: Microsoft.Hosting.Lifetime[0]
         Content root path: /home/user/BestBikeApp
   

   Dane wyjściowe zawierają opis sytuacji po uruchomieniu aplikacji: aplikacja jest uruchomiona i nasłuchuje na porcie 5000.

2. W drugiej sesji powłoki poleceń uruchom następujące polecenie, aby przejść do swojej aplikacji internetowej:

   curl -kL http://127.0.0.1:5000/
   

   Powinien zostać wyświetlony kod HTML kończący się następującymi wierszami:

        <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>
   
            </main>
        </div>
   
        <footer class="border-top footer text-muted">
            <div class="container">
                &copy; 2021 - BestBikeApp - <a href="/Home/Privacy">Privacy</a>
            </div>
        </footer>
        <script src="/lib/jquery/dist/jquery.min.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
   
    </body>
    </html>
   

3. W podstawowej sesji powłoki poleceń naciśnij klawisze Ctrl+C, aby zamknąć aplikację internetową.

Aby utworzyć początkową aplikację internetową, użyjemy narzędzia Maven, powszechnie używanego narzędzia do zarządzania projektami i kompilowania dla aplikacji Java. Użyjemy szablonu maven-archetype-webapp do wygenerowania kodu naszej aplikacji internetowej.

1. Uruchom następujące polecenia w usłudze Azure Cloud Shell, aby utworzyć nową aplikację internetową:

   cd ~
   mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4
   

2. Teraz uruchom następujące polecenia, aby przejść do nowego katalogu aplikacji „helloworld” i utworzyć pakiet aplikacji na potrzeby wdrożenia:

   cd helloworld
   mvn package
   

3. Po zakończeniu działania polecenia uruchom następujące polecenia, aby otworzyć katalog docelowy i wyświetlić jego zawartość:

   cd target
   ls
   

Będziesz mieć plik o nazwie helloworld.war. Jest to pakiet aplikacji internetowej, który wdrożymy w usłudze App Service.

Aby utworzyć początkową aplikację internetową Node.js, użyjemy narzędzia Menedżer pakietów Node (npm) razem z podstawowym kodem JavaScript do uruchomienia rzeczywistego przetwarzania strony internetowej.

1. Uruchom następujące polecenia w usłudze Azure Cloud Shell, aby utworzyć nową package.json aplikację Node.js, która będzie opisywać naszą aplikację Node.js:

   cd ~
   mkdir helloworld
   cd helloworld
   npm init -y
   

Spowoduje to utworzenie nowego package.json pliku w bieżącym folderze. Powinien on znajdować się w bieżącym folderze, jeśli zostanie wprowadzony ls w oknie terminalu. Do uruchomienia logiki witryny internetowej potrzebujemy pliku JavaScript. Ponieważ jest to tylko podstawowy przykład, potrzebujemy tylko jednego pliku: index.js.

1. Uruchom następujące polecenie w terminalu, aby utworzyć plik:

   touch index.js
   

2. Teraz musimy wprowadzić kilka zmian do obu naszych plików. Uruchom następujące polecenie w terminalu, aby otworzyć edytor interaktywny:

   code .
   

3. package.json Wybierz plik i wprowadź następujące zmiany w scripts sekcji, aby uruchomić aplikację internetową przy użyciu środowiska Node.js:

   {
     "name": "helloworld",
     ...
     "scripts": {
       "start": "node index.js"
     },
     ...
   }
   

4. Zapisz plik, wybierając menu ... lub naciśnij klawisze Ctrl+S w systemach Windows i Linux lub Command+S w systemie macOS.

   Ważne

   Za każdym razem, gdy edytujesz plik w edytorze, pamiętaj, aby zapisać go później, wybierając menu ... w prawym górnym rogu edytora lub naciskając klawisze Ctrl+S w systemach Windows i Linux lub Command+S w systemie macOS. Aby zakończyć działanie edytora, naciśnij klawisze Ctrl+Q w systemach Windows i Linux lub kliknij prawym górnym rogu edytora i wybierz pozycję Zamknij w systemie MacOS.

5. Przejdź do pliku index.js i dodaj do niego następującą zawartość. Jest to mały program Node.js, który zawsze odpowiada za pomocą polecenia "Hello World!" po wysłaniu żądania GET na serwer.

   const http = require('http');
   
   const server = http.createServer(function(request, response) {
       response.writeHead(200, { "Content-Type": "text/html" });
       response.end("<html><body><h1>Hello World!</h1></body></html>");
   });
   
   const port = process.env.PORT || 1337;
   server.listen(port);
   
   console.log(`Server running at http://localhost:${port}`);
   

6. Zapisz plik i zamknij edytor, wybierając ikonę ... w prawym górnym rogu i wybierając polecenie Zapisz i zamknij edytor z menu kontekstowego lub używając klawiszy skrótów Ctrl+S i Ctrl+Q w systemach Windows i Linux.

Opcjonalne testowanie aplikacji internetowej

Uruchamiając aplikację internetową helloworld, możesz sprawdzić, czy działa lokalnie, otwierając drugą sesję powłoki poleceń.

1. Na nowej karcie przeglądarki przejdź do adresu https://shell.azure.com/.

2. W podstawowej sesji powłoki poleceń wykonaj następujące polecenia, aby uruchomić aplikację internetową:

   cd ~/helloworld
   npm start
   

3. W drugiej sesji powłoki poleceń uruchom następujące polecenie, aby przejść do swojej aplikacji internetowej:

   curl http://127.0.0.1:1337/
   

   Powinny zostać wyświetlone następujące dane wyjściowe:

   <html><body><h1>Hello World!</h1></body></html>
   

4. W podstawowej sesji powłoki poleceń naciśnij klawisze Ctrl+C , aby zamknąć aplikację internetową, a następnie zamknij drugą kartę przeglądarki sesji powłoki.

Aby utworzyć początkową aplikację internetową, użyjemy platformy web-application platformy Flask.

1. Uruchom następujące polecenia w usłudze Azure Cloud Shell, aby skonfigurować środowisko wirtualne i zainstalować platformę Flask w profilu:

   python3 -m venv venv
   source venv/bin/activate
   pip install flask
   

2. Uruchom następujące polecenia, aby utworzyć i przełączyć się do nowego katalogu aplikacji internetowej:

   mkdir ~/BestBikeApp
   cd ~/BestBikeApp
   

3. Utwórz nowy plik dla aplikacji internetowej, otwierając application.py w interaktywnym edytorze języka Python:

   code application.py
   

4. Skopiuj i wklej następujący kod języka Python, aby utworzyć główną funkcję aplikacji internetowej:

   from flask import Flask
   app = Flask(__name__)
   
   @app.route("/")
   def hello():
       return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
   

5. Zapisz plik i zamknij edytor, wybierając menu ... w prawym górnym rogu, a następnie wybierając polecenie Zapisz>zamknij edytor lub naciskając klawisze Ctrl+S i Ctrl+Q w systemach Windows i Linux.

6. Aby wdrożyć aplikację na platformie Azure, musisz zapisać listę wymagań aplikacji wprowadzonych w pliku requirements.txt . W tym celu uruchom następujące polecenie:

   pip freeze > requirements.txt
   

Opcjonalne testowanie aplikacji internetowej

Aplikację można przetestować lokalnie na platformie Azure, gdy jest uruchomiona.

1. Otwórz drugą sesję powłoki poleceń na nowej karcie https://shell.azure.com/przeglądarki .

2. W podstawowej sesji powłoki poleceń (po prawej stronie) uruchom następujące polecenia, aby aktywować środowisko wirtualne:

   cd ..
   source venv/bin/activate
   

3. W podstawowej sesji powłoki poleceń (po prawej stronie) uruchom następujące polecenia, aby uruchomić aplikację internetową:

   cd ~/BestBikeApp
   export FLASK_APP=application.py
   flask run
   

4. W drugiej sesji powłoki poleceń uruchom następujące polecenie, aby przejść do swojej aplikacji internetowej:

   curl http://127.0.0.1:5000/
   

   Powinny zostać wyświetlone następujące dane wyjściowe HTML:

   <html><body><h1>Hello Best Bike App!</h1></body></html>
   

5. W podstawowej sesji powłoki poleceń naciśnij klawisze Ctrl+C , aby zamknąć aplikację internetową, a następnie zamknij pomocniczą usługę Azure Cloud Shell.

Kontynuuj