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
にアクセス
Amplify設定
Amplify CLIインストール
npm install -g @aws-amplify/cli
インストール確認
amplify -v
4.51.1
amplify用IAMユーザー作成
AdministratorAccess 権限を持ったIAMを作成済みのためスキップしましたが、
amplify configure
コマンドでAmplifyに必要なIAMを作成してくれるようです。
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を選択)
リポジトリを選択
ビルド設定
確認画面