Deploy Next.js app to Azure Blob storage using GitHub Actions

Next.js is a framework used for building single-page React web applications and superfast static websites. This article explains how to deploy a static Next.js website to Azure Blob storage using GitHub Actions.

Prerequisites

An Azure account with an active subscription. Create an account for free.
A GitHub account. Create an account for free.
A GitHub repository with source code of Next.js application.

If you don't have a Next.js code yet, feel free to use nextjs-stater repository.

Generate a static website from Next.js build

We need to build a static website from our build. Create a next.config.js file in the root directory of your project and add the following code.

module.exports = {
  trailingSlash: true,
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  }
};

This configuration maps / to the Next.js page that is served for the / route, and that is the pages/index.js page file.

Set up script to export static website

Update the package.json's build script to also generate a static site after building, using the next export command. The export command generates a static site.

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
},

We will use npm run build to build and export our static website to a folder /out in your root directory.

Set up Azure Blob Storage Account

If you are using Azure CLI, use the following commands to create an Azure Resource Group, Azure Blob Storage, and Azure Service Principal.

# Create Resource Group
az group create -n demoRG -l eastus2

# Create Storage Account
az storage account create -n demostorage3513 -g demoRG -l eastus2 --sku Standard_LRS

# Update Hosting Service for Storage Account
az storage blob service-properties update --account-name demostorage3513 --static-website --404-document 404.html --index-document index.html

Note: Make sure to use your own Resource Group & Storage Account names and make required changes in commands instead of 'demoRG' and 'demostorage3513' respectively.

Setup Deployment Credentials on GitHub

For GitHub to log in to your Azure account and deploy code to blob, it needs authentication credentials. Create a service principal using the following command which will be used by GitHub to authenticate to Azure.

az ad sp create-for-rbac --name githubActionUser

This command will return a JSON response with the required credentials. Copy this response.

{
  "appId": "****************************************",
  "displayName": "githubActionUser",
  "name": "http://githubActionUser",
  "password": "**************************************",
  "tenant": "***************************************"
}

Configure GitHub Secrete

Navigate to your GitHub Repository.
Select Settings > Secrets > New secret.
Click 'New Repository Secrete' and paste JSON response as Value with name field as AZURE_CREDENTIALS
Click Add Secrete to save.

Create Github Actions workflow

This is the final and most exciting step On your Repository Page, navigate to Actions > New Workflow > Set up a workflow yourself

In file editor, paste the following yml code.

name: Blob storage website CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: azure/login@v1
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: 🧰 Install dependencies
        run: npm install

      - name: 📦 Build & Export project
        run: npm run build --if-present

      - name: Upload to blob storage
        uses: azure/CLI@v1
        with:
          azcliversion: 2.0.72
          inlineScript: |
            az storage blob upload-batch --account-name demostorage3513 -d '$web' -s ./out/

      - name: logout
        run: |
          az logout

Note: Make sure to update the storage account name from demostorage3513 to the account name you created.

Now, go ahead and commit this file to your repository.

Finishing up

We are almost done. The website will be deployed as soon as you make your next commit on the main branch of your repository. Use the following command to know the endpoint on which your website will be live.

az storage account show -n demostorage3513 -g demoRG --query "primaryEndpoints.web" --output tsv

Wo-hoo 🥳, We are done! Go ahead and make a commit to your repository to see the magic. Your website will be live and ready to rock!