CDKのプロジェクトを作成して、その中にNext.jsのプロジェクトを作成します。 cdk用ディレクトリ next-cdk の中に、Next.jsのプロジェクトディレクトリ next-app が存在する構成です。
next-cdk -- (CDK用プロジェクトディレクトリ)
|- package.json (CDK用)
|- tsconfig.json (CDK用)
|- .... (CDK用)
|
|- next-app -- (Next.js用プロジェクトディレクトリ)
|- package.json (Next.js用)
|- tsconfig.json (Next.js用)
|- src --- app
Lambdaへのデプロイ方法については以下を参照
CDKのプロジェクト作成
CDKのプロジェクトを以下を参考に作成します。
例 プロジェクト名が "next-cdk" のとき、以下のようになります。
npm install -g aws-cdk mkdir next-cdk cd next-cdk cdk init app --language=typescript npm uninstall -g aws-cdkこれはaws-cdkをインストール後、プロジェクト用ディレクトリnext-cdkを作成しています。 その後、作成したディレクトに移動してCDKの初期化コマンドを実行しています。
package.json
CDK用package.json のscriptsには、いくつかコマンドが登録されていますが、cdkコマンド以外は必要ないので、以下のように削除しておきます。 特にビルドコマンドは、必要のないjsとd.tsファイルを作るので、削除した方が良いでしょう。
"scripts": {
"cdk": "cdk",
},
tsconfig.json
Nxet.jsのプロジェクトをCDKプロジェクトの中に作成する場合、tsconfig.json は各プロジェクトごとに分けた方が便利です。 その場合、CDK用の tsconfig.json の exclude にNext.jsのディレクトリ名を追加します。
例 Next.js のディレクトリが next-app のときの tsconfig.json
{
...
"exclude": [
"node_modules",
"cdk.out",
"next-app"
]
}
Next.jsのプロジェクト作成
公式ドキュメントを参考に、CDKプロジェクトの中にNext.jsのプロジェクトを作成します。
CDKプロジェクトのディレクトリに入って、以下を実行します。
npx create-next-app@latest [プロジェクト名]
プロジェクト名を next-app とした場合、以下を実行します。
npx create-next-app@latest next-app
実行すると、以下のようにいくつか質問があるので、Yes か No を選択します。
✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to customize the default import alias (@/*)? … No / Yes
すると、CDKプロジェクトディレクトリの中に、Next.jsのプロジェクトディレクトリ next-app が作成されます。
drwxr-xr-x 8 mikan mikan 4096 Aug 16 00:38 .
drwxr-xr-x 5 mikan mikan 4096 Aug 16 00:03 ..
drwxr-xr-x 8 mikan mikan 4096 Aug 16 00:24 .git
-rw-r--r-- 1 mikan mikan 93 Aug 16 00:04 .gitignore
-rw-r--r-- 1 mikan mikan 65 Aug 16 00:04 .npmignore
-rw-r--r-- 1 mikan mikan 745 Aug 16 01:06 Dockerfile
-rw-r--r-- 1 mikan mikan 536 Aug 16 00:04 README.md
drwxr-xr-x 2 mikan mikan 4096 Aug 16 00:04 bin
-rw-r--r-- 1 mikan mikan 3421 Aug 16 00:04 cdk.json
-rw-r--r-- 1 mikan mikan 157 Aug 16 00:04 jest.config.js
drwxr-xr-x 2 mikan mikan 4096 Aug 16 00:04 lib
drwxr-xr-x 6 mikan mikan 4096 Aug 16 00:21 next-app
drwxr-xr-x 223 mikan mikan 12288 Aug 16 00:04 node_modules
-rw-r--r-- 1 mikan mikan 159526 Aug 16 00:04 package-lock.json
-rw-r--r-- 1 mikan mikan 533 Aug 16 00:04 package.json
drwxr-xr-x 2 mikan mikan 4096 Aug 16 00:04 test
-rw-r--r-- 1 mikan mikan 663 Aug 16 00:04 tsconfig.json
CDKを使ってNext.jsをLambdaにデプロイする方法については以下を参照
Standaloneモード
Next.jsは、本番環境で必要となるファイルのみをまとめて出力する Standaloneモードがあります。 この設定を行うとビルド成果物のサイズを大幅に削減できます。
Standaloneモードにする場合、next.config.mjsを以下のように修正します。
/** @type {import('next').NextConfig} */
const nextConfig = {
noutput: 'standalone',
};
export default nextConfig;
設定後、Next.jsのディレクトリでビルドコマンドを実行するとStandaloneモードのアプリが作成されています。
npm run build
ビルドが成功すると.nextディレクトリにファイルが作成されます。
$ ls -al .next/ total 232 drwxr-xr-x 7 mikan mikan 4096 Aug 17 12:30 . drwxr-xr-x 6 mikan mikan 4096 Aug 16 21:50 .. -rw-r--r-- 1 mikan mikan 21 Aug 17 12:29 BUILD_ID -rw-r--r-- 1 mikan mikan 1196 Aug 17 12:29 app-build-manifest.json -rw-r--r-- 1 mikan mikan 107 Aug 17 12:29 app-path-routes-manifest.json -rw-r--r-- 1 mikan mikan 967 Aug 17 12:29 build-manifest.json drwxr-xr-x 5 mikan mikan 4096 Aug 16 00:32 cache -rw-r--r-- 1 mikan mikan 94 Aug 17 12:29 export-marker.json -rw-r--r-- 1 mikan mikan 511 Aug 17 12:29 images-manifest.json -rw-r--r-- 1 mikan mikan 7269 Aug 17 12:30 next-minimal-server.js.nft.json -rw-r--r-- 1 mikan mikan 108375 Aug 17 12:30 next-server.js.nft.json -rw-r--r-- 1 mikan mikan 20 Aug 17 12:29 package.json -rw-r--r-- 1 mikan mikan 1314 Aug 17 12:29 prerender-manifest.js -rw-r--r-- 1 mikan mikan 1187 Aug 17 12:29 prerender-manifest.json -rw-r--r-- 1 mikan mikan 2 Aug 17 12:29 react-loadable-manifest.json -rw-r--r-- 1 mikan mikan 4537 Aug 17 12:29 required-server-files.json -rw-r--r-- 1 mikan mikan 922 Aug 17 12:29 routes-manifest.json drwxr-xr-x 5 mikan mikan 4096 Aug 17 12:29 server drwxr-xr-x 4 mikan mikan 4096 Aug 17 12:30 standalone drwxr-xr-x 6 mikan mikan 4096 Aug 17 12:29 static -rw-r--r-- 1 mikan mikan 34852 Aug 17 12:30 trace drwxr-xr-x 3 mikan mikan 4096 Aug 17 12:29 types
Standaloneモードのアプリは以下になります。
.next/standalone/server.js起動するときは以下を実行します。
node .next/standalone/server.js起動後 http://127.0.0.1:3000/ にアクセスして正しく表示されたら成功です。