Zenn
📝

Next.js + Amplifyでのデプロイ

2023/08/19に公開
AWS
Next.js
Amplify
tech

Objective

  • ローカルでNext.jsアプリ作成
  • GitHubでリポジトリ管理
  • AWS Amplifyを用いたデプロイ

Environment

  • GitHub
  • node 18.12.1
  • npm 8.19.2

Create Next.js App

Next.jsアプリの作成

  1. 開発用ディレクトリで以下のコマンドを実行
npx create-next-app deploy-front
  1. TypeScriptとESLintを使うか聞かれるのでYes
? Would you like to use TypeScript with this project? › No / Yes
? Would you like to use ESLint with this project? › No / Yes
  1. プロジェクトのフォルダが作成されるので作成したディレクトリに移動、サーバー起動
cd next-sample

npm run dev
  1. ログに表示される http://localhost:3000 にアクセスして画面表示されればOK

Push to GitHub

  1. GitHubにリポジトリ作成(以下リポジトリ名を deploy-front とする)
  2. 先ほど作成したNext.jsアプリのディレクトリで以下コマンド実行
git init
git add .
git commit -m 'first commit'
git remote add origin {作成したリポジトリURL}
git push origin main
  1. GitHubを確認してプッシュできていればOK

Hosting with Amplify

Amplifyでホスティングします

  1. AWS > AWS Amplify > New app > Host web appからホスティングするコードを選択
  2. GitHubを選択
  3. 作成したリポジトリとブランチを選択
  4. アプリ名、ビルド設定、IAM Roleを設定
  5. Review画面で確認して問題なければデプロイ
  6. デプロイに成功してアプリの詳細画面に行くとこんな感じ
  7. 黒塗り部分にamplifyのURLが表示されるので、アクセスするとローカルで確認した画面が表示されます

Continuous Deploy

Amplifyで作成したコードはGitHubに紐づいているので、実際にmainブランチにpushされると、自動で検知してデプロイまでやってくれます

Discussion