AWS Amplifyで自動デプロイとカスタムドメインの設定を試してみる

AWS AmplifyでReactアプリケーションの自動デプロイを試したときの学習メモです。
ReactアプリケーションのGitHubのリポジトリを登録することで、Reactアプリケーションを自動でデプロイすることができます。
おまけとしてカスタムドメインの設定を行います。

# 前提
- Node.js（>8)
- GitHubアカウント

# Reactアプリケーションの作成
まずはCreate React AppでReactアプリケーションを作成しましょう。

```console
npx create-react-app amplify-react
```

下記の様にフォルダ構成が出来上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/5b502919-160c-23c7-9b9f-c0d68bb660e2.png)

ひとまず動作を確認しておきましょう。
作成したフォルダに移動して、下記コマンドを実行します。

```console
npm start
```

下記のようにブラウザで表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/c3a2829c-10c1-22dd-15ec-a2ab7b397073.png)

# GitHubリポジトリにアップロード
GitHubにこのReactアプリケーション用のリポジトリを作成しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/b57f5d45-5cfe-1789-32f3-68d54e32de57.png)

後で使用するので、作成したリポジトリのリンクをコピーしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/cfb02f26-72cf-5b40-edc2-04d9a2dc8410.png)


```console
git remote add origin <コピーしたURL>
git push origin master
```

`git push origin master`で失敗する場合は`-f`を追加して強制的にpushを行います。

# AWS Amplifyでデプロイ
AWS Amplifyのページを開き、ページ下部の「Deliver」の「Get started」をクリックします。
（Web系のUIは更新されがちなので、画面が異なっているかもしれません。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/bf6a0236-bbfb-3cdf-45e2-5fc2cd8afd83.png)

GitHubを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/9b881132-da3e-d746-531a-dcbe26f500e5.png)

GitHubの認証を行い、リポジトリとブランチを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/1dfb079c-6a16-d33f-e7fb-f35b1dd53b9f.png)

ビルド設定の構成はデフォルトのままとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/7c5628cb-237d-ad5c-7ff3-0354c2062e7d.png)

確認が終了すると下記のような画面に遷移します。
検証までチェックマークが点いた後で、左下のリンク（`https://master...`）にアクセスすると作成したアプリケーションが表示され、GitHubリポジトリのReactアプリケーションがデプロイされているのが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/2ccf3bc1-3063-f190-3da3-07886b58026c.png)

# 自動デプロイの確認
さて、ここまででAWS Amplifyを使用した自動デプロイの準備ができました。
GitHubリポジトリを更新して、変更内容が自動的にデプロイされることを確認してみましょう。
App.jsを下記のように変更します。

```diff_jsx:App.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>
-         Edit <code>src/App.js</code> and save to reload.
+         Hello World!!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```
更新が完了したら、GitHubリポジトリを更新します。

```console
git add .
git commit -m “Hello World”
git push origin master
```

すると、AWS Amplifyのアプリケーションのステータスがプロビジョンの状態まで戻ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/c634e685-bea7-75cf-36ec-f0e47b7b075e.png)

検証まで完了した段階で左下のリンクをクリックすると、変更内容が反映されており、自動デプロイが行われていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/344a409b-562f-6920-3d6b-98383f086da9.png)

# カスタムドメインの設定
左のナビゲーションバーの「ドメイン管理」→「カスタムドメインの追加」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/d221e01a-b797-57e0-7978-0a5d4d64d397.png)


Route53で登録済みのドメインが選択可能ですので、設定して保存をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/751d09a4-1b9e-49b6-2d3c-67b4a3a0655e.png)

StatusがAvailableになれば、記載のURLでアクセスが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/e5d5eb11-a4b9-87e6-33d5-21ea47288d7d.png)


# アプリケーションの削除
不要になった場合は、AWS Amplifyのアプリケーションの**アクション**からアプリケーションを削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/7eda3118-3c18-9378-1a3d-8559962237b0.png)