上一個

下一個

練習 - 發佈 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 [your resource group]

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

az webapp create \
    --plan pwa-exercise-plan \
    --runtime "node|10.6" \
    --resource-group [your resource group] \
    --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 應用程式便會重新整理。

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

繼續