ReactアプリをAWS amplifyを使ってホスティングする

# はじめに

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



# Reactアプリを作る

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

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

ここでの`create-react-app`を使ったReact環境構築は非推奨とされていますが、どうしても`create-react-app`で構築したいという場合は以下で記載しているコマンドを参考にしてください。
Viteで構築する場合は、Viteで環境構築後「[AWS CodeCommitにReactアプリをpushする](https://qiita.com/MTK25252/items/e8424aaa40bbfcb0ba2c#aws-codecommit%E3%81%ABreact%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92push%E3%81%99%E3%82%8B)」まで飛ばしてください。

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

```
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/`にアクセスします。
![スクリーンショット 2023-02-23 235149.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/728f7d77-5746-8027-c24a-145a1ead9911.png)

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

# AWS CodeCommitにReactアプリをpushする

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

まずAWS CodeCommitのコンソール画面に移動します。
![スクリーンショット 2023-02-16 135510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/534ea321-5c5f-cb99-fc6c-02bc040be32d.png)
「リポジトリを作成」ボタンを押下して、リポジトリの作成を開始します。
![スクリーンショット 2023-02-16 135658.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/45a6c9b6-5045-a043-1aec-1864b12c1e22.png)
リポジトリ名を入力したら「作成」ボタンを押下します。
これでリポジトリの作成は完了します。

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

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

ユーザ名をクリックしたら「セキュリティ認証情報」タブを選択して、「AWS CodeCommit の HTTPS Git 認証情報」までスクロールしてください。
![スクリーンショット 2023-02-24 012433.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/a50e9bd5-8822-7be9-1c41-3af05bac20a4.png)


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

![スクリーンショット 2023-02-24 015318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/89af65ff-13b6-f48c-7f30-945cdd244480.png)

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

再度CodeCommitのコンソール画面に移動します。
![スクリーンショット 2023-02-24 021412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/63babd27-73a0-84ff-2fda-5ec411bc3323.png)

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ができると、以下の画面が表示されます。
![スクリーンショット 2023-02-23 215602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/f8aae2ed-8596-ff0e-9844-ba58354619b3.png)

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

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

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

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

![スクリーンショット 2023-02-24 125720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/2477c16b-624a-9928-32ca-7594a3f25d5f.png)


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

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

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

![スクリーンショット 2023-02-24 131127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/82d239e2-9908-9a18-8985-8fdd291233e8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/5c4af6ad-3e54-4a8a-24c5-b66aa557e7b0.png)

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

![スクリーンショット 2023-02-23 223208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/7b4c8369-34a8-fe84-97c2-72f3e8460048.png)

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

![スクリーンショット 2023-02-24 133116.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/0c11b471-9327-ef2c-c51d-795e19d8a42c.png)

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

![スクリーンショット 2023-02-23 222923.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/d1562377-930e-60c4-7bbf-331669296cba.png)

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

![スクリーンショット 2023-02-23 223004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/3443dda6-9e50-a730-0262-ff4f86848741.png)

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

![スクリーンショット 2023-02-24 133837.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/c4cdf6a7-3f7b-aa58-14a7-b2a27df8ddfb.png)

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

![スクリーンショット 2023-02-23 223305.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/51af2325-680e-f3c5-b3d8-66e44ceaebed.png)

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

![スクリーンショット 2023-02-23 223354.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/7c868994-98c5-fee7-2572-cc8ad256f189.png)

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

![スクリーンショット 2023-02-23 223622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/645d2bc3-5edf-2ed5-2865-74707ebb0d8a.png)

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

![スクリーンショット 2023-02-23 223834.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/0c0dcf4b-98d6-efa8-fee2-6ad3a36b9c81.png)

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

![スクリーンショット 2023-02-23 224148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125118/b0724442-a1ad-f85b-0a2a-d11c356c2ace.png)

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


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



<a id="#reference"></a>
# 参考文献
- [フルスタック React アプリケーションを構築する](https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/)
- [ViteでTypeScript×Reactの開発環境を構築してみた【前編】](https://note.com/shift_tech/n/n9c5fcd207680)