Omówienie wdrażania aplikacji JavaScript na platformie Azure

Aby wdrożyć aplikację opartą na języku JavaScript na platformie Azure, należy przenieść plik lub zestaw plików na platformę Azure, który ma być obsługiwany za pośrednictwem punktu końcowego HTTP. Proces przenoszenia plików jest nazywany wdrożeniem.

Warunki wstępne

• Subskrypcja platformy Azure — utwórz ją za darmo.
• Node.js LTS.
• Konto usługi GitHub, jeśli planujesz wdrożenie z repozytorium GitHub.

Narzędzia wdrażania

Azure oferuje różne narzędzia wdrażania dostosowane do różnych potrzeb. Oto kilka typowych metod:

Metoda	Szczegóły
interfejsu wiersza polecenia dewelopera platformy Azure	Idealny dla deweloperów, którzy preferują narzędzia wiersza polecenia i muszą zautomatyzować aprowizowanie i wdrażanie zasobów.
rozszerzenia programu Visual Studio Code	Nadaje się do ręcznych wdrożeń, wdrożeń testowych lub rzadkich wdrożeń. Wymaga zainstalowanych lokalnie odpowiednich rozszerzeń platformy Azure.
"Azure CLI"	Przydatne w przypadku wdrożeń ręcznych lub okazjonalnych. Wymaga lokalnego zainstalowania interfejsu wiersza polecenia platformy Azure.
GitHub Actions	Najlepsze w przypadku zautomatyzowanych lub ciągłych wdrożeń wyzwalanych przez zmiany w repozytorium GitHub.

Istnieją inne narzędzia wdrażania oparte na określonej usłudze. Na przykład usługa Azure App Service obsługuje szeroką gamę narzędzi wdrażania:

• z pliku ZIP
• z FTP
• Dropbox lub OneDrive
• Lokalny Git
• cURL
• SSH

Możesz ponownie wdrożyć usługę App Service przy użyciu dowolnej z podanych metod, nawet jeśli nie użyto tej metody do pierwotnego wdrożenia. Może być konieczna pewna konfiguracja przed ponownym wdrożeniem, jeśli zmieniasz metodę.

Usługi hostingu platformy Azure dla aplikacji JavaScript

Zacznij od wybrania usługi hostingu, która najlepiej pasuje do aplikacji. Po wybraniu usługi użyj zalecanej ścieżki wdrażania, aby szybciej przejść do odpowiedniego samouczka.

Usługa	Najlepsze dla	Kluczowe funkcje	Zalecana ścieżka
Azure Static Web Apps	Nowoczesne aplikacje internetowe ze statycznymi frontonami, takimi jak React, Vue lub Angular oraz opcjonalne bezserwerowe interfejsy API.	Bezpłatny certyfikat SSL, globalna sieć CDN, środowiska testowe dla zgłoszeń pull request oraz zintegrowane uwierzytelnianie.	Zacznij od opcji Wdróż w Azure Static Web Apps.
Azure App Service	W pełni funkcjonalne aplikacje internetowe i interfejsy API REST.	Wbudowane skalowanie automatyczne, miejsca wdrożenia i łatwa integracja z usługami Azure.	Zacznij od wdrożenia za pomocą interfejsu wiersza polecenia dewelopera Azure lub wdróż przy użyciu Visual Studio Code.
Azure Functions	Aplikacje bezserwerowe oparte na zdarzeniach i mikrousługi.	Cennik płatności za wykonanie, automatyczne skalowanie i wiele wyzwalaczy i powiązań.	Zacznij od Wdrażanie przy użyciu programu Visual Studio Code, a następnie przejdź do Wdrażanie do usługi Azure Functions.
Azure Container Apps	Konteneryzowane aplikacje i mikrousługi.	Kontenery bezserwerowe oparte na platformie Kubernetes, integracja języka Dapr i skalowanie sterowane zdarzeniami.	Rozpocznij od wdrożenia do usługi Azure Container Apps.

Aby uzyskać więcej informacji na temat wybierania odpowiedniej usługi hostingu, zobacz Hosting aplikacji na platformie Azure.

Metody wdrażania z narzędziami

Po wybraniu usługi hostingu wybierz metodę wdrażania, która pasuje do sposobu pracy.

• Kompilacja przed wdrożeniem: w przypadku złożonych lub długich kompilacji spakuj aplikację w pliku zip i wdróż ją. Pakiet wdrożeniowy umożliwia kontrolowanie i testowanie kompilacji przed wdrożeniem.
• Kompilacja podczas wdrażania: aby uzyskać prostsze kompilacje, użyj zmiennej środowiskowej dostarczanej przez platformę Azure SCM_DO_BUILD_DURING_DEPLOYMENT=true, aby skompilować aplikację podczas wdrażania.

Jeśli wdrażasz w usłudze App Service, dostępne są również inne metody wdrażania:

Sloty wdrożeniowe w usłudze Azure App Service umożliwiają tworzenie oddzielnych środowisk dla stagingu i produkcji. Użycie slotów umożliwia przetestowanie aplikacji w środowisku testowym przed zamianą na slot produkcyjny, zapewniając bezproblemowe i wolne od błędów wdrożenie. Dowiedz się więcej o miejscach wdrożenia.

Nie używaj miejsc wdrożenia do mieszania przeznaczeń wdrożeniowych. Wszystkie miejsca wdrożenia współużytkują usługę App Service, dlatego należy upewnić się, że wzorce ruchu i zamierzone użycie wszystkich miejsc są takie same. Jeśli potrzebujesz mieć hostowane środowisko testowe lub deweloperskie, powinno to być oddzielną usługą aplikacji.

Wdrażanie przy użyciu interfejsu wiersza polecenia dla deweloperów platformy Azure

Aby najszybciej aprowizować zasoby platformy Azure i wdrożyć aplikację od początku do końca, zacznij od Azure Developer CLI (azd).

Interfejs wiersza polecenia dewelopera Azure upraszcza proces wdrażania aplikacji w Azure. Wykonaj następujące kroki:

1. Zainstaluj Azure Developer CLI.

2. Znajdź istniejący projekt , który używa wielu tych samych zasobów, których używa projekt.

3. Zainicjuj lokalną wersję projektu do użycia jako szablon infrastruktury dla własnego projektu.

4. Utwórz zasoby i wdróż kod na platformie Azure.

   azd auth login
   azd init --template <template-name>
   azd up
   

Wybierz tę opcję, jeśli chcesz mieć jeden przepływ pracy dla infrastruktury, wdrażania i powtarzalnych środowisk.

Wdrażanie za pomocą programu Visual Studio Code

Jeśli chcesz uzyskać przepływ wdrażania z przewodnikiem w edytorze, użyj rozszerzeń Azure dla Visual Studio Code.

Aby wdrożyć lub ponownie wdrożyć aplikację usługi App Service przy użyciu Visual Studio Code, wykonaj następujące kroki:

1. Zainstaluj powiązane rozszerzenia Azure, takie jak Azure App Service lub Azure Functions.

2. Otwórz eksploratora platformy Azure. Wybierz ikonę platformy Azure na pasku bocznym podstawowym lub użyj skrótu klawiaturowego (Shift + Alt + A).

3. W grupie Zasobów wybierz swoją subskrypcję i usługę.

4. Kliknij prawym przyciskiem myszy na swoją usługę, a następnie wybierz pozycję Wdróż w aplikacji internetowej....

   

Następne kroki specyficzne dla usługi

Po wybraniu usługi hostingu i metody wdrażania kontynuuj ścieżkę specyficzną dla usługi zgodną z aplikacją.

Wdrażanie do Azure Static Web Apps

Usługa Azure Static Web Apps jest idealna dla nowoczesnych aplikacji internetowych utworzonych za pomocą platform JavaScript. Aby wdrożyć, wykonaj następujące kroki:

1. Zainstaluj rozszerzenie Azure Static Web Apps dla programu Visual Studio Code.
2. Skompiluj aplikację lokalnie, aby upewnić się, że działa zgodnie z oczekiwaniami.
3. W Visual Studio Code otwórz eksploratora Azure i znajdź Azure Static Web Apps.
4. Kliknij prawym przyciskiem myszy subskrypcję, a następnie wybierz pozycję Utwórz statyczną aplikację internetową.
5. Postępuj zgodnie z monitami, aby połączyć repozytorium GitHub. Platforma Azure automatycznie tworzy przepływ pracy funkcji GitHub Actions.
6. Wypchnij zmiany do swojego repozytorium, aby uruchomić automatyczne wdrożenia.

Aby uzyskać więcej informacji, zobacz Wdrażanie aplikacji internetowej w usłudze Azure Static Web Apps.

Wdrażanie w Azure App Service

Azure App Service jest dobrym rozwiązaniem, gdy potrzebujesz zarządzanego hostingu dla aplikacji internetowej lub interfejsu API. Możesz wdrożyć za pomocą azd, Visual Studio Code, Azure CLI lub GitHub Actions.

Możesz ponownie wdrożyć usługę App Service przy użyciu dowolnej z dostępnych metod, nawet jeśli ta metoda nie została użyta do pierwotnego wdrożenia. W przypadku przełączania metod może być konieczna pewna konfiguracja przed ponownym wdrożeniem.

W przypadku ścieżki wdrożenia specyficznej dla usługi zacznij od jednego z następujących samouczków:

• Wdróż aplikację internetową Node.js i MongoDB w usłudze Azure App Service
• Wdrażanie w usłudze App Service przy użyciu funkcji GitHub Actions
• Wdrażanie do usługi App Service z pakietów ZIP

Wdrażanie przy użyciu Azure CLI

Aby wdrożyć aplikację JavaScript przy użyciu Azure CLI, wykonaj następujące kroki:

1. Zainstaluj Azure CLI, jeśli jeszcze go nie masz.

2. Zaloguj się do swojego konta platformy Azure.

   az login
   

3. Utwórz lub użyj istniejącego planu usługi App Service i aplikacji usługi App Service.

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. Wdróż kod aplikacji jako plik ZIP lub z lokalnego repozytorium Git.

   W przypadku wdrożenia z pliku ZIP:

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   W przypadku lokalnego wdrożenia usługi Git:

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

Wdrażanie za pomocą funkcji GitHub Actions

GitHub Actions automatyzuje proces wdrażania za każdym razem, gdy wypychasz zmiany do repozytorium GitHub. Aby skonfigurować GitHub Actions dla wdrożenia Azure:

1. W repozytorium GitHuba utwórz katalog .github/workflows/, jeśli jeszcze nie istnieje.

2. Utwórz plik przepływu pracy (na przykład azure-deploy.yml), który definiuje kroki wdrażania.

3. Użyj akcji logowania Azure, aby uwierzytelnić się przy użyciu Azure. Zalecane: Użyj protokołu OpenID Connect (OIDC) w celu zwiększenia bezpieczeństwa zamiast przechowywania poświadczeń jako wpisów tajnych.

   Opcja A: OpenID Connect (zalecane)

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   Aby uzyskać instrukcje dotyczące konfiguracji, zobacz Configure OpenID Connect with GitHub Actions (Konfigurowanie programu OpenID Connect za pomocą GitHub Actions).

   Opcja B: uwierzytelnianie oparte na poświadczeniach (starsza wersja)

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. Dodaj kroki wdrażania odpowiednie dla usługi hostingu (App Service, Static Web Apps lub Container Apps).

5. Zatwierdź i wypchnij plik przepływu pracy do repozytorium, aby aktywować wdrożenia automatyczne.

Aby uzyskać bardziej szczegółowe wskazówki, zobacz Wdrażanie przy użyciu GitHub Actions.

Wdrażanie w Azure Functions

Azure Functions jest dobrym rozwiązaniem w przypadku aplikacji JavaScript opartych na zdarzeniach i bezserwerowych interfejsów API.

Aby wdrożyć z poziomu Visual Studio Code:

1. Zainstaluj rozszerzenie Azure Functions.
2. Otwórz eksploratora Azure i wybierz subskrypcję Azure.
3. Utwórz lub wybierz swoją aplikację funkcji.
4. Użyj poleceń rozszerzenia, aby opublikować projekt lokalny.

Aby uzyskać wskazówki dotyczące usług, zobacz dokumentację Azure Functions i omówienie usługi Functions.

Wdróż na platformie Azure Container Apps

Usługa Azure Container Apps udostępnia bezserwerowe hostowanie kontenerów dla aplikacji JavaScript. Aby wdrożyć, wykonaj następujące kroki:

1. Konteneryzowanie aplikacji przy użyciu platformy Docker. Utwórz element Dockerfile w katalogu głównym projektu.
2. Skompiluj i przetestuj kontener lokalnie.
3. Wypchnij obraz kontenera do usługi Azure Container Registry.
4. Użyj rozszerzenia Azure Container Apps lub interfejsu wiersza polecenia platformy Azure, aby utworzyć i wdrożyć aplikację kontenera.

Aby zapoznać się z kompletnym przewodnikiem, zobacz JavaScript on Azure Container Apps overview (Omówienie języka JavaScript w usłudze Azure Container Apps).

Kroki kompilacji

Po wybraniu usługi i ścieżki wdrożenia zdecyduj, kiedy powinna nastąpić kompilacja.

W zależności od złożoności i potrzeb związanych z wdrażaniem aplikacji można utworzyć aplikację JavaScript przed wdrożeniem lub podczas wdrażania:

• Kompilacja przed wdrożeniem: w przypadku złożonych lub długich kompilacji spakuj aplikację w pliku zip i wdróż ją. Pakiet wdrożeniowy zapewnia kontrolę nad procesem kompilacji i umożliwia testowanie go przed wdrożeniem.
• Kompilowanie podczas wdrażania: w przypadku prostszych kompilacji użyj zmiennej SCM_DO_BUILD_DURING_DEPLOYMENT=true środowiskowej udostępnionej Azure, aby skompilować aplikację podczas wdrażania.

Miejsca wdrożenia

Użyj slotów wdrożenia, gdy masz już działającą aplikację usługi App Service i potrzebujesz bezpieczniejszego procesu wdrażania.

Sloty wdrożeniowe w usłudze Azure App Service umożliwiają tworzenie oddzielnych środowisk dla stagingu i produkcji. Korzystając ze slotów wdrożeniowych, możesz przetestować aplikację w środowisku przejściowym przed zamianą go ze slotem produkcyjnym, co zapewnia płynne wdrożenie bez błędów.

Nie używaj miejsc wdrożenia do mieszania przeznaczeń wdrożeniowych. Wszystkie miejsca wdrożenia współużytkują usługę App Service, dlatego należy upewnić się, że wzorce ruchu i zamierzone użycie wszystkich miejsc są takie same. Jeśli potrzebujesz hostowanego środowiska testowego lub etapowego, użyj oddzielnej usługi App Service.

Nawiązywanie połączenia ze środowiskiem hostowanym na platformie Azure

• Aby uzyskać ręczny lub sporadyczny dostęp do hostowanych środowisk, zobacz, jak wyświetlać pliki w środowisku hostowanym na platformie Azure.
• Aby uzyskać zautomatyzowany lub spójny dostęp, zastanów się nad wykonaniem kroków potrzebnych do skonfigurowania jednej z metod wdrażania.

Wyświetlanie plików w środowisku hostowanym na platformie Azure

Istnieje kilka sposobów natychmiastowego wyświetlenia plików w hostowanej aplikacji internetowej platformy Azure lub aplikacji funkcji. Jeśli używasz gniazd w hostowanym zasobie, przed wyświetleniem plików upewnij się, że jesteś we właściwym gnieździe.

• Wyświetl pliki w witrynie Azure Portal — wybierz pozycję Console w obszarze Narzędzia programistyczne dla zasobu hostingu.

• Wyświetl pliki w rozszerzeniu programu VS Code — wybierz ikonę Azure na pasku działania. W sekcji Zasoby wybierz swoją subskrypcję i usługę. Węzeł Files udostępnia widok plików zdalnych.

  • Azure App Service i rozszerzenia Azure Functions zapewniają widok plików zdalnych.

  

Wyświetlanie punktu końcowego HTTP w witrynie Azure Portal

Wyświetl swój punkt końcowy HTTP na stronie przeglądu usługi w portalu Azure.

Powiązana zawartość

• samouczki dotyczące wdrażania przy użyciu programu Visual Studio Code
• hostowanie aplikacji na platformie Azure
• Dokumentacja usługi Azure Static Web Apps
• Dokumentacja usługi Azure Container Apps
• Dokumentacja usługi Azure App Service
• Dokumentacja usługi Azure Functions