練習 - 發佈 Web 應用程式並使用 GitHub Actions 加以部署

已完成

現在您已做好準備,可將應用程式發佈至 Azure 了。 請使用沙箱的 Windows 執行個體來裝載 Web 應用程式。 使用 Azure 的 Visual Studio Code 擴充功能有助於簡化此程序。

在 Azure 上建立 Web 應用程式

現在可以開始在 Azure 中執行我們的應用程式。 您必須建立 Azure App Service 應用程式,並部署您的程式碼。

建立 App Service 方案與應用程式

建立 App Service 應用程式包含兩個步驟的處理序:首先建立 [方案],然後建立 [應用程式]。

「方案」名稱只須在訂用帳戶內是唯一的,因此您可以使用與我們所用相同的名稱:pwa-exercise-plan。 不過,應用程式名稱必須為全域唯一,因此您必須挑選自己的名稱。

在 Azure Cloud Shell 中,執行下列命令以建立 App Service 方案。

az appservice plan create \
    --name pwa-exercise-plan \
    --sku FREE \
    --location centralus \
    --resource-group <rgn>[sandbox resource group name]</rgn>

接下來,執行下列命令以建立使用您剛所建立 App Service 方案的 Web 應用程式。

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

建立 GitHub Actions 以部署應用程式

您現在需要建立 GitHub Actions,以便在每次將新的程式碼推送至應用程式時建置應用程式,並將程式碼連結到您在 Azure 上建立的 Web 應用程式。 此程序有兩個步驟。

  1. 首先,在應用程式的根目錄中建立兩個巢狀資料夾,名為 .github/workflows。 在 workflow 資料夾中,新增名為 deploy.yml 的檔案。 當您將此檔案認可至 GitHub 後,GitHub Actions 會自動透過工作流程挑選此檔案。 將下列程式碼新增至 deploy.yml

    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. 編輯此檔案,將應用程式的名稱設定為您在 Azure 中為 Web 應用程式提供的名稱。

使用金鑰將應用程式連線至 GitHub

您將會在 GitHub 中建立新的秘密金鑰,以在 Azure 與 GitHub 之間建立交握。

移至 Web 應用程式裝載所在的 Azure 入口網站。 按一下 [取得發行設定檔] 以下載檔案。

您的設定檔。

在 GitHub 存储库中,转到“设置”>“机密”。 將該檔案的內容複製並貼到名稱為 PORTAL_PUBLISH_PROFILE 的新秘密中,並加以儲存。

現在,當您將新的程式碼推送至存放庫時,GitHub Actions 會建置並發佈新的程式碼基底,然後 Web 應用程式便會重新整理。

發佈變更。

使用新的模型來試用,以觀看變更會如何自動發生。