AWS AmplifyでReactJSをデプロイ

本チュートリアルを進めるには、以下が必要です。

• AWSアカウント
• Gitリポジトリをホスティングするための GitHubアカウント
• Git CLIを使ってリモートリポジトリにコミットをプッシュする基本的な知識
• カスタムドメイン（任意）

AWS Cloud9は、ブラウザ上でコードの記述・実行・デバッグができるクラウドベースのIDEです。サーバーレスやReactJSアプリの開発に最適で、ローカル環境にツールをインストールせずに多様な言語を扱えます。

このステップではAWS Cloud9で環境を作成し、それを使ってローカルのReactJSアプリケーションを構築します。

AWS Cloud9コンソール（https://console.aws.amazon.com/cloud9/）を開きます。

まずはCloud9環境を作成します。インスタンスはT3.smallのAmazon Linux 2を使用します。基盤インスタンスへのアクセスはAWS Systems Manager経由で構成し、セキュリティグループでインバウンドポートを開放することなくSSH接続が可能になります。セットアップの過程で、Cloud9はAWSサービスにアクセスするためのIAMロールを自動作成します。

環境一覧ページで作成したCloud9インスタンスを選択し、Openリンクをクリックします。これでCloud9 IDEに接続できました。

ReactJSアプリを構築する前に、インスタンスでNode.js 12.x以上、npm 6.x以上が動作していることを確認してください。

ReactはこれらのバージョンでUI構築のパフォーマンスと互換性が最適化されます。

AWS Cloud9上でReactアプリケーションを構築し、ローカルで動作確認します。「~/environment」ディレクトリで「cloud-wanderer-blog」という名前の新しいReactプロジェクトを作成します。次のコマンドを実行してください。

$ npx create-react-app cloud-wanderer-blog
$ cd cloud-wanderer-blog
$ npm start

Reactアプリを起動するには、プロジェクトディレクトリ 「cloud-wander-blog」 に移動し、「npm start」を実行します。

AWS Cloud9では、実行中のアプリケーションへのアクセスにlocalhostを使用しません。代わりに、Cloud9 IDEのプレビュー機能を利用します。

AWS Cloud9 IDEの上部メニューから Preview > Preview Running Application を選択します。新しいタブが開き、実行中のReactアプリが表示されます。

GitHubアカウントにログインし、画面右上の「+」ボタンから「New repository」を選択します。このリポジトリにReactアプリケーションのファイルと設定一式を保存します。ここでは新しいリポジトリにcloud-wandererという名前を付けました。

「Add a README file」にはチェックを入れないでください。Cloud9でReactをインストールした際にREADMEファイルがすでに作成されています。

Cloud9上のReactアプリケーションを、GitHubの新しいリモートリポジトリへアップロードします。GitHubから直接ファイルを追加する方法と、Cloud9インスタンス上でGit CLIを使う方法のどちらでも構いません。

ファイルアップロードの手順は、こちらのGitHubドキュメントを参照してください: https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository

注意点として、Cloud9でローカルのGitリポジトリを初期化したときには「master」ブランチが作成されました。リモートのGitHubリポジトリと整合性を保ち、今後の変更にも備えるため、ローカルブランチ名を「master」から「main」に変更しました。「master」から「main」への移行は、よりインクルーシブな表現を広めようとする業界全体の取り組みの一環です。

Cloud9上のステージング環境が整ったので、続いてAWS Amplifyに本番環境を構築します。Amplifyアプリのセットアップにあたり、Cloud9インスタンスの「~/home/ec2-user」からAmplify CLIをインストールしました。Amplify CLIがファイルやAWSマネジメントコンソールへのURLリンクを開けるようにするため、xdg-utilsもあわせてインストールしています。

$ cd
$ sudo yum install xdg-utils -y
$ npm install -g @aws-amplify/cli

ローカル環境でAmplify CLIを使うには、AWSアカウントに接続するための設定が必要です。これには「amplify configure」を使用します。表示されたリンクをクリックしてAWSコンソールにサインインしてください。

Cloud9のターミナルに戻り、AWSリージョンを指定します。ここではeu-west-1リージョンを選択しました。

続いてAmplify CLIからIAMユーザーの作成を求められます。表示されたユーザー作成リンクをクリックすると、IAMユーザー作成ページが開きます。User nameを入力してNextを選択します。ユーザー名は任意ですが、ここでは「amplify-cli-admin」とします。Nextボタンをクリックしてください。

Attach policies directlyを選び、Permissions policyとしてAdministratorAccess-Amplifyを指定します。

Reviewページで内容に問題がないことを確認し、Create userを選択します。

ユーザー一覧ページに遷移するので、作成したユーザーを選択します。ユーザー詳細ページでSecurity credentialsタブを開き、Access keysまでスクロールしてCreate access keysを選択します。

ユースケースにはCommand Line Interface (CLI)を選択し、警告内容を確認してNextを選択します。

IAMユーザーのアクセスキーを含むCSVファイルをダウンロードし、安全な場所に保管してください。

Cloud9コンソールに戻り、Enterキーを押します。Access keyとSecret access keyの値を入力し、プロファイル名はデフォルトのままにします。これで、選択したリージョンと認証情報を含むAmplify CLIの設定が完了しました。

「amplify init」コマンドを実行して、新しいAmplifyプロジェクトを作成します。これでReactアプリケーションがAmplify向けにセットアップされます。Amplifyはcloud-wanderer-blogディレクトリの内容に応じてデフォルト設定を提案します。「Y」を押して提案を受け入れるか、「N」を押して任意の設定を指定してください。

$ cd ~/environment/cloud-wanderer-blog/
$ amplify init

認証方法にはAWS Profileを選択し、前のステップで作成したdefaultプロファイルを指定します。あるいはAccess Keysを選び、Access KeyとSecret Access Key IDを手入力することもできます。

Amplifyコンソールに移動し、Amplify CLIからデプロイされたAmplifyアプリを確認します。

続いてAmplifyアプリをGitHubリポジトリと連携させます。これによりCI/CDの構築が一気にシンプルになります。

Amplifyコンソールで、対象アプリのhosting environmentタブを開きます。

AmplifyにGitHubリポジトリへのアクセスを許可し、対象のリポジトリとブランチを追加します。

Build settingsで環境として「dev」を選択します。Amplifyがリソースにアクセスするための IAMロールを作成してください。Amplifyはデフォルトのビルド設定を自動検出します。設定を変更したい場合は、Yamlスクリプトを直接編集できます。

設定内容を確認したら、Save and deployをクリックしてアプリケーションをデプロイします。

プロビジョニング、ビルド、デプロイには数分ほどかかります。

完了すると、エンドポイントのリンクからAmplifyアプリケーションにアクセスできるようになります。

次に、継続的デプロイの動作を確認します。このステップでは、ReactのトップページであるApp.jsを編集し、別ページへのリンクを追加しました。ローカルでプレビューして、変更内容を確認しています。

Cloud9上のGit CLIで変更をGitHubリポジトリにプッシュすると、AWS Amplifyがその変更を自動的に検知し、新たなビルドとデプロイを開始しました。

完了したらブラウザでAmplifyアプリを再読み込みし、変更が反映されているか確認します。

VISIT Cloud Wanderer BLOGのリンクから新しいページへ遷移できるようになりました。

Webサイトの表示速度を高めるうえで、Amazon CloudFrontの活用は欠かせません。CloudFrontはコンテンツをAWSのエッジロケーションにキャッシュし、ユーザーへ高速に配信します。

CloudFrontはAmplifyから、S3をオリジンサーバーとして追加できます。ただしこの方法には注意点があります。Amplifyコンソールから追加するとリソースがAWS管理アカウントにデプロイされるため、CloudFrontディストリビューションを変更できません。

もうひとつの方法として、Amplify CLIからCloudFrontをデプロイする手段があります。

「amplify add hosting」コマンドは、静的コンテンツをキャッシュするためのS3バケットとCloudFrontディストリビューションを構成します。これらのリソースは自分のAWSアカウントから直接アクセス・管理できます。

「amplify add hosting」コマンドを実行し、Amazon CloudFront and S3を選択して、S3バケットの名前を入力します。

「amplify publish」を実行して変更をプッシュします。これによりビルド成果物と静的コンテンツが新しいS3バケットにアップロードされ、CloudFrontがエッジロケーションから静的コンテンツを配信して読み込み時間を短縮します。

AWS CLIを使うと、新しく作成されたS3バケット内のオブジェクトを一覧表示できます。

$ aws s3 ls s3://cloud-wanderer-bucket-dev - region eu-west-1

CloudFrontとS3をデプロイしたことで、Amplifyディレクトリに新しい設定が追加されます。これらの変更はリモートのGitHubリポジトリにコミットしてプッシュしてください。

Curlを使ってCloudFrontが静的コンテンツをキャッシュしているかを確認します。

Curlの出力からx-cacheヘッダーをチェックします。「Hit from cloudfront」と表示されていればCloudFrontがコンテンツをキャッシュしている状態、「Miss from cloudfront」であればまだキャッシュされていない状態です。

初回アクセスで「Miss from cloudfront」が表示されても問題ありません。コンテンツは少なくとも一度アクセスされて初めてキャッシュされる仕組みです。

デフォルトのAmplifyエンドポイントは https://main.d335ddgrzlw9s5.amplifyapp.com/ のような形式になっています。

Amplifyアプリへのアクセスをわかりやすくするため、カスタムドメインを設定します。

このステップでは、Amplifyアプリにドメイン「cloudwanderer.life」を追加します。このドメインはGoDaddyで取得しました。

Route 53コンソール（https://console.aws.amazon.com/route53/）を開きます。

Hosted Zonesをクリックし、Create Hosted Zoneを選びます。ドメイン名を入力してCreateをクリックします。ホストゾーンを作成すると、Route 53が自動的に4つのネームサーバーを割り当てます。

ドメインを取得した管理画面（GoDaddyやGoogle Domainsなど）で、DNSをRoute 53のネームサーバーに更新します。これでRoute 53がドメインのDNSを管理するようになります。

なお、世界中のDNSサーバーに設定されているTTL（Time to Live）の関係で、DNSの伝播がインターネット全体に行き渡るまで最大48時間ほどかかる場合があります。

Amplifyコンソールから、カスタムドメインcloudwanderer.lifeを使ってAmplifyアプリケーションを配信できるようになります。

Amplifyコンソールの左メニューでDomain Managementをクリックし、続いてAdd Domainボタンをクリックします。

ドロップダウンメニューにRoute53でホストしたドメインが表示されます。これを選択し、Configure domainをクリックします。

Amplifyはドメイン所有権を確認するため、Route53にCNAMEレコードを作成します。

これでAmplifyアプリにドメインが設定されます（5〜20分ほどかかります）。

完了すると、カスタムドメインからAmplifyアプリにアクセスできるようになります。