AWS Amplifyでつまずく

Next.jsで作ったWebサイトをAWS Amplifyでホスティングするときに少しつまずいたのでやり方を残しとく。 WebサイトはSSGでビルドしてもらうような設定にする。

Next.js側の設定

package.jsonのビルドの設定を変えておく。 こうしておくとAWS Amplify側でSSGでビルドするように判断してくれるらしいため。

-    "build": "next build",
+    "build": "next build && next export",

次に、一部のコンポーネントはSSGでは使えないものがあるようなので、使わないように書き換える。 今回はnext/imageがダメだったので使わないようにした。

Gitにアップロード

Next.jsのプロジェクトをGitにアップロードする。 今回はプライベートリポジトリを作ってアップロードした。

AWS Amplifyの設定

AWS Amplifyのページ下部にある「使用を開始する」をクリックする。

Amplify Hostingの開始方法を指定する。 今回はGitHubを選ぶ。

GitHubの認証を求められる場合は認証してあげる。 認証できたらリポジトリの一覧からNext.jsのプロジェクトを選ぶ。 プロジェクトを選ぶとブランチを選択する項目が表示されるので選ぶ。 今回はmainブランチにした。

構築設定の構成は特に変更しなかった。 必要ならアプリケーションの名前を入力して次へ。

内容の確認が表示されるので、問題なければ保存してデプロイ。

どこかのタイミングでロールの設定を求められたが、表示された内容にしたがって進めた。 2回目以降表示されなくなったので、どのタイミングか分からなくなった。