In this blog post, I would walk you through publishing a sub directory of your Github repository to the Azure.
The first step would be to head over to your desired Resource Group in Azure Portal and Create a Web App Resource.
For sake of demonstration, we would be publishing a web portal build using VueJS. For the same reason, we are using a Runtime of Node 12 LTS.
Once you have created the Web App resource, head over to Deployment Center and choose Github under the Continuous Deployment Section.
If you are doing this for the first, you might be prompted to Authenticate your Github Account. Next, you need to Build Provider. We will choose Github Actions in here.
This would lead you to the following screen, which would help in choosing your repository.
The Add or overwrite workflow definition would generate the Github workflow for deployment. This looks something similiar to the following.
name: Build and deploy Node.js app to Azure Web App
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: windows-latest
steps:
- uses: actions/checkout@master
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: '12.13.0'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
- name: 'Deploy to Azure Web App'
uses: azure/webapps-deploy@v2
with:
app-name: 'yourappName'
slot-name: 'production'
publish-profile: ${{ secrets.YourSecretKey }}
package: .
As you have noticed, the workflow also contains a secret key which would be used for authenticating the publish action.
So far, this has been quite similiar to how you would publish an entire repository in Github to Azure. But as mentioned earlier, we are particularly interested in publishing a sub directory in the Github repository. For this purpose, we will begin by ensuring the npm build actions are done within the particular sub directory.
For the same, we modify the workflow, with the following changes.
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
working-directory: portalDirectory/subDirectory
As you can observe, we have instructed the action to use a particular working directory while running the NPM scripts. However, we are not done yet.
Just like we ensured the npm build is done against the desired folder, we also need to ensure that only the desired sub folder gets published.
If you attempt to use working-directory with the ‘Deploy to Azure Web App’ Step in the action, you would be prompted with an error that working-directory cannot be used with an action that contains a with statement.
The .deployment file comes to our rescue at this point. The .deployment file needs to be created in the root of your repository. We will add the following contends to the file.
[config]
project = portalDirectory/subDirectory/dist
That would be all you need. The .deployment file would instruct the CI/CD process to deploy the contends of the portalDirectory/subDirectory/dist directory to Azure.
I hope that did help you.
ByteLanguage.Net 