Azure Static Web App ServiceにNext.js(App Router)をデプロイする。

Azure CI/CD React Web Typescript/Javascript Next.js

以前にAzure Web App Serviceへのデプロイについての記事を書きました。 ma38su.hatenablog.com

今回はこのデプロイをブラッシュアップして、Azure Pipelineからstatic web appへもデプロイできるようにしました。

2024/2/10 追記

Next.JSのmiddlewareうまく動作しない問題もります。原理はよくわかってないもののNextAuth.jsは期待通りの動作をしました。 それに加えてたデプロイがうまくいかないトラブルも起きたため、自分はWebAppServiceに戻しました。

Next.jsのビルドの設定

まず前提として、next.jsをstandaloneモードでビルドします。ビルド先のディレクトリも指定しておきます。 ビルド先を指定しない場合はこの先の処理が変わると思います。

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  distDir: 'build',
}
module.exports = nextConfig

次に、デプロイ関係のちょっとした処理を書き足します。Next.jsではstandaloneモードでビルドすると、publicディレクトリなどの配置を調整してやる必要があります。（Vercelを使う場合は気にしなくていいわけですが。） Azure PipelineからAzure Static Web Appへのビルドでは、CI/CDパイプライン中でビルドを実行しないので、package.jsonに書くことにします。 次に、package.jsonのscriptsに、の記述の例を示します。postbuildにnpm run buildの完了後に実行する処理を記述します。

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "cp -r public build/standalone && mkdir -p build/standalone/public/_next && cp -r build/static build/standalone/public/_next/",
    "start": "node build/standalone/server.js",
    "nstart": "next start",
    "lint": "next lint"
  },
  ...
}

以下は必要ないのかもしれない。（Azure static appへのデプロイでよしなに対応されているから？）

cp -r build/static build/standalone/public/_next/

ビルドのための設定は以上です。

Azure Pipelineの定義

以下でOK。

name: Azure Static Web Apps CI/CD

trigger:
  - main

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  pool:
    vmImage: ubuntu-latest
  steps:
  - checkout: self
  - task: AzureStaticWebApp@0
    inputs:
      production_branch: 'main'
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN)
      app_location: "/"
      output_location: 'build'

これだけです。 プリセットのタスクAzureStaticWebApp@0がよしなにやってくれます。 $(AZURE_STATIC_WEB_APPS_API_TOKEN)でお気づきかと思いますが、VariablesにAzure Static Web App Serviceで発行したTokenを設定する必要はあります。