Open2

Next.jsをAmplifyにデプロイする

ぽんたぽんた

Next.jsセットアップ

Next.jsセットアップ

npx create-next-app --typescript
✔ What is your project named? … amplify-line-app
Creating a new Next.js app in /Users/ponta/projects/amplify-line-app.

初回ビルド

cd amplify-line-app
npm run dev
> amplify-line-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

event - build page: /
wait  - compiling...
event - compiled successfully

localhost:3000にアクセス
localhost

ぽんたぽんた

Amplify設定

Amplify CLIインストール

npm install -g @aws-amplify/cli

インストール確認

amplify -v
4.51.1

amplify用IAMユーザー作成

AdministratorAccess 権限を持ったIAMを作成済みのためスキップしましたが、

amplify configure

コマンドでAmplifyに必要なIAMを作成してくれるようです。
https://docs.amplify.aws/cli/start/install#configure-the-amplify-cli

Amplifyの初回コマンド

amplify init

必要な項目を埋めていく

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

Project information
| Name: amplifylineapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: out
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS access keys
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
? region:  ap-northeast-1

Next.jsビルドコマンド変更

AmplifyはS3への静的ホスティングのため、Next.jsを静的ビルドに変更します。

package.json
"scripts": {
- "build": "next build",
+ "build": "next build && next export",
},

ホスティング設定

amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, 
Continuous deployment)
? Choose a type Continuous deployment (Git-based deployments)
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repo
sitory

ホスティングするリポジトリを連携する(今回はGithubを選択)
リポジトリ選択

リポジトリを選択
リポジトリ設定

ビルド設定
ビルド設定

確認画面
ビルド設定