Reactアプリケーションを作成してAWS Amplifyサービスにホスティングする

# はじめに
> Reactでアプリケーションを作成してAWS Amplifyサービスを使ってホスティングしてみようと思います。

# gitリポジトリ作成

1) 「**New repository**」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/fe3d8da8-ac75-4a33-5242-09c04e0ed1e9.png)

2) git ripository作成に必要な項目を入力して**create repository**をクリックします

- Repository name：**任意の名前**
- 公開設定： **privateを選択**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/01d2866f-345d-b749-2c7e-2d301d044c08.png)



# Reactアプリケーションの作成

3) npxのバージョンを確認

```command
$ npx --version

6.14.15
```
- npxがインストールされていない場合

```command
$ npm install -g npx
```

4) creat-react-appのインストール

```command
$ npx create-react-app --template typescript react-test

```

5) 起動させてみる

```command
$ cd react-test
$ npm start
```
- 以下のURLにアクセスする

[localhost3000](http://localhost:3000/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/d2d50dd4-4170-ce1d-70c2-e73902de40fc.png)

# reactアプリをpush

6) 以下のコマンドを実行してpushします

```command
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M master

# 以下のコマンドにgit urlを追加します
$ git remote add origin --- [git url] ---


$ git push origin master
```

# AWS Amplifyの設定

7) マネージメントコンソールにログインしてAWS Amplifyサービスを開いて「**Deliver**」の「**Get started**」をクリックします

[マネージメントコンソール](https://aws.amazon.com/jp/console/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/387558c7-cb9d-6b28-3408-2649f3514bde.png)

8) 「**GitHub**」を選択して「**Continue**」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/12907a2f-3c93-51a2-0079-50615b60598b.png)

9) リポジトリブランチの追加に必要な項目を選択して「**次へ**」をクリックします

- リポジトリ：**先ほどgithubで作成したリポジトリを選択**
- ブランチ： **reactアプリをpushしたブランチを選択**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/4a90b7da-0a8c-b8b4-e7d8-03c2a58c6a5c.png)

10) ビルド設定の構成が表示されるので「**次へ**」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/b660c308-53aa-007c-6efb-ff05a0d8a366.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/5c727da5-2281-6a42-5f8c-ecc5c1a823f5.png)


# 動作確認

12) しばらくすると「**プロビジョン**」～ 「**検証**」まで✅がつくので、「**全般**」をクリックして「**本番用ブランチURL**」のURLをクリックして動作確認します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/d44fb603-e255-daa9-1a80-8aaf2131cc32.png)

- クリックしたURLでアクセスできること確認できました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/abba67b5-bd4b-9d31-2a3a-a8dd51a81c31.png)

# 更新してみる

13) プログラムを更新してgitにpushする

- src/App.tsxを編集してみる
  - 11行目を削除して「**hello world**」に変更

```App.tsx
import React from 'react';
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>
          hell world    {/*　変更 */}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

14) pushして更新する

```command
$ git add App.tsx
$ git commit -m "two commit"
$ git push origin master
```

15) AWS Amplifyを開いて「**react-test**」(Amplifyを作成した名前)をクリックして「**検証**」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/2bf0120d-57f3-a20e-36f7-ddfa99e46366.png)

16) 「**このバージョンを再デプロイ**」をクリックしてしばらくすると再度「プロビジョン」～「検証」まで✅がついたら「**ドメイン**」のURLをクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/d8f75730-1886-31d6-99ec-16da103c6539.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/25817ac3-76d1-ac97-8e6b-accbbab2df84.png)

- 更新されてることが確認できました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533263/08a41ca2-3ad1-80c3-8109-b752e8e8c31d.png)