DEV Community

loading...
Cover image for Deploy your Website on Azure with GitHub Actions like a Hipster
Microsoft Azure

Deploy your Website on Azure with GitHub Actions like a Hipster

Jen Looper
Jen Looper is a Google Developer Expert and a Cloud Advocate Lead at Microsoft with over 20 years' experience as a web and mobile developer, specializing in creating cross-platform web & mobile apps.
Updated on ・4 min read

I've been meaning to skill up in GitHub Actions for a while. You know that little tab that appears on your repo with 'Actions'? That's the one I keep failing to click on.

Recently, I decided to bite the bullet and jump on in. I learned a few things, and I thought I'd share them so that you, too, can use a GitHub Action Workflow to deploy your apps and enjoy all that sweet, sweet CI/CD like those cool DevOps kids.

The problem: I have an Azure-hosted web site build with Vue.js. Actually it's a site to help you differentiate between dalmatians and ice cream, a critical business use case. More on that another day. I need to get it to rebuild and redeploy every time I push code to its GitHub repo.

Previously, I had done this via Azure Pipelines. But it's a quicker, I found, to set up basic CI/CD with GitHub Actions by writing a Workflow from scratch, once you figure out how. There are a couple little pesky tricks.

First, while there are several prebuilt modules you can try to familiarize yourself with GitHub Actions, it's nicer to build it from scratch, to have full control over the paths that are created. To explore some of these prebuilt Actions, click your Actions tab in any of your GitHub repos (do it!) and you'll find them:

Alt Text

There are four steps to setting up nice, clean Continuous Integration and Deliver (CI/CD) for your Vue.js site.

Step 1: Create a folder called .github in the root of your website. In that folder, create another folder called workflows. Finally, in that folder, create a file called deploy.yml. This is a YAML file, and will contain the commands GitHub Actions needs to build and deploy your site.

Step 2: In deploy.yml, add the following code:

on:
  push:
    branches:
      - master

env:
  AZURE_WEBAPP_NAME: "icecreamordog" # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: "dist" # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: "10.x" # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: npm install, build, and test
        run: |
          # Build and test the project, then
          # deploy to Azure Web App.
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: "Deploy to Azure WebApp"
        uses: azure/webapps-deploy@v1
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.PORTAL_PUBLISH_PROFILE }}
          package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
Enter fullscreen mode Exit fullscreen mode

33 lines of YAML and you'll have your site built and deployed every time you push code to master. Note, since our Vue.js site is built to the dist folder we set that as the app project path.

Step 3: Almost there! You next need to link your deployment to secrets.PORTAL_PUBLISH_PROFILE - a Secret key that you need to export from the Azure portal and import to GitHub, to create a handshake. There are good instructions here but I'll outline them here:

  • Go to the Azure portal where your web app is hosted. Click on 'Get Publish Profile' to download a file.

Alt Text

  • In your GitHub repo, go to Settings > Secrets. Copy and paste the contents of that file into a new Secret with the name PORTAL_PUBLISH_PROFILE and save it.

Alt Text

Step 4: Now you're ready to push your code to your repo. This turned out to be a little tricky for me as GitHub Desktop previously didn't easily allow pushing workflows since it connects to GitHub via OAuth. Make sure you upgrade to GitHub Desktop 2.2 or higher for a better experience! You might be asked to reauthenticate to enable this push.

Once you have pushed this folder and .yml file, GitHub Actions will pick up its presence and kick off a build. Now your site will be built and deployed on every code push! So nice.

Alt Text

You can explore a lot more interesting Workflows and cool GitHub Action automations to make your development experience great. Why not give them a try?

For more interesting content on building and hosting web sites on Azure, take a look at my other articles:

Azure for Spoiled People
Azure for Spoiled People 2: Deploy your App using Azure Pipelines
Azure for Spoiled People 3: Migrate A Database

Discussion (11)

Collapse
vaghelait profile image
vaghelait

Help! I've got everything deploying successfully as per the steps BUT when I hit Browse in the Azure Deployment Center I still get the default page - Hey Node Developers!

I checked the FTP and it has been updated. Any pointers?

Collapse
vaghelait profile image
vaghelait

Whilst this didn't work, I did manage to get it working successfully via the wizard when using the Static Web App (Preview) option in Azure. As mentioned by @jenlooper below. Thank you!

Collapse
tmaximini profile image
Thomas Maximini

Love the gif ;)

Collapse
victorioberra profile image
Victorio Berra

What did they change in GitHub desktop to allow easier pushing?

Collapse
jenlooper profile image
Jen Looper Author

It's this bugfix: github.com/desktop/desktop/pull/8340 - has to do with adding the workflow scope

Collapse
victorioberra profile image
Victorio Berra

Ah workflow scope. Makes sense. I had to setup ssh auth to do mine without a GUI.

Thread Thread
jenlooper profile image
Jen Looper Author

Same, and it's a PITA. Recommend upgrading GitHub Desktop app to the latest, then you're all set

Collapse
fyodorio profile image
Fyodor

Hipsters don't like YAML and all that pesky annoying configuration stuff, they push, and Netlify does everything for them 🤷‍♂️

Collapse
jenlooper profile image
Jen Looper Author

Tbh hipsters are far more interested in urban beekeeping than any of this stuff.

Collapse
patfish profile image
patFish

Great start but common projects with client site routing (using react-router for example) don't start with this explanation.

Collapse
jenlooper profile image
Jen Looper Author

So since I wrote this article we released Azure Static Web Apps which work a lot better. Take a look! aka.ms/trystaticwebapps