AWS AmplifyでReactアプリをデプロイする


# 概要
AWS AmplifyでReactアプリをデプロイした手順をまとめます。

### ローカルでReactアプリを作成する
- 作業ディレクトリとしてamplify_react_demoを作成し、VSCodeで開く。
```bash
mkdir amplify_react_demo
code amplify_react_demo
```

- create-react-appを使って、Reactアプリケーションを作成する。
```bash
npx create-react-app app
```

- create-react-appコマンドが完了した後、アプリケーションのディレクトリに移動してローカルでReactを起動させる。
```bash
cd app
npm start
```

- ポート3000でブラウザからアクセスできることを確認
![スクリーンショット 2023-02-19 6.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/34b2f4e0-380b-bce2-485f-058158f10c19.png)

- 任意のGitHubリポジトリにプッシュする
```bash
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:Junpei-Nakasone/amplify_react_demo.git
git push -u origin main
```

## AWS Amplifyの設定
- AWS Amplifyのコンソールから「ウェブアプリケーションをホスト」の「使用を開始する」をクリック
![スクリーンショット 2023-02-19 6.41.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/0edd27b8-b324-71cf-4a26-f016de93733c.png)


- 「Amplifyのホスティングの開始方法」からGitHubを選択し、「続行」をクリック
![スクリーンショット 2023-02-19 6.46.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/7ef04db2-0eb6-a325-2992-ad58bf6acb87.png)

- GitHubアカウントでAWS Amplifyを認証する画面に遷移するので、動作確認用のamplify_react_demoリポジトリを選択し、「Install & Authorize」をクリック
![スクリーンショット 2023-02-19 6.49.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/2e415b0d-266a-c122-199d-433eacff8e85.png)

- AWS AmplifyにデプロイしたいGitHubのリポジトリとブランチを選択し,「次へ」をクリック
![スクリーンショット 2023-02-19 6.50.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/8a507872-6e04-ba17-9966-58efad6c4de4.png)

- ビルドの設定はデフォルトのままにして「次へ」をクリック
![スクリーンショット 2023-02-19 6.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/a4582237-4a6e-58aa-5541-2dc189d0a715.png)


- 内容に問題ないことを確認し「保存してデプロイ」をクリック
![スクリーンショット 2023-02-19 6.53.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/c0e3962e-e838-c599-6c53-bb90620684c8.png)


- Amplifyのコンソールからデプロイまで完了していることが確認できたら、URLをクリックする
![スクリーンショット 2023-02-19 7.00.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/7c719d96-e2ce-cd23-3d9e-923399d539d9.png)

- ブラウザにReactアプリが表示される
![スクリーンショット 2023-02-19 7.01.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/4e638aab-89be-04c0-6608-00cd600ca03b.png)

## 自動デプロイの確認
- App.jsを少し書き換えて、GitHubのmainブランチにプッシュする
```js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Amplifyの動作確認
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

```bash
git add src/App.js
git commit -m "Amplifyの動作確認"
git push origin main
```

- 新しくコードがプッシュされたのを検知してAmplifyも自動でプロビジョンが動作する
![スクリーンショット 2023-02-19 7.04.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/53135ffe-849e-4cd2-48ef-3333dbfe8b93.png)


- Amplifyのデプロイまで完了したら、再度URLにアクセスする
![スクリーンショット 2023-02-19 7.07.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/9cbc6c16-3164-a5b0-3132-c4004a57bb23.png)

- 画面表示が更新されていることが確認できる
![スクリーンショット 2023-02-19 7.08.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331225/cf5a64d3-15bb-bd88-a9c8-247d46b888ba.png)