How can I configure GitHub Actions to build my Azure Static Web App with a dependency on a private repository? - azure

I've built an Azure Static Web App with one API function which has one dependency. This dependency sits in a private repository on GitHub. On my local dev machine I'm able to build the Functions app by downloading the dependency using SSH authentication. When trying to deploy to Azure using GitHub Actions I get the error Host key verification failed.
My GitHub Actions workflow is similar to the default workflow generated by Azure Static Web App, with the addition of using webfactory/ssh-agent for facilitating the SSH authentication on GitHub to retrieve the private repository Y and a run step with git clone for testing purposes:
# ... Same as on https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow
jobs:
build_and_deploy_job:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout#v2
with:
submodules: true
persist-credentials: false
- uses: webfactory/ssh-agent#v0.5.1
with:
ssh-private-key: ${{ secrets.SSH_PRIVATE }}
- run: |
git clone ssh://git#github.com/X/Y.git Z
ls -la Z
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: "/"
api_location: "api"
output_location: "build"
# ... Same as on https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow
In my private repository Y I've added the public key associated to private key secrets.SSH_PRIVATE as a deploy key.
After running the workflow it shows the git clone command is ran correctly as the ls -la command results in displaying the directories and files in my private repository. However, the build process of my API (yarn install --prefer-offline --production) results in the error Host key verification failed when yarn is fetching the packages. As a result, GitHub Actions cannot download the dependency in my private repository, and cannot build the API. This ends with a failed workflow.

After analyzing Azure/static-web-apps-deploy#v0.0.1-preview I noticed it uses Oryx to start a Docker container for the build process of the Azure Static Web App. This container is unaware of the ssh-agent that was initialized using webfactory/ssh-agent on the host VM. As a result the yarn install triggered in Azure/static-web-apps-deploy#v0.0.1-preview couldn't download the dependency that was in my private repository and failed the installation.
To circumvent this I've refactored my private dependency to use it as a git submodule instead, because submodules can be loaded prior to the build process using actions/checkout. This was achieved by adding only two extra lines to the workflow file that is generated by Azure Static Web Apps. I've highlighted these two lines with a trailing # ADDED in the following snippet of my workflow file:
jobs:
build_and_deploy_job:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout#v2
with:
ssh-known-hosts: "github.com" # ADDED
ssh-key: ${{ secrets.SSH_PRIVATE }} # ADDED
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v0.0.1-preview
...

Related

Trying to deploy Vue App to Azure App Service, results in Error: Cannot find module '../package.json'

I've got a simple Vue SPA that builds and can be served without problem locally, but when I try and build and deploy via GitHub Actions to an Azure App Service, it just results in the ':( Application Error' page when launching.
Below is the pretty much default workflow .yml, the app service configuration, and the error log from trying to build the app.
I assume the files are built from the /dist folder at /home/site/wwwroot, where node_modules are installed and package.json is generated.. but it doesn't seem like it is (there are no files when checking wwwroot, so build failed?)
Any help would be appreciated, I've been stuck on this for a whole day and will happily provide more info. I've also deployed the NodeJS backend to an app service without too much hassle, so I'm familiar with the process -- just can't get this frontend up!
name: Build and deploy Node.js app to Azure Web App - shelf-library
on:
push:
branches:
- main
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: '16.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v2
with:
name: node-app
path: dist/
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: 'shelf-library'
slot-name: 'Production'
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
package: .
Check the below steps to create VueJS and deploy to Azure App Service using Git Hub Actions.
Thanks #Anthony Salemo for the clear steps.
In Command prompt, run the below command to create a Vue App.
vue create myvueapp
Navigate to the root directory of the application cd myvueapp and run
yarn serve
or
npm run serve
Run npm run build command for production build.dist folder will be created.
Push the application to GitHub Repository.
You can check the code available in my GitHub Repository.
My GitHub folder structure
Create an Azure App service
Navigate to your App Service =>Deployment Center and select the code repo from your GitHub.
Initially I got the below content page when I tried to access the App.
Add the Startup Command in Configuration => General Settings.
pm2 serve /home/site/wwwroot/dist --spa --no-daemon
Initially even I got the same Application Error.
In Git Hub I can see the build and deploy action is not yet completed.
Wait for the build to deploy successfully.
My deployed folder structure in KUDU Console
Now Iam able to access the Application without any issues.
I saw you are running your stages with different agents, so I suppose that your issue could be resulted from that the configuration in the build stage agent could not be inherited into the deploy stage agent.
So you could test to add the npm task to install the vue-cli-service module in your deploy agent again.
==========================================================
Updated on 12/22
I suppose that in deploy stage, you could add the npm and node installation with below.
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '16.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
- name: npm install, build, and test
run: |
npm install -g #vue/cli#latest
npm i -g #vue/cli-service-global
echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve

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.

How to view file actions (reads and writes) during a CI build on Github Actions?

I am trying to track the file actions (reads and writes) (by using strace or inotifywait) performed by different steps of a job on a continuous integration workflow in Github Actions.
steps:
- uses: actions/checkout#v2
- name: Maven resolve ranges
run: ./mvnw versions:resolve-ranges -ntp -Dincludes='org.springframework:*,org.springframework.boot:*'
- name: Cache Maven Repos
uses: actions/cache#v2
with:
path: ~/.m2/repository
key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
restore-keys: |
${{ runner.os }}-maven-
- name: Set up JDK 8
uses: actions/setup-java#v2
with:
distribution: 'temurin'
java-version: 8
- name: Build with Maven
run: echo y | ./mvnw -B --no-transfer-progress clean install -Dmaven.javadoc.skip=true -Drat.skip=true -Dcheckstyle.skip=true -Dspotless.apply.skip=true
- name: Build examples with Maven
run: echo y | ./mvnw -B -f examples/pom.xml clean package -DskipTests
As an illustration, in the example above, there are 6 steps, and I would like to keep track of file actions performed by each of them separately.
I believe I have two options;
Tracking file actions in Github Servers
Tracking file actions in my PC
In the first option, I probably have to write a plugin and add it to the workflow so that it can watch file actions on GitHub servers, and in the latter option, the challenge is simulating the workflow locally.
I found a tool (nektos/act) however, this tool simulates the workflow inside a docker container, so I am not sure if I can watch file actions inside a docker container.
Do you have any suggestions on which path I should follow?

Using webapps-deploy to deploy into a specifc folder (not just into wwwroot)

Is it possible to use the webapps-deploy action to deploy into a specific path of the web app (and not just into wwroot)? For example deploying into a IIS virtual directory under wwwroot/app.
Current yaml GitHub action configuration, can't find a property here for setting a requested path on the web server.
- name: "Run Azure webapp deploy action using publish profile credentials"
uses: azure/webapps-deploy#v2
with:
app-name: MyApp
publish-profile: ${{ secrets.SECRET_PROFILE }}
package: build
Image showing the Virtual Application (wwwroot/app) I'd like to deploy into
With many times testing, I found it's not possible using Git Action. But you can consider using Visual Studio, importing publish profile.
First, set the virtual path in portal.
Downloads the publish profile. You will use the content of publish profile.
Modify the profile. Change msdeploySite's value from Your-Site to Your-Site\folder\subfolder, such as msdeploySite="dorissub\app". Change destinationAppUrl's value from http://xxx.azurewebsites.net to http://xxx.azurewebsites.net/app
Publish from VS.
Check the sub folder. it works.
Here is how I do using Git Action.
Add secret. Go to your GitHub repository settings and add a secret with the content of publish profile as the value, name it as AZURE_WEBAPP_PUBLISH_PROFILE.
Run workflow with this yaml file:
name: .NET Core dorisxxx
on: [push]
env:
AZURE_WEBAPP_NAME: dorisxxx # set this to your application's name
AZURE_WEBAPP_PACKAGE_PATH: '.' # set this to the path to your web app project, defaults to the repository root
DOTNET_VERSION: '3.1.x' # set this to the dot net version to use
jobs:
build:
runs-on: ubuntu-latest
steps:
# Checkout the repo
- uses: actions/checkout#master
# Setup .NET Core SDK
- name: Setup .NET Core
uses: actions/setup-dotnet#v1
with:
dotnet-version: ${{ env.DOTNET_VERSION }}
# Run dotnet build and publish
- name: dotnet build and publish
run: |
dotnet restore
dotnet build --configuration Release
dotnet publish -c Release -o '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/myapp'
# Deploy to Azure Web apps
- name: 'Run Azure webapp deploy action using publish profile credentials'
uses: azure/webapps-deploy#v2
with:
app-name: ${{ env.AZURE_WEBAPP_NAME }} # Replace with your app name
publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} # Define secret variable in repository settings as per action documentation
package: '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/myapp'
But the project still published to wwwroot...
Maybe you should choose another way to deploy.

React deployment to firebase using github actions

on:
push:
branches:
- master
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout#master
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Archive Production Artifact
uses: actions/upload-artifact#master
with:
name: build
path: build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout#master
- name: Download Artifact
uses: actions/download-artifact#master
with:
name: build
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
now this is the gtihub actions workflow it is executing build job without errors but in deployment there comes an error
this is the error image
the error its shows is Error: Specified public directory 'build' does not exist, can't deploy hosting to site landing-page-design-1 i have followed the blog from where the workflow is copied i did everything same except some of my project details which is obvious please help me out why is this error occuring and how can i fix it
You're probably unpacking artifact to root directory instead of build/.
I'm guessing article was written for download-artifact#v1 while you are using download-artifact#v2 (as that's where master points currently). Difference between both is discussed here.
I'd verify first what is going on after artifact is downloaded
- name: Display directory structure
run: ls -R
shell: bash
If files are indeed in root directory, adding path should fix that.
- name: Download Artifact
uses: actions/download-artifact#v2
with:
name: build
path: build
PS: Using actions/<name>#master is not recommended, as it can always lead to issues if same action behaves differently between versions... for example actions/download-artifact ;)
You can also try to use firebase-publish-react to simplify your workflow file
This particular action plugin takes care of building the application internally and also can reuse the build directory from previous steps.
- name: Deploy to Firebase
uses: mohammed-atif/firebase-publish-react#v1.0
with:
firebase-token: ${{ secrets.FIREBASE_TOKEN }}

Resources