Github action with azure web app application setting - azure-web-app-service

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!