JavaScript-alkalmazás üzembe helyezése az Azure-ban – áttekintés

A JavaScript-alapú alkalmazás Azure-ban való üzembe helyezéséhez át kell helyeznie egy fájlt vagy fájlkészletet az Azure-ba, hogy egy HTTP-végponton keresztül lehessen kiszolgálni. A fájlok áthelyezésének folyamatát üzembe helyezésnek nevezzük.

Előfeltételek

Üzembehelyezési eszközök

Azure különböző üzembehelyezési eszközöket kínál a különböző igényeknek megfelelően. Íme néhány gyakori módszer:

Módszer Részletek
Azure fejlesztői parancssori felület Ideális olyan fejlesztőknek, akik a parancssori eszközöket részesítik előnyben, és automatizálják az erőforrások kiépítését és üzembe helyezését.
Visual Studio Code-bővítmények Alkalmas kézi, tesztelési vagy ritka telepítésekhez. A megfelelő Azure-bővítményeket helyileg kell telepíteni.
Azure parancssori felület Hasznos manuális vagy alkalmi telepítésekhez. A helyileg telepített Azure CLI-t igényli.
GitHub-műveletek A GitHub-adattár változásai által aktivált automatikus vagy folyamatos üzembe helyezésekhez a legjobb.

Más üzembehelyezési eszközök is léteznek az adott szolgáltatás alapján. Az Azure App Service például számos üzembehelyezési eszközt támogat:

A megadott metódusok bármelyikével újra üzembe helyezheti az App Service-t, még akkor is, ha eredetileg nem használta ezt a metódust. Ha módszert vált, előfordulhat, hogy az újbóli telepítés előtt némi konfigurációra lesz szüksége.

Azure-üzemeltetési szolgáltatások JavaScript-alkalmazásokhoz

Először válassza ki az alkalmazásnak leginkább megfelelő üzemeltetési szolgáltatást. Miután kiválasztott egy szolgáltatást, az ajánlott üzembehelyezési útvonal használatával gyorsabban érheti el a megfelelő oktatóanyagot.

Service Legjobb a számára Legfontosabb funkciók Ajánlott elérési út
Azure Static Web Apps Modern webalkalmazások statikus előtérrendszerekkel, például React, Vue vagy Angular, valamint opcionális kiszolgáló nélküli API-kkal. Ingyenes SSL, globális CDN, átmeneti környezetek lekéréses kérelmek esetén és integrált hitelesítés. Kezdje a Üzembe helyezés az Azure Static Web Apps szolgáltatásba lehetőséggel.
Azure App Service Teljes funkcionalitású webalkalmazások és REST API-k. Beépített automatikus skálázás, üzembehelyezési pontok és egyszerű integráció Azure szolgáltatásokkal. Kezdje az üzembe helyezéssel az Azure Developer CLI használatával vagy az üzembe helyezéssel a Visual Studio Code használatával.
Azure Functions Eseményvezérelt kiszolgáló nélküli alkalmazások és mikroszolgáltatások. végrehajtásonkénti díjszabás, automatikus skálázás, valamint több eseményindító és kötés. Kezdje a Visual Studio Code használatával történő üzembe helyezéssel, majd folytassa az Azure Functionsbe való üzembe helyezéssel.
Azure Konténer Alkalmazások Tárolóalapú alkalmazások és mikroszolgáltatások. Kubernetes-alapú kiszolgáló nélküli tárolók, Dapr-integráció és eseményvezérelt skálázás. Kezdje ezzel: Üzembe helyezés az Azure Container Appsben.

A megfelelő üzemeltetési szolgáltatás kiválasztásával kapcsolatos további információkért lásd: Alkalmazások üzemeltetése az Azure-ban.

Üzembehelyezési módszerek eszközökkel

Miután kiválasztott egy üzemeltetési szolgáltatást, válassza ki a munkavégzéshez megfelelő üzembe helyezési módszert.

  • Build az üzembe helyezés előtt: Összetett vagy hosszadalmas buildek esetén csomagolja be az alkalmazást egy zip-fájlba, és helyezze üzembe. Az üzembe helyezési csomagokkal az üzembe helyezés előtt szabályozhatja és tesztelheti a buildet.
  • Felépítés az üzembe helyezés során: Egyszerűbb felépítésekhez használja az Azure által biztosított SCM_DO_BUILD_DURING_DEPLOYMENT=true környezeti változót az alkalmazás üzembe helyezése közbeni felépítéshez.

Ha az App Service-ben helyezi üzembe, más üzembe helyezési módszerek is elérhetők:

Üzembehelyezési pontok az Azure App Service-ben lehetővé teszik, hogy külön környezeteket hozzon létre az előkészítéshez és az éles környezethez. A helyek használata lehetővé teszi, hogy az alkalmazást átmeneti környezetben tesztelje, mielőtt felcseréli az éles környezettel, biztosítva a zökkenőmentes és hibamentes üzembe helyezést. További információ az üzembehelyezési pontokról.

Ne használjon üzembehelyezési pontokat az üzembehelyezési célok keveredéséhez. Minden üzembe helyezési hely osztozik az App Service-ben, ezért biztosítania kell, hogy az összes hely forgalmi mintája és rendeltetése megegyezzen. Ha egy üzemeltetett teszt- vagy fáziskörnyezetre van szüksége, amely külön appszolgáltatásnak kell lennie.

Üzembe helyezés az Azure Developer CLI-vel

Az Azure-erőforrások kiépítéséhez és az alkalmazás üzembe helyezéséhez vezető leggyorsabb, teljes körű folyamathoz kezdje az Azure Developer CLI-vel (azd).

A Azure fejlesztői parancssori felület leegyszerűsíti az alkalmazás üzembe helyezésének folyamatát Azure. Kövesse az alábbi lépéseket:

  1. Telepítse az Azure Developer CLI-t.

  2. Keressen egy meglévő projektet , amely a projekt által használt erőforrások nagy részét használja.

  3. Inicializálja a projekt helyi verzióját, hogy saját projektjéhez infrastruktúrasablonként használhassa.

  4. Hozza létre az erőforrásokat, és telepítse a kódot az Azure-ban.

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

Ezt az elérési utat akkor használja, ha egy munkafolyamatot szeretne használni az infrastruktúrához, az üzembe helyezéshez és az megismételhető környezetekhez.

Üzembe helyezés a Visual Studio Code-tal

Ha irányított üzembehelyezési folyamatot szeretne a szerkesztőben, használja a Azure bővítményeket Visual Studio Code.

Az App Service-alkalmazás Visual Studio Code használatával történő üzembe helyezéséhez vagy ismételt üzembe helyezéséhez hajtsa végre az alábbi lépéseket:

  1. Telepítse a kapcsolódó Azure bővítményeket, például Azure App Service vagy Azure Functions.

  2. Nyissa meg az Azure Explorert. Válassza az Azure ikont az elsődleges oldalsávon, vagy használja a billentyűparancsot (Shift + Alt + A).

  3. Az Erőforrás csoportban válassza ki az előfizetést és a szolgáltatást.

  4. Kattintson a jobb gombbal a szolgáltatásra, majd válassza a Üzembe helyezés webalkalmazásként....

    Képernyőkép az App Service Visual Studio Code használatával történő üzembe helyezéséről vagy újbóli üzembe helyezéséről.

Szolgáltatásspecifikus következő lépések

Miután kiválasztott egy üzemeltetési szolgáltatást és üzembe helyezési módszert, folytassa az alkalmazásnak megfelelő szolgáltatásspecifikus elérési úttal.

Üzembe helyezés az Azure Static Web Appsben

Az Azure Static Web Apps ideális a JavaScript-keretrendszerekkel készült modern webalkalmazásokhoz. Üzembe helyezés:

  1. Telepítse az Azure Static Web Apps bővítményt a Visual Studio Code-hoz.
  2. Az alkalmazást helyileg hozhatja létre, hogy a várt módon működjön.
  3. A Visual Studio Code-ban nyissa meg az Azure Explorert, és keresse meg az Azure Static Web Apps elemet.
  4. Kattintson a jobb gombbal az előfizetésre, majd válassza a Statikus webalkalmazás létrehozása lehetőséget.
  5. Kövesse az utasításokat a GitHub-adattár csatlakoztatásához. Az Azure automatikusan létrehoz egy GitHub Actions-munkafolyamatot.
  6. Küldje el a tárház módosításait, hogy aktiválja az automatikus üzembe helyezéseket.

További részletekért lásd : Webalkalmazás üzembe helyezése az Azure Static Web Appsben.

Üzembe helyezés az Azure App Service-ben

Azure App Service akkor jó választás, ha felügyelt üzemeltetésre van szüksége egy webalkalmazáshoz vagy API-hoz. Üzembe helyezéshez használhatja azda következőt: Visual Studio Code, Azure CLI vagy GitHub Actions.

Az App Service-be a rendelkezésre álló módszerek bármelyikével újra üzembe helyezheti, még akkor is, ha eredetileg nem használta ezt a metódust. A metódusok közötti váltáshoz szükség lehet némi konfigurációra az újbóli üzembe helyezés előtt.

Szolgáltatásspecifikus üzembehelyezési útvonal esetén kezdje az alábbi oktatóanyagok egyikével:

Üzembe helyezés az Azure CLI-n keresztül

Ha a JavaScript-alkalmazást a Azure CLI szeretné üzembe helyezni, kövesse az alábbi lépéseket:

  1. Telepítse a Azure CLI, ha még nem rendelkezik vele.

  2. Jelentkezzen be az Azure-fiókjába.

    az login
    
  3. Hozzon létre vagy használjon egy meglévő App Service-csomagot és app service-t.

    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. Helyezze üzembe az alkalmazáskódot ZIP-fájlként vagy egy helyi Git-adattárból.

    ZIP-telepítés esetén:

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

    Helyi Git-telepítés esetén:

    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
    

Üzembe helyezés a GitHub Actions használatával

GitHub Actions automatizálja az üzembe helyezési folyamatot, amikor módosításokat küld a GitHub adattárba. GitHub Actions beállítása Azure üzembe helyezéshez:

  1. Ha nem létezik, hozzon létre egy .github/workflows/ könyvtárat a GitHub adattárban.

  2. Hozzon létre egy munkafolyamat-fájlt (például azure-deploy.yml), amely meghatározza az üzembe helyezés lépéseit.

  3. Az Azure-ban való hitelesítéshez használjon Azure-bejelentkezési műveletet. Ajánlott: Az OpenID Connect (OIDC) használata a fokozott biztonság érdekében a hitelesítő adatok titkos kulcsként való tárolása helyett.

    A lehetőség: OpenID Connect (ajánlott)

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

    A beállítási útmutatóért lásd: OpenID Connect konfigurálása a GitHub Actions használatával.

    B. lehetőség: Hitelesítő adatokon alapuló hitelesítés (örökölt)

    - 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. Adja hozzá az üzemeltetési szolgáltatáshoz (App Service, Static Web Apps vagy Container Apps) megfelelő üzembe helyezési lépéseket.

  5. Véglegesítse és küldje le a munkafolyamat-fájlt az adattárba az automatikus üzembe helyezés aktiválásához.

Részletesebb útmutatásért lásd: Üzembe helyezés GitHub Actions.

Üzembe helyezés az Azure Functionsben

Azure Functions kiválóan alkalmas eseményvezérelt JavaScript-alkalmazásokhoz és kiszolgáló nélküli API-khoz.

Üzembe helyezés a Visual Studio Code-ból:

  1. Telepítse a Azure Functions bővítményt.
  2. Nyissa meg a Azure explorert, és válassza ki Azure előfizetését.
  3. Hozzon létre vagy válasszon ki függvényalkalmazást.
  4. A bővítményparancsokkal tegye közzé a helyi projektet.

A szolgáltatásokkal kapcsolatos útmutatásért tekintse meg Azure Functions dokumentációt és a Functions áttekintését.

Üzembe helyezés az Azure Container Appsben

Az Azure Container Apps kiszolgáló nélküli tároló-üzemeltetést biztosít JavaScript-alkalmazásokhoz. Üzembe helyezés:

  1. Konténerizálja az alkalmazását a Docker segítségével. Hozzon létre egy Dockerfile elemet a projekt gyökérkönyvtárában.
  2. Építse fel és tesztelje a konténert helyben.
  3. A tárolórendszerkép leküldése az Azure Container Registrybe.
  4. A tárolóalkalmazás létrehozásához és üzembe helyezéséhez használja az Azure Container Apps bővítményt vagy az Azure CLI-t.

A teljes útmutatóért tekintse meg a JavaScriptet az Azure Container Appsben – áttekintés.

Létrehozási lépések

Miután kiválasztotta a szolgáltatást és az üzembe helyezési útvonalat, döntse el, hogy mikor történjen meg a buildelés.

Az alkalmazás összetettségétől és üzembe helyezési igényeitől függően dönthet úgy, hogy a JavaScript-alkalmazást az üzembe helyezés előtt vagy alatt hozza létre:

  • Build az üzembe helyezés előtt: Összetett vagy hosszadalmas buildek esetén csomagolja be az alkalmazást egy zip-fájlba, és helyezze üzembe. Az üzembe helyezési csomagokkal szabályozhatja a buildelési folyamatot, és tesztelheti azt az üzembe helyezés előtt.
  • Buildelés az üzembe helyezés során: Egyszerűbb buildekhez használja a Azure által biztosított környezeti változót SCM_DO_BUILD_DURING_DEPLOYMENT=true az alkalmazás üzembe helyezése során történő létrehozásához.

Üzembehelyezési pontok

Használjon üzembehelyezési helyeket, ha már rendelkezik egy működő App Service-alkalmazással, és biztonságosabb kiadási folyamatra van szüksége.

Üzembehelyezési pontok az Azure App Service-ben lehetővé teszik, hogy külön környezeteket hozzon létre az előkészítéshez és az éles környezethez. Az üzembehelyezési pontok használatával az alkalmazását előkészítő környezetben tesztelheti, mielőtt felcserélné azt az éles üzembehelyezési ponttal, így biztosítva a zökkenőmentes és hibamentes telepítést.

Ne használjon üzembehelyezési pontokat az üzembehelyezési célok keveredéséhez. Az összes telepítési pont ugyanazt az App Service-et használja, ezért ügyelnie kell arra, hogy az összes pont forgalmi mintázata és tervezett használata azonos legyen. Ha üzemeltetett teszt- vagy szakaszkörnyezetre van szüksége, használjon egy külön App Service-t.

Csatlakozás az Azure által üzemeltetett környezethez

Fájlok megtekintése az Azure által üzemeltetett környezetben

A tárolt Azure-webalkalmazásban vagy függvényalkalmazásban lévő fájlok többféleképpen is azonnal megtekinthetők. Ha slotokat használ az üzemeltetett erőforrásban, a fájlok megtekintése előtt győződjön meg arról, hogy a megfelelő slotban van.

  • Fájlok megtekintése az Azure portálon – válassza a Konzol lehetőséget az Ön üzemeltetési erőforrásához tartozó fejlesztési eszközök között.

  • Fájlok megtekintése a VS Code bővítményben – válassza a Azure ikont a Tevékenységsávon. Az Erőforrások szakaszban válassza ki az előfizetést és a szolgáltatást. A Fájlok csomóponton megtekintheti a távoli fájlokat.

    Képernyőkép a Azure App Service és Azure Functions Visual Studio Code bővítményeiben megjelenő távoli fájlokról.

HTTP-végpont megtekintése az Azure Portalon

A HTTP-végpont megtekintése a szolgáltatás Áttekintés lapján az Azure Portalon.

Képernyőkép a HTTP-végpontról a szolgáltatás áttekintési lapján a Azure portálon.