Next.js 13 アプリをAWS Amplifyでデプロイ
この記事の目的
AWSのサービスの使い方をすぐ忘れてしまうので、後から思い出せるようにメモしておきます。
Next.js 13 アプリケーションを Amplify Hosting でデプロイする
以下の記事がとても参考になりました。
環境：
windows WSL2 Ubuntu-20.04
node：v20.0.0
next.js：13.4.6
1
Next.js 13でプロジェクトを作成し、Githubにリポジトリをpush
2
awsにログインして、AWS Amplifyを表示する。
使用を開始する
Amplifyホスティング
使用を開始するボタンを押す。
3
Amplify ホスティングの開始方法
GitHubを選択する
4
リポジトリブランチの追加
リポジトリとブランチを選択する。
5
ビルドの設定
デフォルトのまま
6
確認
保存してデプロイ
7
デプロイが成功すると、Amplify コンソールのアプリのページに移動します。
数分待ちます。
プロビジョン→構築→デプロイ のすべてにチェックマークがついたら完了です。
8
左下のウィンドウの絵の下に表示されているリンクをクリックすると、デプロイしたアプリが表示されます。
9
ドメイン名をカスタムドメインに変更します。
10
Amplify コンソール画面で
左ペインで「ドメインの管理」を選択
画面右上の「ドメインを追加」を押す
11
ドメインを選択して、「ドメインを設定」を押す
12
サブドメインの設定を行い、画面右下の保存ボタンを押す。
13
数分待ちます。
下記のような画面が表示されます。
14
カスタムドメイン欄に記載されたURLにアクセスします。
アプリが表示されました。
15
Route 53 に CNAMEレコードが追加されている？
AWS Amplify を用いた Web サイトの構築方法
また、AWS Hands-on の以下の動画が参考になりました。
動画の構成
以下の構成になっています。
01 今回のハンズオンで作る構成とAmplifyの紹介
ハンズオン全体の流れ、前提、ゴールを説明した上で、AWS Amplifyについてご紹介します。
02 AWS Amplify のハンズオン（環境構築、Cloud9 編）
本ハンズオンを進めていくために Cloud9を用いた環境構築を行います。冒頭に解説を行った上で Cloud9 環境の立ち上げや設定、ボリュームの変更を行っていきます。
03 AWS Amplify のハンズオン（環境構築、CLI 編）
Node.js や AWS Amplify、Reactアプリケーションが動作する環境を整備していきます。内容の確認やコマンドのコピーに以下の Amplify Docs もご利用いただけます。
Tutorial - Prerequisites - React - AWS Amplify Docs
Tutorial - Set up fullstack project - React - AWS Amplify Docs
04 AWS Amplify のハンズオン（FE/API/DB 編）
API カテゴリーを利用した GraphQL API の構築を行います。コマンドやソースコードのコピーに以下の Amplify Docs を利用します。
Tutorial - Connect API and database to the app - React - AWS Amplify Docs
05 AWS Amplify のハンズオン（Auth 編）
Auth カテゴリーを利用したログイン機能の構築を行います。コマンドやソースコードのコピーに以下の Amplify Docs を利用します。
Tutorial - Add authentication - React - AWS Amplify Docs
06 AWS Amplify のハンズオン（Hosting 編）
ここまでで構築した Web アプリケーションを Hosting 機能を利用して外部から通信できる状態にします。
Tutorial - Deploy and host app - React - AWS Amplify Docs
07 本シリーズのまとめ、リソースの削除
ハンズオンで作成したリソースの削除を行い、本ハンズオンのまとめを行います。Next Actionにつなげていただくための参考資料についても紹介します。
Discussion