🐱
Next.jsをAzure AppServiceにデプロイするためのメモ
Azure App Service のデプロイ
ポータルで Node.js 16 のリソースを作成する。
カスタムサーバーの構築
App Service のドキュメントによると環境変数"PORT"が設定されるということなので、Next.js にその"PORT"を読み込ませる必要がある。
Next.js には拡張機能としてカスタムサーバーをセットアップすることができる。
公式ドキュメントでは、http モジュールの createServer を利用しているが、Express でもカスタムサーバーの構築は可能。
TypeScript + Express の server.ts 例
import express from "express";
import next from "next";
const dev = process.env.NODE_ENV !== "production";
const port = process.env.PORT ?? 3000;
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.all("*", (req, res) => handle(req, res));
server.listen(port);
});
Next.js の"next build"コマンドでは server.ts のビルドができないのでビルドスクリプトに tsc による server.ts のビルド処理を追加する。
{
"scripts": {
"build": "next build && tsc <オプション>"
}
}
Node.js サーバーの設定
公式ドキュメントにもあるように、いくつかの方法で Node.js サーバーが構築できるので適宜設定を行いデプロイする。
デプロイ
任意の方法（GitHub など）でデプロイすると App Service で作成した URL で Next.js のアプリケーションが使用できる。
Discussion