🐱

Next.jsをAzure AppServiceにデプロイするためのメモ

2022/10/02に公開約1,300字

Azure App Service のデプロイ

ポータルで Node.js 16 のリソースを作成する。

カスタムサーバーの構築

App Service のドキュメントによると環境変数"PORT"が設定されるということなので、Next.js にその"PORT"を読み込ませる必要がある。

https://learn.microsoft.com/ja-jp/azure/app-service/configure-language-nodejs?pivots=platform-linux#get-port-number

Next.js には拡張機能としてカスタムサーバーをセットアップすることができる。

https://nextjs.org/docs/advanced-features/custom-server

公式ドキュメントでは、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 サーバーが構築できるので適宜設定を行いデプロイする。

https://learn.microsoft.com/ja-jp/azure/app-service/configure-language-nodejs?pivots=platform-linux#configure-nodejs-server

デプロイ

任意の方法(GitHub など)でデプロイすると App Service で作成した URL で Next.js のアプリケーションが使用できる。

GitHubで編集を提案

Discussion

ログインするとコメントできます