Github action with azure web app application setting

Question

I am trying to deploy a vuejs app with the azure web app and github action. Here is my 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: .

And I followed this tutorial to retrieve the application settings from web app: https://github.com/Azure/appservice-settings

So I got the variable and secrets in pipeline, but it seems like when building the app, it doesn't build with those secrets, the environment variables turned to be undefined in the app:(

Does anyone know a solution for it?

Answer 1

So yes, I figured out how I can solve this pain.

So all I had to do is create .env file before the build, see the full yml below:

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: .

So the imports piece is to create the .env file in the container and get secrets(VUE_APP_CLIENT_ID_DEV) which was stored in GitHub secrets:

- 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

Below another piece worth look, it zip the artifacts and unzip when deploy, which helped improve the performance big time:

- 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

It is working perfectly for me, hope this helps you!