AWS Amplify Consoleを使ってReactアプリのCICD環境を10分で作る

はじめに

AWS Amplify Consoleを使うと、Reactアプリなどのフロントエンドアプリを簡単にデプロイできるCICD環境が作れます。驚くほど簡単で早いです。
「AWS S3 + CloudFrontでReactアプリをHTTPS公開するための正しい構成」や「AWS Codepipelineを使ってReactアプリのCI環境をゼロから作る」で作ってきた環境を数ステップ、10分以内で作成できます。また、リポジトリのブランチに合わせて環境を簡単に作っていくことができるのも非常に便利です。ただし、制約もあります（Amplifyの制約）。

作成するもの

Amplifyを使って、GitHubにpushしたコードを、自動的にCloudFront+S3環境にビルドしデプロイする環境です。CloudFrontやS3はAmplifyが内部的に使います（個人のアカウントには現れません）。

事前準備

• Reactアプリ（たとえば、「React版Reactivesearch v3を使ってゼロから最速でElasticsearchフロントアプリを作る」で作ったReactアプリ）
• GitHub環境（たとえば、「AWS Codepipelineを使ってReactアプリのCI環境をゼロから作る」の「GitHub環境の準備」まで）
• Route53での独自ドメインホストゾーン（たとえば、「AWS S3 + CloudFrontでReactアプリをHTTPS公開するための正しい構成」の「Route53登録」）

手順

AWS Amplify Consoleの設定

1. AWS管理コンソールにログインし、AWS Amplifyの画面に移動
2. 「Deploy With the Amplify Console」の下の「GET STARTED」ボタンを押す（もしくは「アプリの作成」ボタンを押す）
3. 「From your existing code」でGitHubにチェックを入れ「Continue」ボタンを押す
4. GitHubの認証を行う
5. GitHubリポジトリ、ブランチを選択し、「次へ」ボタンを押す
6. 「ビルド設定の追加」で「アプリの名前」を任意で付け、「ビルドの設定」で「Edit」ボタンを押し、Reactivesearchのインストール定義を入れて「Save」ボタンを押し（下「ビルドの設定でのamplify.yml内容」参照）、「次へ」ボタンを押す
7. 内容を確認し「保存してデプロイ」ボタンを押す
8. 初回の環境構築、ビルド、デプロイが走るので検証がOKになるまで待つ
9. 環境にアクセスし動作しているか確認する（https://master.xxxxx.amplifyapp.com/ のようなURL）
10. また、「検証」をクリックすると検証タブで、さまざまなデバイスでどう見えるかについても確認可能

ビルドの設定でのamplify.yml内容例

Reactivesearchモジュールを含めてビルドします。

amplify.yml

version: 0.1
frontend:
  phases:
    install:
      commands:
        - npm install @appbaseio/reactivesearch
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

独自URLの設定

1. AWS管理コンソールのAWS Amplifyの画面に移動
2. 左ペインを開き、該当アプリのリンクをクリックする
3. 左ペインの「アプリの設定」にある「ドメイン管理」をクリックする
4. 「カスタムドメインの追加」ボタンを押す
5. 「ドメイン」欄でRoute53に登録されているドメイン名がリストされるので該当のドメインを選び、「ドメインの検索」ボタンを押す
6. ドメインのルートを使いたくない場合は「Exclude root」ボタンを押してルートをグレーアウトし、サブドメイン名に独自URLとして付けたい名前を入れ（ここではcityrank）、「保存」ボタンを押す
7. Route53設定やサーバ証明書設定が自動で行われ、独自URLでアプリが公開される

これだけです。

Amplifyの制約

Amplifyのアプリ公開環境は、Amplifyが内部的に用意します。マニュアル上はCloudFront + S3環境を使っているように読めますが（QuickStart）、自分のアカウントのCloudFrontやS3ではないため、CloudFrontやS3への追加の設定ができません。
そのため、現時点では、たとえば、CloudFrontにAWS WAFの機能を付けられません。また、CloudFrontが持っているモニタリングツールで監視することもできません。公開環境へのアクセスログは、CloudFront相当のものが取得できますが、管理コンソールから確認およびダウンロードできるものの、AWS CLIではダウンロードできません。
CICD環境としても、ブランチごとの設定などはできますが、CodePipelineで設定できるような細かいパイプラインの設定はできません。基本的にはブランチごとにGitHubのWeb HookなどをトリガーにCodebuildでビルドしてデプロイするのみとなります。