Wdrażanie aplikacji internetowej Node.js na platformie Azure

W tym przewodniku Szybki Start dowiesz się, jak utworzyć i wdrożyć swoją pierwszą aplikację internetową Node.js (Express) na platformie Azure App Service. Usługa App Service obsługuje różne wersje Node.js w systemach Linux i Windows.

Szybki start konfiguruje aplikację w usłudze App Service w warstwie bezpłatnej i nie generuje kosztów w ramach subskrypcji Azure.

W tym filmie wideo pokazano, jak wdrożyć aplikację internetową Node.js na platformie Azure.

Kroki opisane w filmie wideo zostały również opisane w poniższych sekcjach.

Konfigurowanie środowiska początkowego

• Posiadanie konta platformy Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
• Zainstaluj Node.js LTS. Uruchom polecenie node --version , aby sprawdzić, czy Node.js jest zainstalowana.
• Zainstalowanie programu Visual Studio Code.
• Zainstaluj rozszerzenie Azure App Service dla programu Visual Studio Code.

• Posiadanie konta platformy Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
• Zainstaluj Node.js LTS. Uruchom polecenie node --version , aby sprawdzić, czy Node.js jest zainstalowana.
• Zainstaluj Azure CLI, za pomocą którego możesz uruchamiać polecenia w powłoce, aby tworzyć i konfigurować zasoby Azure.

• Posiadanie konta platformy Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
• Zainstaluj Node.js LTS. Uruchom polecenie node --version , aby sprawdzić, czy Node.js jest zainstalowana.
• Aby nawiązać połączenie z aplikacją, należy mieć klienta FTP (na przykład FileZilla).

Tworzenie aplikacji Node.js

W tym kroku utworzysz podstawową aplikację Node.js i upewnisz się, że działa na komputerze.

Wskazówka

Jeśli ukończono już samouczek Node.js, możesz przejść do sekcji Wdrażanie na platformie Azure.

1. Utwórz aplikację Node.js przy użyciu generatora express, który jest instalowany domyślnie z Node.js i npm.

   npx express-generator myExpressApp --view ejs
   

   Jeśli po raz pierwszy zainstalowano generator, npx poprosi Cię o zgodę na instalację.

2. Przejdź do katalogu aplikacji i zainstaluj pakiety npm.

   cd myExpressApp && npm install
   

3. Zaktualizuj zależności do najbezpieczniejszej wersji.

   npm audit fix --force
   

4. Uruchom serwer deweloperów z informacjami o debugowaniu.

   DEBUG=myexpressapp:* npm start
   

5. W przeglądarce przejdź do http://localhost:3000. Powinny zostać wyświetlone informacje podobne do następujących:

   

Wystąpił problem

Wdróż na platformie Azure

Przed kontynuowaniem upewnij się, że masz zainstalowane i skonfigurowane wszystkie wymagania wstępne.

Uwaga

Aby aplikacja Node.js mogła działać na platformie Azure, musi nasłuchiwać na porcie określonym przez zmienną środowiskową PORT. W Twojej wygenerowanej aplikacji Express, ta zmienna środowiskowa jest już używana w skrypcie startowym bin/www. (Wyszukaj element process.env.PORT.)

Logowanie się do platformy Azure

1. W terminalu upewnij się, że jesteś w katalogu myExpressApp , a następnie uruchom program Visual Studio Code za pomocą następującego polecenia:

   code .
   

2. W programie Visual Studio Code na pasku działań wybierz logo platformy Azure.

3. W eksploratorze usługi App Service wybierz pozycję Zaloguj się do platformy Azure i postępuj zgodnie z instrukcjami.

   W programie Visual Studio Code adres e-mail platformy Azure powinien być widoczny na pasku stanu, a subskrypcja w Eksploratorze usługi App Service.

   

Wystąpił problem

Konfigurowanie aplikacji usługi App Service i wdrażanie kodu

1. Wybierz folder myExpressApp.

Wdrażanie w systemie Linux

2. Kliknij prawym przyciskiem myszy pozycję App Services i wybierz polecenie Utwórz nową aplikację internetową. Kontener systemu Linux jest używany domyślnie.

3. Wpisz globalnie unikatową nazwę aplikacji internetowej i wybierz Enter. Nazwa musi być unikatowa na całej platformie Azure i używać tylko znaków alfanumerycznych ('A-Z', 'a-z' i '0-9') i łączników ('-').

4. W Wybierz stos środowiska uruchomieniowego wybierz wersję Node.js, którą chcesz. Zalecana jest wersja LTS.

5. W obszarze Wybierz warstwę cenową wybierz pozycję Bezpłatna (F1) i poczekaj na utworzenie zasobów na platformie Azure.

6. W oknie wyskakującym Zawsze wdrażaj obszar roboczy "myExpressApp" do <nazwy> aplikacji", wybierz Tak. Dzięki temu, będąc w tym samym obszarze roboczym, Visual Studio Code wdraża się do tej samej aplikacji usługi App Service za każdym razem.

   Program Visual Studio Code tworzy zasoby platformy Azure i wdraża kod, ale wyświetla powiadomienia o postępie.

7. Po zakończeniu wdrażania wybierz Przeglądaj witrynę internetową w okienku powiadomień. W przeglądarce powinna być wyświetlana domyślna strona Express.

Wdrażanie w systemie Windows

2. Kliknij prawym przyciskiem myszy pozycję App Services i wybierz polecenie Utwórz nową aplikację internetową... Zaawansowane.

3. Wpisz globalnie unikatową nazwę aplikacji internetowej i wybierz Enter. Nazwa musi być unikatowa na całej platformie Azure i używać tylko znaków alfanumerycznych ('A-Z', 'a-z' i '0-9') i łączników ('-').

4. Wybierz pozycję Utwórz nową grupę zasobów, a następnie wprowadź nazwę grupy zasobów, na przykład AppServiceQS-rg.

5. Wybierz odpowiednią wersję Node.js. Zalecana jest wersja LTS.

6. Wybierz pozycję Windows dla systemu operacyjnego.

7. Wybierz lokalizację, z której chcesz obsługiwać aplikację. Na przykład Europa Zachodnia.

8. Wybierz pozycję Utwórz nowy plan usługi App Service, wprowadź nazwę planu (na przykład AppServiceQS-plan), a następnie wybierz pozycję F1 Bezpłatna dla warstwy cenowej.

9. W obszarze Wybierz zasób usługi Application Insights dla aplikacji wybierz pozycję Pomiń teraz i poczekaj na utworzenie zasobów na platformie Azure.

10. W oknie wyskakującym Zawsze wdrażaj obszar roboczy "myExpressApp" do <nazwy> aplikacji", wybierz Tak. Dzięki temu, będąc w tym samym obszarze roboczym, Visual Studio Code wdraża się do tej samej aplikacji usługi App Service za każdym razem.

    Program Visual Studio Code tworzy zasoby platformy Azure i wdraża kod, ale wyświetla powiadomienia o postępie.

    Uwaga

    Po zakończeniu wdrażania aplikacja platformy Azure nie jest jeszcze uruchamiana, ponieważ katalog główny projektu nie ma pliku web.config. Wykonaj pozostałe kroki, aby wygenerować je automatycznie. Aby uzyskać więcej informacji, zobacz Nie masz uprawnień do wyświetlania tego katalogu lub strony w temacie Konfigurowanie Node.js.

11. W eksploratorze App Service w programie Visual Studio Code rozwiń węzeł dla nowej aplikacji, kliknij prawym przyciskiem myszy pozycję Ustawienia aplikacji i wybierz Dodaj nowe ustawienie:

    

12. Wprowadź SCM_DO_BUILD_DURING_DEPLOYMENT jako klucz ustawienia.

13. Wprowadź wartość ustawienia true.

    To ustawienie aplikacji umożliwia automatyzację kompilacji w czasie wdrażania, która automatycznie wykrywa skrypt uruchamiania i generuje z nim plik web.config .

14. W Eksploratorze usługi App Service ponownie wybierz ikonę Wdróż w aplikacji internetowej i potwierdź, wybierając pozycję Wdróż ponownie.

15. Poczekaj na zakończenie wdrożenia, a następnie w powiadomieniu wybierz pozycję Przeglądaj witrynę internetową. W przeglądarce powinna być wyświetlana domyślna strona Express.

Wystąpił problem

W terminalu upewnij się, że jesteś w katalogu myExpressApp i wdróż kod w folderze lokalnym (myExpressApp) przy użyciu polecenia az webapp up :

Wdrażanie w systemie Linux

az webapp up --sku F1 --name <app-name>

Wdrażanie w systemie Windows

az webapp up --sku F1 --name <app-name> --os-type Windows

• az Jeśli polecenie nie jest rozpoznawane, upewnij się, że masz zainstalowany interfejs wiersza polecenia platformy Azure zgodnie z opisem w temacie Konfigurowanie środowiska początkowego.
• Zastąp <app_name> nazwą unikatową na całej platformie Azure. (Prawidłowe znaki to a-z, 0-9i -.) Dobrym wzorcem jest użycie kombinacji nazwy firmy i identyfikatora aplikacji.
• Argument --sku F1 tworzy aplikację internetową w warstwie cenowej Bezpłatna, co nie wiąże się z żadnymi kosztami.
• Opcjonalnie możesz dołączyć argument --location <location-name> , w którym <location_name> jest dostępny region platformy Azure. Listę dozwolonych regionów dla konta platformy Azure można pobrać, uruchamiając az account list-locations polecenie .
• Polecenie domyślnie tworzy aplikację systemu Linux dla Node.js. Aby utworzyć aplikację systemu Windows, użyj argumentu --os-type .
• Jeśli pojawi się błąd "Nie można automatycznie wykryć stosu uruchomieniowego aplikacji", upewnij się, że uruchamiasz komendę w katalogu myExpressApp (zobacz Rozwiązywanie problemów z automatycznym wykrywaniem przez polecenie az webapp up).

Wykonanie polecenia może potrwać kilka minut. Podczas działania program udostępnia komunikaty dotyczące tworzenia grupy zasobów, planu usługi App Service, zasobu aplikacji, konfigurowania rejestrowania oraz wdrażania aplikacji za pomocą ZIP. Następnie zwraca komunikat zawierający adres URL aplikacji, który jest adresem URL aplikacji na platformie Azure.

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at <URL>
{
  "URL": "<URL>",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Uwaga

Polecenie az webapp up wykonuje następujące akcje:

• Utwórz domyślną grupę zasobów.

• Utwórz domyślny plan usługi App Service.

• Utwórz aplikację o określonej nazwie.

• Rozpakuj i wdroż wszystkie pliki z bieżącego katalogu roboczego przy włączonej automatyzacji kompilacji.

• Buforuj parametry lokalnie w pliku .azure/config, aby nie trzeba było ich określać ponownie podczas późniejszego wdrażania za pomocą polecenia az webapp up lub innych poleceń z folderu projektu. Buforowane wartości są domyślnie używane automatycznie.

Logowanie do witryny Azure Portal

Zaloguj się w witrynie Azure Portal.

Tworzenie zasobów platformy Azure

1. Aby rozpocząć tworzenie aplikacji Node.js, przejdź do witryny https://portal.azure.com/#create/Microsoft.WebSite.

2. Na karcie Podstawowe w obszarze Project Details upewnij się, że wybrano poprawną subskrypcję, a następnie wybierz pozycję Utwórz nową, aby utworzyć grupę zasobów. Wpisz nazwę myResourceGroup.

   

3. W obszarze Szczegóły wystąpienia wpisz globalnie unikatową nazwę aplikacji internetowej i wybierz pozycję Kod. Wybierz Node 18 LTS w stosie środowiska uruchomieniowego, system operacyjny oraz region, z którego chcesz serwować swoją aplikację.

   

4. W obszarze Plan usługi App Service wybierz pozycję Utwórz nowy , aby utworzyć plan usługi App Service. Wpisz myAppServicePlan jako nazwę. Aby przejść do warstwy Bezpłatna, wybierz pozycję Zmień rozmiar, wybierz kartę Tworzenie i testowanie , wybierz pozycję F1, a następnie wybierz przycisk Zastosuj w dolnej części strony.

   

5. Wybierz przycisk Przejrzyj i utwórz w dolnej części strony.

   

6. Po zakończeniu walidacji kliknij przycisk Utwórz znajdujący się w dolnej części strony.

7. Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu.

   

Pobieranie poświadczeń usługi FTPS

Usługa Azure App Service obsługuje dwa typy poświadczeń dla wdrożenia FTP/S. Te poświadczenia nie są takie same jak poświadczenia subskrypcji platformy Azure. W tej sekcji uzyskasz poświadczenia zakresu aplikacji do użycia z usługą FileZilla.

1. Na stronie aplikacji usługi App Service wybierz pozycję Centrum wdrażania w menu po lewej stronie, a następnie wybierz kartę Poświadczenia FTPS .

   

2. Otwórz plikZilla i utwórz nową witrynę.

3. Na karcie Poświadczenia FTPS skopiuj punkt końcowy FTPS, nazwę użytkownika i hasło do FileZilla.

   

4. Wybierz Połącz w FileZilla.

Wdrażanie plików za pomocą usługi FTPS

1. Skopiuj wszystkie pliki i pliki katalogów do katalogu /site/wwwroot na platformie Azure.

   

2. Przejdź do adresu URL aplikacji, aby sprawdzić, czy aplikacja działa prawidłowo.

Ponowne wdrażanie aktualizacji

Zmiany w tej aplikacji można wdrożyć, wprowadzając zmiany w programie Visual Studio Code, zapisując pliki, a następnie ponownie wdrażając je w aplikacji platformy Azure. Na przykład:

1. W przykładowym projekcie otwórz plik views/index.ejs i zmień

   <p>Welcome to <%= title %></p>
   

   na

   <p>Welcome to Azure</p>
   

2. W Eksploratorze usługi App Service ponownie wybierz ikonę Wdróż w aplikacji internetowej i potwierdź, wybierając pozycję Wdróż ponownie.

3. Poczekaj na zakończenie wdrożenia, a następnie wybierz pozycję Przeglądaj witrynę internetową w wyskakującym okienku powiadomień. Powinieneś zobaczyć, że komunikat Welcome to Express został zmieniony na Welcome to Azure.

2. Zapisz zmiany, a następnie ponownie wdróż aplikację przy użyciu polecenia az webapp up bez argumentów dla systemu Linux. Dodaj --os-type Windows dla systemu Windows:

   az webapp up
   

   To polecenie używa wartości buforowanych lokalnie w pliku .azure/config , takich jak nazwa aplikacji, grupa zasobów i plan usługi App Service.

3. Po zakończeniu wdrażania odśwież stronę internetową. Powinieneś zobaczyć, że komunikat Welcome to Express został zmieniony na Welcome to Azure.

2. Zapisz zmiany, a następnie ponownie wdróż aplikację przy użyciu klienta FTP.

3. Po zakończeniu wdrażania odśwież stronę internetową. Powinieneś zobaczyć, że komunikat Welcome to Express został zmieniony na Welcome to Azure.

Logi przesyłane strumieniowo

Możesz przesyłać strumieniowo dane wyjściowe dziennika (wywołania do console.log()) z aplikacji platformy Azure bezpośrednio w oknie danych wyjściowych programu Visual Studio Code.

1. W Eksploratorze usługi App Service kliknij prawym przyciskiem myszy węzeł aplikacji i wybierz polecenie Uruchom dzienniki przesyłania strumieniowego.

   

2. Jeśli zostanie wyświetlony monit o ponowne uruchomienie aplikacji, wybierz pozycję Tak. Po ponownym uruchomieniu aplikacji zostanie otwarte okno danych wyjściowych programu Visual Studio Code z połączeniem ze strumieniem dziennika.

3. Po kilku sekundach w oknie danych wyjściowych zostanie wyświetlony komunikat wskazujący, że masz połączenie z usługą przesyłania dzienników. Możesz wygenerować więcej działań wyjściowych, odświeżając stronę w przeglądarce.

    Connecting to log stream...
    2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
    Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
    

Wystąpił problem

Możesz uzyskać dostęp do dzienników konsoli wygenerowanych przez aplikację oraz kontener, w którym jest uruchamiana. Dzienniki obejmują wszystkie dane wyjściowe wygenerowane przez wywołania do console.log().

Aby wyświetlić logi w czasie rzeczywistym, uruchom az webapp log tail:

az webapp log tail

Polecenie używa nazwy grupy zasobów buforowanej w pliku .azure/config .

Możesz również dołączyć --logs parametr za pomocą polecenia az webapp up , aby automatycznie otworzyć strumień dziennika we wdrożeniu.

Odśwież aplikację w przeglądarce, aby wygenerować dzienniki konsoli, w tym komunikaty opisujące żądania HTTP do aplikacji. Jeśli żadne dane wyjściowe nie pojawią się natychmiast, spróbuj ponownie w ciągu 30 sekund.

Aby zatrzymać przesyłanie strumieniowe dzienników w dowolnym momencie, wybierz Ctrl+C w terminalu.

Możesz uzyskać dostęp do dzienników konsoli wygenerowanych przez aplikację oraz kontener, w którym jest uruchamiana. Możesz przesyłać strumieniowo logi (wywołania do console.log()) z aplikacji Node.js bezpośrednio w portalu Azure.

1. Na tej samej stronie App Service dla aplikacji użyj menu po lewej stronie, aby przewinąć do sekcji Monitorowanie i wybrać pozycję Strumień dzienników.

   

2. Po kilku sekundach w oknie danych wyjściowych zostanie wyświetlony komunikat wskazujący, że masz połączenie z usługą przesyłania dzienników. Możesz wygenerować więcej działań wyjściowych, odświeżając stronę w przeglądarce.

    Connecting...
    2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
    Starting Log Tail -n 10 of existing logs ----
    /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
    2021-10-26T21:04:08.614384810Z: [INFO]
    2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
    2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
    2021-10-26T21:04:08.614403210Z: [INFO]
    2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
    2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
    2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
    2021-10-26T21:04:08.614419610Z: [INFO]  fi
    2021-10-26T21:04:08.614423411Z: [INFO]
    2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
    Ending Log Tail of existing logs ---
    

Czyszczenie zasobów

W poprzednich krokach utworzono zasoby platformy Azure w grupie zasobów. Kroki opisane w tym przewodniku szybkiego startu umieszczają wszystkie zasoby w tej grupie zasobów. Aby wyczyścić, wystarczy usunąć grupę zasobów.

1. W rozszerzeniu platformy Azure programu Visual Studio rozwiń Eksplorator grup zasobów.

2. Rozwiń subskrypcję, kliknij prawym przyciskiem myszy utworzoną wcześniej grupę zasobów i wybierz polecenie Usuń.

   

3. Po wyświetleniu monitu potwierdź usunięcie, wprowadzając nazwę usuniętej grupy zasobów. Po potwierdzeniu grupa zasobów zostanie usunięta i zostanie wyświetlone powiadomienie po zakończeniu.

Wystąpił problem

W poprzednich krokach utworzono zasoby platformy Azure w grupie zasobów. Grupa zasobów ma nazwę taką jak "appsvc_rg_Linux_CentralUS", w zależności od lokalizacji.

Jeśli nie oczekujesz, że te zasoby będą potrzebne w przyszłości, usuń grupę zasobów, uruchamiając następujące polecenie:

az group delete --no-wait

Polecenie używa nazwy grupy zasobów buforowanej w pliku .azure/config .

--no-wait Argument umożliwia zwracanie polecenia przed ukończeniem operacji.

Możesz usunąć grupę zasobów, usługę App Service i wszystkie powiązane zasoby, gdy nie są już potrzebne.

1. Na stronie przeglądu usługi App Service wybierz grupę zasobów utworzoną w kroku Tworzenie zasobów platformy Azure.

   

2. Na stronie grupy zasobów wybierz pozycję Usuń grupę zasobów. Potwierdź nazwę grupy zasobów, aby zakończyć usuwanie zasobów.

   

Następne kroki

Gratulacje, pomyślnie ukończyłeś ten szybki przewodnik!

Wdrażanie aplikacji internetowej Node.js i bazy danych MongoDB na platformie Azure

Konfigurowanie aplikacji Node.js

  Zabezpiecz swoją aplikację Azure App Service z dedykowaną domeną i zarządzanym certyfikatem

Zapoznaj się z innymi rozszerzeniami platformy Azure.

• Azure Cosmos DB
• Azure Functions
• Narzędzia platformy Docker
• Narzędzia interfejsu wiersza polecenia platformy Azure
• Narzędzia usługi Azure Resource Manager

Możesz też pobrać je wszystkie, instalując pakiet Node Pack dla pakietu rozszerzeń platformy Azure .