Next.jsのApp Router製アプリをAzure App Serviceにデプロイする方法

App Router（React Server Component）を使ってるとStatic Web Appsを使うことができません。
...と言いたかったのですが、現在プレビュー状態ではあるものの実現できるようです。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/deploy-nextjs-hybrid

とはいえApp Serviceを使うのが間違いないので、デプロイ方法を紹介。

デプロイするやつ

5ヶ月前にGenerative UIを組み込んだチャットアプリを作ってて、React Server Componentを使用してるので、このアプリをデプロイさせてみます。
https://zenn.dev/headwaters/articles/c13232086a289a

リソース作成 & GitHubリポジトリと連携

App Serviceリソース作成画面に移動
コードベース、ランタイムは「Node 20 LTS」、OSはLinuxにします。
その他は適当に選択・入力。

デプロイタグで継続的デプロイを有効化して、GitHubのリポジトリと連携させます。
対象の組織→リポジトリ→ブランチまで選択。

後は適当に選択してリソースを作成してください。
リソース作成後にGitHub Actionsの方で初回デプロイが実行されます。
もしかしたら失敗するかもですが、後で色々設定を変えるので失敗してても大丈夫。

コードプロジェクト側の設定変更

1. Stand Alone機能とは

Stand Alone機能とは、node_modulesからデプロイ時に必要なファイルのみをコピーして、フォルダを自動的に作成してくれます。
また、server.jsというアプリを動作させるために最小限の情報が入ったファイルも生成してくれます。
両者を.nextフォルダ直下に作成されたstandaloneフォルダに格納して、デプロイ環境ではこのフォルダを使って動作をさせます。
不要なフォルダ・ファイルが使われなくなるためビルドファイルを削減することができます。
※しばらくフロント側をやってなかったので初めて知った

https://nextjs.org/docs/pages/api-reference/config/next-config-js/output#automatically-copying-traced-files

2. Stand Alone機能に変更

configファイルを修正

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone" // ←追加
};

export default nextConfig;

ビルドコマンドを修正

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
    "start": "next start",
    "lint": "next lint"
  },

修正が終わったら、git pushして再度GitHub Actionsを実行

App Service側の設定

環境変数

アプリで使用している環境変数の設定と、PORTを3000にします。
デフォルトでポート8080を参照してるので、3000番を指定することを忘れずに。

構成

スタートアップコマンドを修正します。
「node server.js」を設定してください。

検証

デプロイできた。

動画もあるよ

https://www.youtube.com/watch?v=xxR3idqHyNg