How I deployed a Next.js app to an Azure App Service

Deploying the this website to Azure App Service was a relatively straightforward process I still ran in to some few issues which it why I decided this should be my first post. Here's a step-by-step guide on how I accomplished it.

Step 1: Creating the Next.Js app

First I ran the npx create-next-app@latest to create a new Next.Js application. These are the settings I used:

Then I was lazy again and used ChatGPT a bunch to create the application it self.

Step 2: Set Up Azure App Service

Next, I took the lazy option again and created an Azure App Service using the Azure Portal instead of creating a bicep template for it.

These was the configurations that I used:

Then I used the build in option to automatically setup continuous deployment from GitHub. This will generate a YAML file that contains all the GitHub Actions to build and deploys the code to the Azure App Service. This process also automatically adds the client-id, tenant-id and subscription-id as secrets such that GitHub Actions needs to deploy code.

Step 3: GitHub Actions

This the GitHub Action YAML file that Azure generated

# 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-boletio-prod

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

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

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write #This is required for requesting the JWT

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip
      
      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_7D5A50CF708D480280E09F1B1BCE49AF }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_27309C20B33D4BBDB9F0471F8DD159F3 }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_C438AEEA429340BB869882F6D65A7F00 }}

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'app-boletio-prod'
          slot-name: 'Production'
          package: .

I didn't make any changes to the pipeline event though the process could be optimized a fair bit, but it looked like it would work (or so I thought... 😅).

Step 4: Getting the application to run

Until now the process of getting the application deployed to an Azure App Service was pretty straightforward but at this point I started running in to some minor problems.

First, I needed to add some startup configurations the both the App service and the application it self. First I created a ecosystem.config.js to the root of my Next.js project.

module.exports = {
  apps: [
    {
      name: "boletio",
      script: "node_modules/next/dist/bin/next",
      args: "start",
      env: {
        PORT: process.env.PORT || 3000,
      },
      watch: false,
      autorestart: true,
    },
  ],
};

Then I added this pm2 --no-daemon start ecosystem.config.js as a Startup Command for the Azure App service

I also set the App Service to Always on to On while I was here

However the application wasn't able to start

I went to the Log steam to get an idea of what the error was.

As seen in the log message Could not find a production build in the '.next' directory it looks like it couldn't find a build in the .next folder.

2024-08-02T10:49:51.2364108Z 10:49:51 0|boletio  |   ▲ Next.js 14.2.5
2024-08-02T10:49:51.2364108Z 10:49:51 0|boletio  |   - Local:        http://localhost:8080
2024-08-02T10:49:51.2374667Z 10:49:51 0|boletio  |  ✓ Starting...
2024-08-02T10:49:52.1090972Z 10:49:52 0|boletio  | Error: Could not find a production build in the '.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
2024-08-02T10:49:52.1262233Z 10:49:52 0|boletio  |     at setupFsCheck (/home/site/wwwroot/node_modules/next/src/server/lib/router-utils/filesystem.ts:157:13)
2024-08-02T10:49:52.1262488Z 10:49:52 0|boletio  |     at initialize (/home/site/wwwroot/node_modules/next/src/server/lib/router-server.ts:93:21)
2024-08-02T10:49:52.1262519Z 10:49:52 0|boletio  |     at Server.<anonymous> (/home/site/wwwroot/node_modules/next/src/server/lib/start-server.ts:293:28)
2024-08-02T10:49:52.1477259Z 2024-08-02T10:49:52: PM2 log: App [boletio:0] exited with code [1] via signal [SIGINT]
2024-08-02T10:49:52.1562441Z 10:49:52 PM2        | App [boletio:0] exited with code [1] via signal [SIGINT]
2024-08-02T10:49:52.1575668Z 2024-08-02T10:49:52: PM2 log: App [boletio:0] starting in -fork mode-
2024-08-02T10:49:52.1586106Z 10:49:52 PM2        | App [boletio:0] starting in -fork mode-
2024-08-02T10:49:52.1887666Z 2024-08-02T10:49:52: PM2 log: App [boletio:0] online
2024-08-02T10:49:52.1974425Z 10:49:52 PM2        | App [boletio:0] online

I went ahead and changed the GitHub Actions workflow to include the missing files. I change this action:

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

To this:

      - name: Zip artifact for deployment
        run: zip -r release.zip .next static package.json posts

That not only made the build and deploy process much faster but also made it possible for the Next.js app to start. HURRAH🥳🎉