目的
- ローカルでNext.jsアプリ作成
- GitHubでリポジトリ管理
- AWS Amplifyを用いたデプロイ
環境
- GitHub
- node 18.12.1
- npm 8.19.2
Next.jsアプリ作成
- 開発用ディレクトリで以下のコマンドを実行
npx create-next-app deploy-front- 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- プロジェクトのフォルダが作成されるので作成したディレクトリに移動、サーバー起動
cd next-samplenpm run dev- ログに表示される
http://localhost:3000にアクセスして画面表示されればOK
GitHubへプッシュ
- GitHubにリポジトリ作成(以下リポジトリ名を
deploy-frontとする) - 先ほど作成したNext.jsアプリのディレクトリで以下コマンド実行
git init
git add .
git commit -m 'first commit'
git remote add origin {作成したリポジトリURL}
git push origin main- GitHubを確認してプッシュできていればOK
Amplifyでホスティング
- AWS > AWS Amplify > New app > Host web appからホスティングするアプリを選択
- GitHubを選択
- 作成したリポジトリとブランチを選択
- アプリ名、ビルド設定、IAM Roleを設定
- Review画面で確認して問題なければデプロイ
- デプロイに成功してアプリの詳細画面に行くとこんな感じ
- 黒塗り部分にamplifyのURLが表示されるので、アクセスするとローカルで確認した画面が表示されます
CD環境
Amplifyで作成したコードはGitHubに紐づいているので、実際にmainブランチにpushされると、自動で検知してデプロイまでやってくれます
コメント