Hosting NextJS project in Azure WebApps 1

Hosting NextJS project in Azure WebApps

by

I know all the cool kids host their projects in Vercel these days. But I’m an old fashion kinda guy (and the fact that I get free credits doesn’t hurt), so I host my projects as Azure WebApps. A single Azure Service Plan with the P0v3 SKU is enough to store multiple projects – I learned that trick from Scott Hanselman’s Penny pinching series.

I also use Github Actions to automate the process, so that I don’t have to do much after the initial setup.

Here’s the action template that I’m using:

name: Build and deploy Node.js app to Azure Web App

on:
  push:
    branches:
      - main
  workflow_dispatch:

env:
  AZURE_WEBAPP_NAME: <WebAppName>          # set this to your application's name
  NODE_VERSION: '18.x'                # set this to the node version to use


jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: 'Deploy to Azure WebApp'
        uses: azure/webapps-deploy@v3
        with: 
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}

As yyou can see, there are 2 steps – building and publishing. The building step runs npm run build to build an optimized version. Make sure you run it locally before pushing your changes – the number of times by pipeline broke because of some minor issue is a bit frustrating.

The publishing step zips the build’s output, and pushes it to Azure. This steps takes a few minutes, depending on you project’s size. You can see that the step depends on a secret variable named AZURE_WEBAPP_PUBLISH_PROFILE, which you need to configure at the repository level in GitHub. Go to Settings > Secrets and variables > Actions, and add a new secret named AZURE_WEBAPP_PUBLISH_PROFILE.

Hosting NextJS project in Azure WebApps 2

For the value of the secret, you’ll have to go to the Azure portal, and open your Web App resource. Press the Download publishing profile (make sure NOT to press the Reset button – it will invalidate any existing profile you’re using out there). Once downloaded, copy paste the content of the profile as the secret’s value:

Hosting NextJS project in Azure WebApps 3