带有 azure web 应用程序设置的 Github 操作答案

【问题标题】：Github action with azure web app application setting带有 azure web 应用程序设置的 Github 操作
【发布时间】：2021-11-22 19:02:13
【问题描述】：

我正在尝试使用 azure web 应用程序和 github 操作部署一个 vuejs 应用程序。这是我的 yml：

name: 'test'

on:
  push:
    branches:
      - release
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: azure/login@v1
        with:
          creds: '${{ secrets.AZURE_CREDENTIALS_DEV }}'
      - uses: azure/appservice-settings@v1
        with:
          app-name: 'test'
          app-settings-json: '${{ secrets.APP_SETTINGS_DEV }}' 
          general-settings-json: '{"alwaysOn": "false", "webSocketsEnabled": "true"}' #'General configuration settings as Key Value pairs'
        id: settings
      - run: echo "The webapp-url is ${{ steps.settings.outputs.webapp-url }}"
      - run: |
          az logout

      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'

      - name: npm install, build
        run: |
          npm install
          npm run build

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'test'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'test'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPR }}
          package: .

我按照本教程从 Web 应用程序中检索应用程序设置： https://github.com/Azure/appservice-settings

所以我在管道中获得了变量和秘密，但似乎在构建应用程序时，它没有使用这些秘密构建，环境变量在应用程序中变成未定义：(

有人知道解决办法吗？

【问题讨论】：

如果你想检查一个秘密是否可以作为 ENV 变量，我建议添加一个run: echo ${{ env.MY_ENV }} 步骤。
感谢您的想法。在构建项目时如何将 .env 文件带入管道是一个问题。我找到了解决方案，将在下面解释，仅适用于遇到相同问题并想摆脱痛苦的人

标签： azure-web-app-service github-actions

【解决方案1】：

所以是的，我想出了如何解决这种痛苦。

所以我所要做的就是在构建之前创建 .env 文件，请参阅下面的完整 yml：

name: 'test'

on:
  push:
    branches:
      - release
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'
      - name: create .env file
        run: |
          touch .env
          echo VUE_APP_CLIENT_ID =${{ secrets.VUE_APP_CLIENT_ID_DEV }} >> .env
          echo VUE_APP_CLIENT_SECRET =${{ secrets.VUE_APP_CLIENT_SECRET_DEV }} >> .env

      - name: npm install, build
        run: |
          npm install
          npm run build

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'test'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app
      - name: unzip artifact for deployment
        run: unzip release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'test'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPR }}
          package: .

所以导入部分是在容器中创建 .env 文件并获取存储在 GitHub 机密中的机密（VUE_APP_CLIENT_ID_DEV）：

- name: create .env file
        run: |
          touch .env
          echo VUE_APP_CLIENT_ID =${{ secrets.VUE_APP_CLIENT_ID_DEV }} >> .env
          echo VUE_APP_CLIENT_SECRET =${{ secrets.VUE_APP_CLIENT_SECRET_DEV }} >> .env

下面是另一个值得一看的部分，它在部署时压缩工件并解压缩，这有助于大大提高性能：

- name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: release.zip

- name: unzip artifact for deployment
        run: unzip release.zip

它对我来说非常有用，希望这对你有帮助！

【讨论】：