AWS AmplifyのサンプルをGitHubからCodeCommitにクローンして、AWSコンソールからデプロイする手順（create-react-app-auth-amplify）

AWS AmplifyのサンプルをAWSコンソールからAWS Amplifyでデプロイする手順です。
同様のことは、AWS Amplify CLIでもできると思いますが、コンソールの機能を使いたかったので、AWSコンソールから、Amplifyホスティングを利用しています。

AWS Amplifyには、以下のようなサンプルがあります。
今回の手順では、「create-react-app-auth-amplify」の方を使用しています。

https://github.com/aws-samples/create-react-app-auth-amplify

https://github.com/aws-samples/aws-starter-react-for-github-actions

https://github.com/aws-samples/aws-amplify-appsync-graphql-real-time-canvas

:::note warn
いずれも、以下のように表示されており、そのうち削除されるかもしれません。
「This repository has been archived by the owner on Oct 4, 2022. It is now read-only.」

以下のサンプルはアクティブなので、今はこちらの方がよいかもしれません。
https://github.com/aws-amplify/amplify-js-samples
:::

# 目次
- [GitHubからCodeCommitにクローン](#githubからcodecommitにクローン)
- [(事前準備)IAMロールを作成](#事前準備iamロールを作成)
- [Amplifyホスティング](#amplifyホスティング)

# GitHubからCodeCommitにクローン

GitHubのサンプルをCodeCommitにクローンするシェルスクリプトを作成しました。

```bash:
#! /bin/bash

repo_name=create-react-app-auth-amplify

aws codecommit create-repository \
--repository-name ${repo_name} \
--repository-description "${repo_name}" \
--tags Category=aws-samples

git clone --mirror \
https://github.com/aws-samples/${repo_name} \
${repo_name}

cd ${repo_name}
git push \
https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/${repo_name} \
--all

cd ..
rm -fr ${repo_name}
```

詳細は、以前の投稿を参考にしてください。

https://qiita.com/dorcus-rectus/items/e1306e82de4ca9a07530

# (事前準備)IAMロールを作成

:::note
すでにAmplify用のIAMロールが作成されている場合は、本手順は不要です。
:::

AWSコンソールにログインし、「IAM」サービスに移動します。
左ツリーから「ロール」を選択します。

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/ff9e9136-00fe-6996-aeb7-5a25aad7484d.png)

「ロールを作成」を選択します。

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/61669c3b-4612-2389-4a57-295fa416b7cd.png)

信頼されたエンティティタイプに「AWSのサービス」を選択します。
ユースケースで、その他のAWSのサービスのユースケースに「Amplify」を選択し、「Amplify - Backend Deployment」を選択した状態で「次へ」をクリックします。

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/b3b83f58-0b0b-f117-6b4f-8e40c3b29987.png)

許可ポリシーに、「AdministratorAccess-Amplify」が選択されていることを確認して「次へ」をクリックします。

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/571bf009-eaaa-2f52-5ccd-d7427e782ce8.png)

ロール名に任意の名前を入力します。

![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/a72277c5-69fa-4b03-aaad-4316cddccab8.png)

下にスクロールして、必要に応じてタグを追加して、「ロールを作成」をクリックします。

![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/050bb12c-e9a2-d1b3-5504-96e3290b62b5.png)

これで、IAMロールの作成が出来ました。

# Amplifyホスティング

続いて、CodeCommitにクローンしたコードをデプロイします。
AWSコンソールから、「Amplify」サービスに移動します。「使用を開始する」を選択します。

:::note warn
すでにアプリケーションが存在する場合は、「すべてのアプリ - 新しいアプリケーション - ウェブアプリケーションをホスト」を選択してください。
:::

![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/79d16c48-c0c9-fb57-03d7-e98d6d19fc4e.png)

Amplifyホスティングの方の「使用を開始する」をクリックします。

![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/317a9095-9007-a1ba-ebc9-c082912d02c5.png)

「AWS CodeCommit」を選択して、「続行」をクリックします。

![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/e1578750-08b6-ef12-9f16-86a22e250d78.png)

先ほどクローンしたレポジトリを選択し、ブランチを選択します。
※ここでは、masterを選択しています。

![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/86bc3cb8-46df-d1ce-3d52-d18d0fb2b950.png)

「新しい環境を作成」を選択し、「test」と入力しています。
サービスロールには、事前に作成したIAMロールを選択します。

![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/ff7c787b-d6bd-76c7-c88a-662aaac67e50.png)

「次へ」をクリックします。

![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/f0ba58f7-fad9-51c1-de61-7e5b9cbfeb05.png)

「保存してデプロイ」をクリックします。

![013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/db4fc807-80c0-1f84-133a-32c6c04c6fa1.png)

デプロイが開始されるため、しばらく待ちます。

![014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/90fa5e4e-da38-dde4-b1c8-78e657488022.png)

デプロイが完了すると、以下のようにすべてのフェーズがグリーンになります。

![015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/e0a09e0c-1a31-2172-b56d-d57b3a326881.png)

発行されたURLをクリックすると、以下のようなログイン画面が表示されます。
ユーザは、適宜作成してください。

![016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/c5ce28cf-c28b-139f-b885-0f848a5249e7.png)