はじめに

今回はReactアプリをAWS Amplifyを使ってホストできるように環境を構築していきます。
こちらは前回の記事の続きとなっています。
~~続きとなっていますが、create-react-appを使う場合は最初にReactアプリの導入からやったほうが安全かもしれません。理由は後述します。~~
create-react-appはどうやらReactのチュートリアルからも構築の手順として案内が消えており、非推奨との話もちらほら聞きますので、ViteでReact環境を構築した方がいいかもしれません。

Reactアプリを作る

amplifyにReactアプリをデプロイする前にまずReactアプリを導入しないといけないので、まずはそこから始めていきます。
なお、既にNode.jsとを導入していることを前提として進めています。
また事前にGitをインストールしておいてください。
Windowsの場合はGit for WindwosをインストールすればGitが使えるようになります。

ViteでTypeScript×Reactの開発環境を構築してみた【前編】
上記の記事ではViteでの環境構築を取り扱っているようですので、参考として引用させて頂きました。
後編はESlintとPrettierの話なので、ホスティングの構築が終わった後で実施しても構いません。

ここでのcreate-react-appを使ったReact環境構築は非推奨とされていますが、どうしてもcreate-react-appで構築したいという場合は以下で記載しているコマンドを参考にしてください。
Viteで構築する場合は、Viteで環境構築後「AWS CodeCommitにReactアプリをpushする」まで飛ばしてください。

最初に以下のコマンドを実行します。

npm i -g create-react-app

amplifyで使うワークスペースのディレクトリに移動します。
インストールが完了したら次に以下のコマンドを入力します。

create-react-app ./

しかし、先にファイルがある状態で実行するとエラーでコマンドが実行できません。
なので、create-react-appを使ってReactアプリを作成する場合は、amplifyの環境を構築する前に行った方が良いです。
create-react-appではなく一つずつモジュールをインストールするのであれば問題ないかと思います。
で、自分の場合は最初に入っていたファイルを一旦別の場所にバックアップしてcreate-react-app実行完了後に元に戻しました。
あんまり良くないと思いますが、入っていたものは設定ファイルなので多分大丈夫ですが、保証はできませんので自己責任で。
今のところ問題なく動作しています。
とりあえず最初にReactアプリ作成から始める人は気にしなくていいです。

コマンドの実行が完了したらローカルサーバを立ち上げて画面の確認をします。
以下のコマンドを実行してください。

npm start

実行が完了したらhttp://localhost:3000/にアクセスします。

上記の画面が表示できていればReactアプリは導入完了です。

AWS CodeCommitにReactアプリをpushする

次にWebアプリをAmplifyでホスティングするために、リポジトリホスティングサービスを利用します。
一応リポジトリホスティングサービス使わないでもデプロイは可能です。
選択肢としてはGitHub、Bitbucket、GitLab、AWS CodeCommitが使えます。
今回は折角AWSを使っているので、CodeCommitを使ってリポジトリを作成し、Amplifyにホスティングしようと思います。

まずAWS CodeCommitのコンソール画面に移動します。

「リポジトリを作成」ボタンを押下して、リポジトリの作成を開始します。

リポジトリ名を入力したら「作成」ボタンを押下します。
これでリポジトリの作成は完了します。

次にIAMのコンソール画面に移動します。
左のメニューリストから「ユーザー」を選択します。
作成済みのIAMユーザー名をクリックします。

ちなみに、AmplifyとCodeCommitに対してフルアクセスできるポリシーが付与されていることを前提として話を進めます。
そうでない場合は付与しておいてください。
IAMユーザを作成していない場合は作成してください。

ユーザ名をクリックしたら「セキュリティ認証情報」タブを選択して、「AWS CodeCommit の HTTPS Git 認証情報」までスクロールしてください。

「認証情報の作成」ボタンを押下します。

上記画面が表示されたら、ユーザ名とパスワードをメモっておきます。
または、「認証情報をダウンロード」でユーザ名とパスワードを保存しておきます。

再度CodeCommitのコンソール画面に移動します。

URLのクローンにある「HTTPS」を選択してURLをクリップボードにコピーします。

次にReactアプリを作成したディレクトリで以下のコマンドを実行します。
なお、amplify CLIを使ってamplify initコマンドで環境構築が済んでいない場合、.gitファイルが作成されていないので、git initコマンドを先に実行して作成しておいてください

git add -A
git commit -m "create react app"
git push --set-upstream origin main

なお、ブランチ名をmasterからmainに変更しています。
gitが初期で作成するブランチ名はmasterだと思いますが、git branchでブランチ名を確認してください。
エラーがでてpushできなかった場合もブランチ名を確認してください。

正常にpushができると、以下の画面が表示されます。

先ほど生成した「AWS CodeCommit の HTTPS Git 認証情報」のユーザ名とパスワードを入力し、「Continue」を押下します。
そうするとpushの処理が進行します。

branch 'main' set up to track 'origin/main'.

上記の表示が出れば完了です。

CodeCommitのコンソール画面に戻って、実際にブランチがpushできているのか確認します。
CodeCommitのコンソール画面を開いたらリポジトリ一覧にある作成したリポジトリ名を選択して、左のサイドメニューから「ブランチ」を選択します。

上記画像のようにpushしたブランチが表示されていれば完了です。
※上記画像ではdevelopブランチも作成してpushしたので画像に表示されています。
念のため、ブランチ一覧からブランチ名をクリックして中身が問題ないかざっと確認しておいてください。

Reactアプリをホスティングする

ここまできたら後はリモートにあるブランチをamplifyにホスティングするだけです。
AWS Amplifyのコンソール画面を表示します。
すべてのアプリから使用するアプリを選択します。
「Hosting enviroments」のタブを選択します。

上記画像が表示されたら、使用するGitリポジトリのあるリポジトリホスティングサービスを選択します。
今回はCodeCommitでリポジトリを作成したので、「AWS CodeCommit」を選択します。
選択したら「ブランチを接続」ボタンを押下します。

リポジトリブランチの追加画面が表示されるので、使用するリポジトリとブランチを選択し、問題なければ「次へ」を押下します。

ビルドの設定画面が表示されます。
「Enviroment」から使用するバックエンド環境を選択します。
またフルスタックのCI/CDを有効化のチェックがありますが、バックエンドに変更があると自動でテストやデプロイが実行されるようになります。自動でデプロイさせたい場合はチェックしておいてください。
ロールを選択したいといけないので、「新しいロールを作成」ボタンを押下します。
既にAmplify用のロールがある場合はそれを選択してください。

「新しいロールを作成」ボタンを押下後、新しいタブが開いてロールの作成画面が表示されると思います。
既にユースケースからAmplifyが選択されているのを確認して、「次のステップ:アクセス権限」ボタンを押下します。

Attachedアクセス権限ポリシーの画面が表示されます。
特に設定する項目はないので、そのまま「次のステップ:タグ」ボタンを押下します。

タグの追加（オプション）画面が表示されます。
特に追加するものはないので「次のステップ:確認」ボタンを押下します。

確認画面が表示されます。
ロール名を入力します。
ロール名が重複していなければデフォルトで入っている名前で問題ありません。
問題なければ「ロールの作成」ボタンを押下します。
押下後、ビルドの設定画面に戻って「既存のロールを更新」ボタンを押下してください。

上記画像のように先程作成したロールを選択します。
構築とテストの設定は、設定したいことがあれば設定してください。特に無ければそのままで良いです。
問題なければ「次へ」ボタンを押下します。

確認の画面が表示されるので内容に問題なければ「保存してデプロイ」ボタンを押下します。

Hosting enviromentsにデプロイ中のブランチが表示されます。
このままデプロイが完了するまで待ちます。

デプロイが完了すると、右の進行状況が全部緑で表示されます。
画像の黒塗りになっている部分にURLが表示されていると思うので選択してください。

上記画面が表示されればReactアプリのホスティングは完了です。

次回はCognito（コグニート）を使った認証を実装してみたいと思います。
ありがとうございました。

参考文献