Github 使用 Azure Web 应用程序设置的操作

Question

我正在尝试使用 azure 网络应用程序和 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: .

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

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

有人知道解决办法吗？

Answer 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 secrets:

中的 secrets(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

对我来说效果很好，希望对你有帮助！

Github 使用 Azure Web 应用程序设置的操作

Github action with azure web app application setting

azure-web-app-service

github-actions