Deploy NextJS 13 to Azure App Service with GitHub Action (Efficient Way)

Photo by ian dooley on Unsplash

Previously, I posted an article regarding this but the result took a long time because it needed to zip all the files including “node_modules”.

Deploy NextJS 13 to Azure App Service with GitHub Action

The old deployment way

It takes 40–50 minutes in each deployment 😢, but with the new way, it only needs 5–7 minutes.

The new deployment script

You can read the previous post to read the details, this article is a short.

Changes

Next Config

If we use a server-side component, we should run the production next.js with next start . it will require the node_modules , that is why in the previous post, we compressed the code and uploaded it to Azure.

Next.js has a feature to make it standalone, so we don't need the node_modules and we can use node server.js to run the next application

output

Open your next.config.js

const nextConfig = {
  reactStrictMode: true,
  distDir: "build",
  output: "standalone",
  ...
}

We change the build directory from .next to build , and set the output to standalone so we don't need the node_modules.

Workflow File

We remove the zip method, we directly use the specific.

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

on:
  push:
    branches:
      - development
    paths-ignore:
      - "README.md"
      - ".husky"
      - ".github/**"
      - "**/*.csv"
      - .env*
  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: "18.x"

      - name: create env file
        env:
          NEXT_PUBLIC_API_BASE_URL: ${{ vars.DEV_NEXT_PUBLIC_API_BASE_URL }}
          NEXT_PUBLIC_WEB_BASE_URL: ${{ vars.DEV_NEXT_PUBLIC_WEB_BASE_URL }}
          NEXT_PUBLIC_FIREBASE_CONFIG: ${{ vars.DEV_NEXT_PUBLIC_FIREBASE_CONFIG }}
        run: |
          touch .env
          echo NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL >> .env
          echo NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL >> .env
          echo NEXT_PUBLIC_FIREBASE_CONFIG=$NEXT_PUBLIC_FIREBASE_CONFIG >> .env
          echo NODE_ENV=development >> .env

      - name: npm install, build, and test
        run: |
          npm install
          npm run build
          mv ./build/static ./build/standalone/build
          mv ./public ./build/standalone

      - name: "Deploy to Azure Web App"
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: "next-medium"
          slot-name: "Production"
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_XXXXXXXXXXXXXX }}
          package: ./build/standalone

Azure Configuration

Now, we can use node server.js to run the next application.

Configuration — General Settings

Thank you for reading this article! 🚀
Reach me on Linkedin: https://www.linkedin.com/in/didikmulyadi/

Learn More

Setup Mongo DB Replica Set Read and Write with 2 Nodes in Ubuntu VPS

Deploy Laravel 9 to App Engine with Google Cloud Build and Secret Manager

GCP — Install WordPress on Google Cloud Platform with Custom Domain

Deploy NestJS to Azure App Service with GitHub Action

Deploy NextJS 13 to Azure App Service with GitHub Action