Gyakorlat – A webalkalmazás közzététele és üzembe helyezése egy GitHub Actions-művelettel

  • 10 perc

Most már készen áll az alkalmazás az Azure-ban való közzétételére. A tesztkörnyezet Windows-példányával üzemeltetheti a webalkalmazást. Az Azure Visual Studio Code-bővítményével leegyszerűsítheti a folyamatot.

Webalkalmazás létrehozása az Azure-ban

Ideje futtatni az alkalmazást az Azure-ban. Létre kell hoznia egy Azure App Service-alkalmazást, és üzembe kell helyeznie a kódot.

Az App Service-csomag és az alkalmazás létrehozása

Az App Service-alkalmazások létrehozása két lépésből áll: Először hozza létre a csomagot, majd hozza létre az alkalmazást.

A csomag nevének csak az előfizetésen belül kell egyedinek lennie, így használhatja ugyanazt a nevet, amelyet mi is: pwa-exercise-plan. Az alkalmazás nevének azonban globálisan egyedinek kell lennie, így annak saját nevet kell adnia.

Az Azure Cloud Shellben futtassa a következő parancsot egy App Service-csomag létrehozásához.

az appservice plan create \
    --name pwa-exercise-plan \
    --sku FREE \
    --location centralus \
    --resource-group [your resource group]

Ezután futtassa a következő parancsot az imént létrehozott App Service-csomagot használó webalkalmazás létrehozásához.

az webapp create \
    --plan pwa-exercise-plan \
    --runtime "node|10.6" \
    --resource-group [your resource group] \
    --name <your-unique-app-name>

GitHub Actions-művelet létrehozása az alkalmazás üzembe helyezéséhez

Most létre kell hoznia egy GitHub-műveletet az alkalmazás létrehozásához, amikor új kódot küld hozzá, és csatlakoztatja a kódot az Azure-ban létrehozott webalkalmazáshoz. A folyamat két lépésből áll.

  1. Először hozzon létre két beágyazott mappát az alkalmazás .github/workflows nevű gyökerében. A workflow mappában hozzon létre egy deploy.yml nevű fájlt. A GitHub-műveletek automatikusan felveszik ezt a fájlt munkafolyamatként, miután véglegesíti azt a GitHubon. Adja hozzá a következő kódot a deploy.yml fájlhoz.

    on:
    push:
        branches:
            - master

env:
    AZURE_WEBAPP_NAME: 'trickyimages' # set this to your application's name
    AZURE_WEBAPP_PACKAGE_PATH: 'dist' # set this to the path to your web app project, for Vue.js it's dist
    NODE_VERSION: '10.x' # set this to the node version to use

jobs:
    build-and-deploy:
        name: Build and Deploy
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - name: Use Node.js ${{ env.NODE_VERSION }}
              uses: actions/setup-node@v1
              with:
                  node-version: ${{ env.NODE_VERSION }}
            - name: npm install, build, and test
              run: |
                  # Build and test the project, then
                  # deploy to Azure Web App.
                  npm install
                  npm run build --if-present
                  npm run test --if-present
            - name: 'Deploy to Azure WebApp'
              uses: azure/webapps-deploy@v1
              with:
                  app-name: ${{ env.AZURE_WEBAPP_NAME }}
                  publish-profile: ${{ secrets.PORTAL_PUBLISH_PROFILE }}
                  package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

  2. Szerkessze a fájlt, és állítsa az alkalmazás nevét a webalkalmazás az Azure-ban megadott nevére.

Az alkalmazás összekapcsolása a GitHubbal kulcsok segítségével

Létrehoz egy titkos kulcsot a GitHubon, amellyel létrehozza a kézfogást az Azure és a GitHub között.

Nyissa meg az Azure Portalt, ahol üzemelteti a webalkalmazást. Válassza a Közzétételi profil lekérése lehetőséget egy fájl letöltéséhez.

your profile.

A GitHub-adattárban lépjen Gépház Titkos kódok elemre>. Másolja és illessze be a fájl tartalmát egy új titkos kódba PORTAL_PUBLISH_PROFILE néven, majd mentse.

Mostantól amikor új kódot küld le az adattárnak, a GitHub Actions-művelet elkészíti és közzéteszi az új kódbázist, a webalkalmazás pedig frissül.

Publishing changes.

Próbálja ki egy új modellel, és figyelje meg, ahogy a módosítások automatikusan végbemennek.