Copy a file from root folder to build folder before deploy - Github Actions - azure

I have an Azure Static Web App built using Github actions. I have a staticwebapp.config.json in the root folder of my project. Once github action builds the app using Azure/static-web-apps-deploy#v1, I want to copy the above file and put it inside the output_location before publishing it. Please advice.
Here is my yml:
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout#v3
with:
submodules: true
- name: Install Node.js
uses: actions/setup-node#v3
with:
node-version: 18
- uses: pnpm/action-setup#v2.2.4
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache#v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_BEACH_0AD8A764G }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "storybook-static" # Built app content directory - optional
env:
NODE_VERSION: 18.x
PRE_BUILD_COMMAND: npm install -g pnpm
CUSTOM_BUILD_COMMAND: pnpm run storybook:build
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_BEACH_0AD8A764G }}
action: "close"

In .yml file, before Build And Deploy, we need to write a step to copy the file from root folder.
Navigate to the GitHub Repository => .github/workflows folder => Click on your .yml and edit it.
output_location: "storybook-static" # Built app content directory - >optional
Before copying the file, make sure the output_location exists.
As it is an optional parameter, sometimes we may not provide it.
Add the below steps to copy the file to Output folder.
Thanks #Dillion Megida for the command
- name: Copy a file from root folder to build folder
run: cp staticwebapp.config.json ${{ secrets.AZURE_STATIC_WEB_APPS_LOCATION }}/filepath

Related

Azure Static Web App - Copying staticwebapp.config.json to output directory

I'm using a GitHub Action to build and deploy a Vue Azure Static Web App. When using the default template, my staticwebapp.config.json file which is at the root of the Vue app gets applied correctly and I see Copying 'staticwebapp.config.json' to build output logged.
When using a customized GitHub workflow (shown below) to separate the build and deploy steps which has skip_app_build set to true, the artifact that gets uploaded/downloaded does not contain the staticwebapp.config.json file.
How can I modify the GitHub action to make sure the staticwebapp.config.json file gets copied to the output directory so that it gets deployed?
jobs:
build:
if: github.event_name == 'push'
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout#v2
- name: Setup Node.js
uses: actions/setup-node#v3
- name: npm install and run build
run: npm install && npm run build
- name: Upload artifact
uses: actions/upload-artifact#v3.1.0
with:
name: app
path: dist/
deploy:
runs-on: ubuntu-latest
needs: build
steps:
- name: Download artifact
uses: actions/download-artifact#v3.0.0
with:
name: app
- name: Deploy to Azure
id: deploy
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_STONE_0BAB0F910 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations ######
app_location: "" # App source code path relative to repository root
api_location: "" # Api source code path relative to repository root - optional
skip_app_build: true
###### End of Repository/Build Configurations ######
I was able to solve this by moving the staticwebapp.config.json file to the public directory of the Vue app. This made it so that file was in the published artifact.
After doing that, I was able to see Using staticwebapp.config.json file for configuration information in the logs during the static-web-apps-deploy step.

Deploying to GH pages with Custom Jekyll Plugins

I am trying to deploy a site to gh-pages. I am using this template. The side is a node built site with custom jekyll plugins.
My .yml is below.
name: Build and Deploy to Github Pages
permissions:
id-token: write
pages: write
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout#v3
- name: Setting up Node
uses: actions/setup-node#v3
with:
node-version: '16'
cache: 'npm'
- run: npm ci
- name: Setting up Ruby
uses: actions/setup-ruby#v1
with: { ruby-version: '3.1.2' }
- name: Caching Gems
uses: actions/cache#v2
with:
path: vendor/bundle
key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
restore-keys: |
${{ runner.os }}-gems-
- name: Build Site 🏗️
run: npm run install-jekyll
env:
NODE_ENV: production
- name: Upload artifact
uses: actions/upload-pages-artifact#v1
with:
path: "./site/"
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages#v1
Everything appears to run fine - no errors and GH tells me the site was deployed to zakraicik.github.io fine. However, when I visit the site- it shows 404.
Can anyone help me figure out where my mistake is? I assume it's somewhere in the .yml file.
The full repo is available here.

Deploy a static HTML website from Github into Azure Static Web App

I have created a repository in GitHub for my static website. There a Folder called website and it contains all the static html files for the website. Then I setup a Static Web App in azure with GitHub as source
Immediately upon creating the static web app, one action also got created in my github repository like this
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout#v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_CLIFF_62B10 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/Website" # App source code path
api_location: "" # Api source code path - optional
output_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_CLIFF_62B10 }}
action: "close"
Here in my repository the static website (HTML) files are under Website folder in Root. Since I am first to the deploy from GitHub into Static Web App in Azure, I was not sure about the output location. So I just entered wwwroot guessing this folder get created in my azure hosting location. But the execution fired an error
The app build failed to produce artifact folder: 'wwwroot'. Please
ensure this property is configured correctly in your workflow file.
I didnt understand what I did wrong. Please help. In my assumption there was just some static files and it was suppposed to copy the html files into my azure hosting region of my static web app. Also I am not able to locate where that information i can fetch from azure portal.
To resolve this The app build failed to produce artifact folder: 'wwwroot'. Please ensure this property is configured correctly in your workflow file. error, try following way:
As suggested by anthonychu and Jesuisme:
app_location: "/"
api_location: ""
app_artifact_location: "wwwroot"
output_location: "./"
could you please help me how can I locate the root folder in azure static web app
You can use Kudu console to locate the root folder. Alternatively, if you are using VS Code, then you can open the root of your .github repository.
References: Getting Started with Azure Static Web Apps, Azure App service not able to find root folder path and Use Kudu to Publish Static Website to Azure App Service
I have all my files in src folder (my project only have HTML ans js files)
and here is my github actions file:
name: Deploy web app to Azure Static Web Apps
env:
APP_LOCATION: "src" # location of your client code
#API_LOCATION: "api" # location of your api source code - optional
APP_ARTIFACT_LOCATION: "wwwroot" #"build" # location of client code build output
on:
push:
branches:
- main
paths:
- 'src/**'
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
permissions:
issues: write
contents: read
jobs:
build_and_deploy:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy
steps:
- uses: actions/checkout#v3
with:
submodules: true
- name: Build And Deploy
uses: Azure/static-web-apps-deploy#1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DESERT_08C538C10 }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: ${{ env.APP_LOCATION }}
#api_location: ${{ env.API_LOCATION }}
app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}
close:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close
steps:
- name: Close
uses: Azure/static-web-apps-deploy#1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DESERT_08C538C10 }}
action: "close"
You still need to add your Tocken in Github Secrets.
Here you will get the Tocken in your Static Web App resource in Azure Cloud
After get, you need to insert this is your secrets, like this:
Please, attenttion on Secret Name. Needs to be the some on your Github Actions file.

Github action with azure web app application setting

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?
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!

Github Actions Artifact is taking to much to deploy in Azure Web Apps

I have I'm trying to deploy my app on Azure Web apps. I have a Github Actions I was given by default when connecting my GitHub repository in Azure. The problem is that deploying a single thing takes about 45 minutes to be deployed!! It's so insane the amount of time is giving to be deployed. I see a message like this:
Any idea of why is this happening or a better way to optimize this?
(By the way, I'm actually deploying a Next.js app)
This is my Github Actions File:
# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions
name: Build and deploy Node.js app to Azure Web App - app-admin
on:
push:
branches:
- develop
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
env:
AUTH0_CLIENT_ID: ${{ secrets.AUTH0_CLIENT_ID }}
AUTH0_DOMAIN: ${{secrets.AUTH0_DOMAIN}}
AUTH0_MANAGEMENT_CLIENT_ID: ${{secrets.AUTH0_MANAGEMENT_CLIENT_ID}}
AUTH0_MANAGEMENT_CLIENT_SECRET: ${{secrets.AUTH0_MANAGEMENT_CLIENT_SECRET}}
NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT: ${{secrets.NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT}}
NEXT_PUBLIC_HASURA_GRAPHQL_API_KEY: ${{secrets.NEXT_PUBLIC_HASURA_GRAPHQL_API_KEY}}
NEXT_PUBLIC_AUTH0_CLIENT_ID: ${{secrets.NEXT_PUBLIC_AUTH0_CLIENT_ID}}
NEXT_PUBLIC_AUTH0_DOMAIN: ${{secrets.NEXT_PUBLIC_AUTH0_DOMAIN}}
steps:
- uses: actions/checkout#v2
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '14.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
- 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: 'Production'
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: 'app-admin'
slot-name: 'Production'
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_667E58BB348E475EA5F1141747DD1CA9 }}
package: .
The upload of 38000 files will take forever. As the logs indicate you can speed up this tremendously by zipping up the contents, uploading that and unzipping the contents on the other end.
- run: |
zip -r node-app.zip .
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v2
with:
name: node-app
path: node-app.zip
Then unzip it after downloading the artefact in the 2nd job:
- name: Download artifact from build job
uses: actions/download-artifact#v2
with:
name: node-app
- run: |
unzip node-app.zip
rm node-app.zip
Zip or Tar or any other tool will work and, in some cases, simply storing without compression may be faster depending on the size of the archive (time spent compressing vs time spent uploading/downloading).
Thank you Lex Li supporting your answer adding the process on how to deploy docker image
The better way is to deploy docker image which is very fast in uploading a single file.
Below is the github link as well as the example code of few docker image deployments.
on: [push]
name: Linux_Container_Node_Workflow
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
# checkout the repo
- name: 'Checkout Github Action'
uses: actions/checkout#master
- uses: azure/docker-login#v1
with:
login-server: contoso.azurecr.io
username: ${{ secrets.REGISTRY_USERNAME }}
password: ${{ secrets.REGISTRY_PASSWORD }}
- run: |
docker build . -t contoso.azurecr.io/nodejssampleapp:${{ github.sha }}
docker push contoso.azurecr.io/nodejssampleapp:${{ github.sha }}
- uses: azure/webapps-deploy#v2
with:
app-name: 'node-rnc'
publish-profile: ${{ secrets.azureWebAppPublishProfile }}
images: 'contoso.azurecr.io/nodejssampleapp:${{ github.sha }}'
It's because npm install step, it will take time to upload all files in node_modules folder to the target.
I removed that step and it run faster then.
But you need to setup node_module folders on the server first by npm install, and the action will only copy js file.
build:
runs-on: windows-latest
steps:
- uses: actions/checkout#v2
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '14.x'
# - name: npm install, build, and test
# run: |
# npm install
# npm run build --if-present
# npm run test --if-present
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v2
with:
name: node-app
path: .

Resources