Přehled nasazení javascriptové aplikace do Azure

Pokud chcete nasadit aplikaci založenou na JavaScriptu do Azure, přesunete soubor nebo sadu souborů do Azure, které se budou obsluhovat přes koncový bod HTTP. Proces přesunutí souborů se nazývá nasazení.

Požadavky

• Předplatné Azure – vytvořte si zdarma.
• Node.js LTS.
• Účet GitHubu, pokud plánujete nasazení z úložiště GitHub.

Nástroje pro nasazení

Azure nabízí různé nástroje pro nasazení, které vyhovují různým potřebám. Tady jsou některé běžné metody:

Na základě konkrétní služby existují další nástroje pro nasazení. Služba App Service Azure například podporuje širokou škálu nástrojů pro nasazení:

• ze souboru ZIP
• s FTP
• Dropbox nebo OneDrive
• místní Git
• cURL
• SSH

K opětovnému nasazení služby App Service můžete použít některou z uvedených metod, i když jste tuto metodu nepoužíli k původnímu nasazení. Pokud přepínáte metody, můžete mít před opětovným nasazením určitou konfiguraci.

Hostitelské služby Azure pro javascriptové aplikace

Začněte výběrem hostitelské služby, která nejlépe odpovídá vaší aplikaci. Po výběru služby použijte doporučenou cestu nasazení, abyste se dostali k správnému kurzu rychleji.

Další informace o výběru správné hostitelské služby najdete v tématu Hostování aplikací v Azure.

Metody nasazení pomocí nástrojů

Po výběru hostitelské služby zvolte metodu nasazení, která odpovídá způsobu práce.

• Sestavení před nasazením: V případě složitých nebo zdlouhavých sestavení zabalte aplikaci do souboru ZIP a nasaďte ho. Balíček pro nasazení umožňuje řídit a testovat sestavení před nasazením.
• Sestavení během nasazení: Pro jednodušší sestavení použijte proměnnou prostředí poskytovanou v Azure SCM_DO_BUILD_DURING_DEPLOYMENT=true k sestavení aplikace během nasazování.

Pokud nasazujete do služby App Service, jsou k dispozici i další metody nasazení:

Sloty nasazení ve službě Azure App Service umožňují vytvářet samostatná prostředí pro testování a produkci. Použití slotů umožňuje otestovat aplikaci v přípravném prostředí před výměnou s produkčním slotem a zajistit tak hladké a bezchybné nasazení. Přečtěte si další informace o slotech nasazení.

Nepoužívejte sloty nasazení ke kombinaci účelů nasazení. Všechny sloty nasazení sdílejí službu App Service, proto je třeba zajistit, že způsob toku provozu a zamýšlené použití všech slotů jsou shodné. Pokud potřebujete hostované testovací nebo staging prostředí, které by mělo být samostatnou službou App Service.

Nasazení pomocí Azure Developer CLI

Pokud chcete co nejrychlejší komplexní postup pro zřizování prostředků Azure a nasazení aplikace, začněte s Azure Developer CLI (azd).

Azure Developer CLI zjednodušuje nasazení vaší aplikace do Azure. Postupujte takto:

1. nainstalujte Azure Developer CLI.

2. Najděte existující projekt , který používá mnoho stejných zdrojů, které váš projekt používá.

3. Inicializuje místní verzi projektu pro použití jako šablonu infrastruktury pro vlastní projekt.

4. Vytvořte prostředky a nasaďte kód do Azure.

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

Tuto cestu použijte, pokud chcete jeden pracovní postup pro infrastrukturu, nasazení a opakovatelná prostředí.

Nasazení pomocí editoru Visual Studio Code

Pokud chcete mít v editoru tok nasazení s asistencí, použijte rozšíření Azure pro Visual Studio Code.

Pokud chcete aplikaci App Service nasadit nebo znovu nasadit pomocí Visual Studio Code, proveďte následující kroky:

1. Nainstalujte související rozšíření Azure, například Azure App Service nebo Azure Functions.

2. Otevřete Průzkumníka Azure. Vyberte ikonu Azure na primárním bočním panelu nebo použijte klávesovou zkratku (Shift + Alt + A).

3. Ve skupině prostředků vyberte své předplatné a službu.

4. Klikněte pravým tlačítkem na službu a vyberte Nasadit do webové aplikace....

   

Další kroky specifické pro službu

Po výběru hostitelské služby a metody nasazení pokračujte cestou specifickou pro danou službu, která odpovídá vaší aplikaci.

Nasazení do Azure Static Web Apps

Azure Static Web Apps je ideální pro moderní webové aplikace vytvořené pomocí architektur JavaScriptu. Nasazení:

1. Nainstalujte rozšíření Azure Static Web Apps pro Visual Studio Code.
2. Sestavte aplikaci místně, abyste měli jistotu, že funguje podle očekávání.
3. V Visual Studio Code otevřete průzkumníka Azure a vyhledejte Azure Static Web Apps.
4. Klikněte pravým tlačítkem na své předplatné a pak vyberte Vytvořit statickou webovou aplikaci.
5. Podle pokynů připojte úložiště GitHub. Azure automaticky vytvoří pracovní postup GitHub Actions.
6. Nasdílejte změny do úložiště, aby se aktivovala automatická nasazení.

Další podrobnosti najdete v tématu Nasazení webové aplikace do Azure Static Web Apps.

Nasazení do služby Azure App Service

Azure App Service je vhodné, když potřebujete spravovat hostování webové aplikace nebo rozhraní API. Nasazení můžete provést pomocí azd, Visual Studio Code, Azure CLI nebo GitHub Actions.

Do služby App Service můžete znovu nasadit některou z dostupných metod, i když jste tuto metodu nepoužíli k původnímu nasazení. Pokud přepínáte metody, budete možná před opětovným nasazením potřebovat určitou konfiguraci.

Pro cestu nasazení specifickou pro službu začněte jedním z těchto kurzů:

• Nasazení webové aplikace Node.js a MongoDB do Azure App Service
• Nasazení do služby App Service použitím služby GitHub Actions
• Nasazení do služby App Service z balíčků ZIP

Nasazení s využitím Azure CLI

Pokud chcete nasadit javascriptovou aplikaci pomocí Azure CLI, postupujte takto:

1. Pokud ho ještě nemáte, nainstalujte Azure CLI.

2. Přihlaste se ke svému účtu Azure.

   az login
   

3. Vytvořte nebo použijte existující plán služby App Service a službu 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. Nasaďte kód aplikace jako soubor ZIP nebo z místního úložiště Git.

   Pro nasazení ZIP:

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

   Pro místní nasazení Gitu:

   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
   

Nasazení s využitím GitHub Actions

GitHub Actions proces nasazení automatizuje při každém nasdílení změn do úložiště GitHub. Nastavení GitHub Actions pro nasazení Azure:

1. V úložišti GitHub vytvořte .github/workflows/ adresář, pokud neexistuje.

2. Vytvořte soubor pracovního postupu (například azure-deploy.yml), který definuje kroky nasazení.

3. K ověření v Azure použijte akci přihlášení k Azure. Doporučené: Místo ukládání přihlašovacích údajů jako tajných kódů použijte OpenID Connect (OIDC).

   Možnost A: OpenID Connect (doporučeno)

   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: '.'
   

   Pokyny k nastavení najdete v tématu Konfigurace OpenID Connect pomocí GitHub Actions.

   Možnost B: Ověřování na základě přihlašovacích údajů (starší verze)

   - 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. Přidejte kroky nasazení vhodné pro hostující službu (App Service, Static Web Apps nebo Container Apps).

5. Potvrďte a nasdílejte soubor pracovního postupu do úložiště, abyste mohli aktivovat automatická nasazení.

Podrobnější pokyny najdete v tématu Nasazení pomocí GitHub Actions.

Nasazení do Azure Functions

Azure Functions je vhodný pro javascriptové aplikace řízené událostmi a bezserverová rozhraní API.

Nasazení z Visual Studio Code:

1. Nainstalujte rozšíření Azure Functions.
2. Otevřete průzkumníka Azure a vyberte své předplatné Azure.
3. Vytvořte nebo vyberte aplikaci funkcí.
4. Pomocí příkazů rozšíření publikujte místní projekt.

Pokyny ke službám najdete v Azure Functions dokumentaci a přehledu funkcí.

Nasazení do aplikací Azure Container Apps

Azure Container Apps poskytuje bezserverové hostování kontejnerů pro javascriptové aplikace. Nasazení:

1. Kontejnerizace aplikace pomocí Dockeru V kořenovém adresáři projektu vytvořte Dockerfile.
2. Sestavte a otestujte kontejner místně.
3. Nasdílejte image kontejneru do služby Azure Container Registry.
4. K vytvoření a nasazení aplikace kontejneru použijte rozšíření Azure Container Apps nebo Azure CLI.

Kompletní průvodce najdete v přehledu JavaScriptu v Azure Container Apps.

Kroky sestavení

Po výběru služby a cesty nasazení se rozhodněte, kdy se má sestavení provést.

V závislosti na složitosti a potřebách nasazení vaší aplikace se můžete rozhodnout, jestli chcete vytvořit javascriptovou aplikaci před nasazením nebo během nasazení:

• Sestavení před nasazením: V případě složitých nebo zdlouhavých sestavení zabalte aplikaci do souboru ZIP a nasaďte ho. Balíček nasazení vám dává kontrolu nad procesem sestavení a umožňuje ho otestovat před nasazením.
• Sestavení během nasazení: Pro jednodušší sestavení použijte proměnnou SCM_DO_BUILD_DURING_DEPLOYMENT=true prostředí poskytovanou Azure k sestavení aplikace během nasazení.

Sloty nasazení

Jakmile máte spuštěnou aplikaci App Service a potřebujete bezpečnější proces vydávání, použijte sloty pro nasazení.

Sloty nasazení ve službě Azure App Service umožňují vytvářet samostatná prostředí pro testování a produkci. Pomocí slotů můžete svou aplikaci otestovat v testovacím prostředí před jejím přepnutím do produkčního slotu a zajistit tak plynulé nasazení bez chyb.

Nepoužívejte sloty nasazení ke kombinaci účelů nasazení. Všechny sloty pro nasazení sdílejí službu App Service, takže je potřeba zajistit, aby charakter provozu a účel použití všech slotů byly stejné. Pokud potřebujete hostované testovací nebo fázové prostředí, použijte samostatnou službu App Service.

Připojení k prostředí hostovaným v Azure

• Pokud chcete ruční nebo občasný přístup k hostovaným prostředím, přečtěte si, jak zobrazit soubory v prostředí hostovaném na Azure.
• Pro automatizovaný nebo konzistentní přístup zvažte provedení kroků k nastavení jedné z metod nasazení.

Zobrazení souborů v prostředí hostovaného v Azure

Soubory v hostované webové aplikaci Azure nebo aplikaci funkcí můžete okamžitě zobrazit několika způsoby. Pokud ve svém hostovaném prostředku používáte sloty, musíte se před prohlížením souborů ujistit, že jste na správném slotu.

• Zobrazit soubory v Azure portálu – V části Vývojové nástroje vyberte pro váš hostitelský prostředek Konzolu.

• Zobrazení souborů v rozšíření VS Code – na panelu aktivit vyberte ikonu Azure. V části Prostředky vyberte své předplatné a službu. Uzel Files poskytuje zobrazení vzdálených souborů.

  • Azure App Service i rozšíření Azure Functions poskytují zobrazení vzdálených souborů.

  

Zobrazení koncového bodu HTTP na webu Azure Portal

Zobrazte koncový bod HTTP na stránce Přehled služby na webu Azure Portal.

Související obsah

• kurzy nasazení pomocí nástroje Visual Studio Code
• Hostování aplikací v Azure
• Dokumentace ke službě Azure Static Web Apps
• Dokumentace ke službě Azure Container Apps
• Dokumentace ke službě Azure App Service
• Dokumentace ke službě Azure Functions