んなまにのメモ帳

気が向いたときに更新されます。

AWS Amplify に空のNext.jsプロジェクトをデプロイしようとしたらエラーになった

Next.jsもAmplifyも使ったことがないですが、簡単にアプリをデプロイできるらしいので、以下のサイトを参考に空っぽのNext.jsアプリをAmplify Hostingにデプロイしてみようとしたときの記録です。

参考: https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/

概要としては、create-next-appで作成したプロジェクトの設定が足りなかったためか、next buildした際にビルド済みのファイルが格納されるoutというディレクトリが作成されず、Amplifyでのデプロイに失敗しました。

next.config.jsにoutput: 'export'を指定することで解決しました。

お急ぎの方は、「アプリを公開する」まで読み飛ばしてください。

環境など

  • OS: Arch Linux (2023年10月ころに更新した)
  • Node: v20.7.0
  • npm: 10.1.0
  • Next.js: 13.5.5

Amplifyのインストール

$ npm install -g @aws-amplify/cli

amplifyの設定

$ amplify configure

ブラウザでIAMユーザーの登録画面が開くので、AdministratorAccess-Amplifyポリシーをアタッチしたユーザーを作成し、アクセスキーを作成します。

Next.jsプロジェクトの作成

対話形式で以下のように選択して作りました。

$ npx create-next-app@latest nextjs-amplify-example
✔ Would you like to use TypeScript? … No / Yes  → Yesを選択
✔ Would you like to use ESLint? … No / Yes  → Yesを選択
✔ Would you like to use Tailwind CSS? … No / Yes  → Noを選択
✔ Would you like to use `src/` directory? … No / Yes  → Yesを選択
✔ Would you like to use App Router? (recommended) … No / Yes  → Yesを選択
✔ Would you like to customize the default import alias (@/*)? … No / Yes  → Noを選択

作成したプロジェクトに入り、amplifyを初期化します。

$ cd nextjs-amplify-example
$ amplify init

プロジェクト名を入力し、amplifyの実行時に利用するAWSのプロファイルを選択する。(先程作成したIAMユーザーのプロファイル)

おそらくAmplifyがプロジェクトから読み取って以下の設定が自動生成されるようですが、Distribution Directory Pathだけoutという値に変更します。

参考にした以下のURLでも、そのようにする旨の記載がありました。

https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project nextjsamplifyexample
The following configuration will be applied:

Project information
| Name: nextjsamplifyexample
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: out →この設定だけ値をoutに変更する
| Build Command: npm run-script build
| Start Command: npm run-script start
...

もし、Enterを連打して進んでしまった場合は、あとからamplify configure projectを実行して、対話形式の設定でDistribution Directory Pathの値にoutを設定できます。

プロジェクトにAmplify Hostingを追加

amplify add hostingを実行します。 途中質問があるので、以下を選択しました。

  1. Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  2. Manual deployment
$ amplify add hosting
✔ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment

You can now publish your app using the following command:

Command: amplify publish

アプリを公開する

amplify add hosting時にamplify publishせよと言われるので、それに従ったところ以下のエラーが出ました。

$ amplify publish
...
○  (Static)  automatically rendered as static HTML (uses no initial props)

✖ Zipping artifacts failed. This is often due to an invalid distribution directory path. Run "amplify configure project" to check if your Distribution Directory is pointing to a valid path.
🛑 Please ensure your build artifacts path exists.

Resolution: Please report this issue at https://github.com/aws-amplify/amplify-cli/issues and include the project identifier from: 'amplify diagnose --send-report'
Learn more at: https://docs.amplify.aws/cli/project/troubleshooting/
...

Distribution Directoryも設定しているはずですが、その値がおかしいのか再設定せよと言われているようです。

色々確認したところ、参考にしたチュートリアルではNext.jsのbuildを実行したときに、Amplifyにデプロイする時に展開されるものが一式、outというディレクトリに入っていることを想定しているようでしたが、今回作成したプロジェクトではbuildコマンドは成功しているものの、outディレクトリが作成されていませんでした。

更に調査すると、Next.jsのビルド時のオプションでSPAにするには、next.config.jsの設定でoutput: 'export'を設定するとoutディレクトリが作成されるということがわかりました。

nextjs.org

ということで、プロジェクト内のnext.config.jsを以下のように修正します。

/*next.config.js*/
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', //この行を追加
}

module.exports = nextConfig

再度、amplify publishを実行するとデプロイに成功しました。

$ amplify publish
...
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.abcdef12345678.amplifyapp.com

生成されたブラウザでURLにアクセスすると、無事Next.jsの初期画面が開きました。

Next.js