React + Lambda + S3を使って簡易掲示板を作ってみた③〜デプロイ・CloudFront設定〜

Reactで簡易掲示板を作ってみました。その時の手順を解説します。

Ishiguro Suguru

前回の記事の続きです。

React + Lambda + S3を使って簡易掲示板を作ってみた①〜バックエンド実装〜

React + Lambda + S3を使って簡易掲示板を作ってみた②〜フロントエンド実装〜

  1. バックエンド実装
  2. フロントエンド実装
  3. デプロイ・CloudFront設定

最後に今まで作成したフロントエンドとバックエンドを接続してみましょう。

システム構成のおさらい

今回利用するAWSリソースは以下のとおりです。

  • CloudFront: API GatewayとS3を参照。
  • API Gateway: CloudFront経由でAPIを呼び出す。
  • Lambda: API Gatewayから呼び出されてS3バケットにデータを保存。
  • S3: Reactデプロイ用/投稿データ保存用/静的ページ(HUGO)保存用のバケットを作成。

静的ページ(HUGO)保存用のバケット作成はReactのみで掲示板などWebサイトを実現するのであれば不要です。 今回はもともとあるWebサイトにiframeタグを埋め込みReactアプリを呼び出すことを前提としています。

手順概要

手順概要は以下のとおりです。

  1. 用途別にS3バケット作成。
  2. バケットにReactビルドデータをアップロード。
  3. API Gateway, Lambda作成。
  4. CloudFrontディストリビューション作成・設定。

1,2については割愛します。 3については前々回の記事で作成済みのため、4のCloudFrontディストリビューション作成・設定について紹介します。

CloudFrontディストリビューション作成・設定

ご存じの方も多いと思いますがCloudFrontはCDN(Contents Delivery Network)の役割を果たすAWSのサービスです。

CloudFront側でサーバなどから配信されるデータをキャッシュしておくことでユーザーへのデータ配信を高速化できます。

データ配信元のリソースは一般的にオリジンサーバと呼ばれAWSの場合はEC2やS3, API Gatewayなどがオリジンサーバに該当します。

今回はデータ配信元のリソースが「S3×2, API Gateway×1」といった構成のため振り分けるための設定を紹介します。

CloudFrontディストリビューション作成

まずはCloudFrontディストリビューション作成を行います。 AWSマネジメントコンソールからCloudFrontを選択して管理画面を開きます。

前提としてS3バケットおよびAPI Gatewayは作成済みであるものとします。

以下画面の"Create Distribution"をクリックします。

Webにある"Get Started"をクリックします。

CloudFrontディストリビューションの設定画面が表示されます。 設定が必要な部分について説明します。

①Origin Settings

Origin Settingsは配信元であるオリジンサーバの指定を行います。 まずは静的ページを配置するS3を指定しておきましょう。(設定は後で変更可能)

  • Origin Domain Name: カーソルを合わせるとプルダウンでS3などが表示。対象のS3を指定。
  • Origin ID: 上記項目を設定すると自動で入力される。任意の値を指定。
  • Restrict Bucket Access: S3バケットへのアクセスをCloudFront経由に制限。セキュリティ上"Yes"が望ましい。
  • Origin Access Identity(OAI): S3バケットにアクセスするための特殊なユーザー作成。既存のOAIも使用可能。
  • Grant Read Permissions on Bucket: S3バケットポリシーを更新してOAIのアクセス権限を付与。“Yes"でCloudFront作成時に更新。

②Default Cache Behavior Settings

CloudFrontへのアクセスがあった際の動作を定義します。

  • Viewer Protocol Policy: ブラウザなどのViewerからCloudFrontへのアクセスプロトコルを指定します。 ブラウザがHTTPリクエストだった場合にすべてHTTPSとなるように"Redirect HTTP to HTTPS"を選択しておきます。

③-1 Distribution Settings

最後にCloudFrontディストリビューションの設定を行います。 ここでは使用するスペック(価格クラス)などのCloudFront自体の設定を行います。

  • Price Class: どのエッジロケーションを使用するか指定。今回は海外向けのサイトではないため"Use U.S., Canada, Europe, Asia, Middle East and Africa"を選択。
  • Altenate Domain Names: CNAMEを指定。CloudFront作成時に自動的に割り当てられるURL(Domain Name)ではなく、自身で取得したドメインのURLを割り当てたい場合に指定。 設定する場合は作成後にRoute 53で設定が必要。
  • SSL Certificate: SSL証明書の利用設定。CNAMEを使用して自身で取得したURLを使用する場合には"Custom SSL Certificate"を選択して証明書を指定する。 証明書はAWSのCertificate Managerを使用して作成可能。(“Request or Import a Certificate with ACM"をクリックして作成。今回は割愛。)

③-2 Distribution Settings

  • Default Root Object: CloudFrontのルートURLにアクセスした時、参照するオブジェクト(ファイル)を指定。

すべて設定後"Create Distribution"をクリックするとCloudFrontディストリビューションが作成されます。

作成は時間がかかるため注意してください。(20~30分くらい) アクセスはできますがしばらく時間が経過しないとなぜかコンテンツが表示されません…

待っている間に残りの追加設定を行っていきます。

Route 53でレコード登録

今回は省略しますがCNAMEでアクセスする場合にはRoute 53でレコード登録が必要です。 自身で取得したドメインにてアクセスする場合は設定してください。

オリジンサーバの追加設定

次に残りのS3バケットとAPI Gatewayに接続するためオリジンサーバの追加設定を行います。

CloudFrontディストリビューション作成後に一覧からIDをクリックします。

“Origins and Origin Groups"タブをクリックして"Create Origin"をクリックします。

①ReactビルドファイルをアップロードしたS3

追加のオリジンサーバ設定画面が開きます。

今度はReactビルドファイルをアップロードしたS3を指定します。 CloudFrontディストリビューション作成時と同様に項目を設定して"Create"をクリックします。

②API Gateway

次にAPI Gatewayをオリジンサーバとして追加します。

追加するためにはAPI GatewayのURLが必要となるためAPI Gatewayの管理画面からURLを確認してコピーしましょう。

URLは「管理画面>対象API Gateway>ステージ>ステージ名をクリック」で確認できます。(以下画面参照)

S3を追加した時と同様に"Origins and Origin Groups"タブを開きオリジンサーバの追加設定を行います。

Origin Domain NameにコピーしておいたAPIのURLを入力するとAPI用の設定項目が表示されます。 なおOrigin Domain NameにはURLの「https://」を削除して入力してください。

残りの項目は以下の通り設定して"Create"をクリックします。

  • Origin Path: Origin Domain Nameに応じて自動入力。
  • Origin ID: Origin Domain Nameに応じて自動入力。任意の値を設定。
  • Minimum Origin SSL Protocol: TLSv1.2を指定。
  • Origin Protcol Policy: HTTPS Onlyを指定。(画面上はHTTPが選択されているが必ずHTTPSを指定)

以上でオリジンサーバの登録は完了です。 最後にオリジンサーバへの振り分け設定を行います。

オリジンサーバの振り分け設定(Behavior)

最後に追加したオリジンサーバの振り分けおよびキャッシュ設定を行います。

対象のCloudFrontディストリビューションを選択して"Behaviors"タブ内の"Create Behavior"をクリックします。

①ReactビルドファイルをアップロードしたS3

Behavior設定画面が開きます。 まずはReactビルドファイルをアップロードしたS3の参照設定を行います。

“Origin or Origin Group"で対象S3のオリジンサーバを指定、 “Viwer Protcol Policy"をHTTPの場合はリダイレクトさせる設定にするところはCloudFrontディストリビューション作成時と同じです。

ポイントは"Path Pattern"を指定するところです。 CloudFrontディストリビューション作成時はデフォルト設定(*)になっていましたが、別のパスに振り分けるため"Path Pattern"を指定する必要があります。

振り分けたい任意のパスを指定すればOKですが、注意点としてオリジンサーバのパスと揃えておく必要があります。

たとえば以下の画面のように”/board/*“と指定した場合は、S3バケット内もこれに合わせてバケット直下に"board"フォルダを作成してそのフォルダ内にビルドしたファイルをアップロードしてください。

②API Gateway

次にAPI Gatewayの設定です。

  • Path Pattern: APIのパス指定。
  • Origin or Origin Group: API Gatewayのオリジンサーバ指定。
  • Viwer Protcol Policy: “Redirect HTTP to HTTPS"指定。
  • Cache and origin request settings: “Use legacy cache settings"を指定。本アプリはHTTPヘッダで転送するものはないため"Cache Based on Selected Request Headers"は"None"を選択。
  • Object Caching: “Customize"を指定し、TTLの値を0に設定。

この辺りの設定の違いによる動きは以下のWebサイトで詳しく解説されているため環境に合わせて設定してください。

Amazon CloudFront でキャッシュキーとオリジンリクエストポリシーによる管理が可能となりました | Developers.IO

  • Query String Forwarding and Caching: “Forward all, cache based on whitelist"を指定。APIはURLに付与するクエリストリング"sort"を使用するためwhitelistに追加。
  • Query String Whitelist: whitelistで指定したクエリストリングをキャッシュ。

補足:存在しないページへのリクエストをリダイレクトさせる設定について

以上でCloudFrontの設定は完了ですが補足として存在しないページにリクエストがあった場合に任意のページへリダイレクトさせる方法を紹介します。

設定は簡単でCloudFrontディストリビューション設定画面の"Error Pages"タブで以下の画面のように設定します。

この例ではブラウザからのリクエストで403or404エラーが発生した場合、S3に用意しているエラーページ「404.html」にリダイレクトさせて表示できます。

ReactなどのSPAを利用する場合はアプリ側でルーティングしていると思いますのでリダイレクトさせるページを「index.html」などに設定すればOKです。

最後に

CloudFrontを使えば簡単にリソースの振り分けができるため、使用したことがない方は是非使ってみてください!

今回説明しきれなかったですがCloudFrontはオブジェクト指定のないリクエストはエラー扱いとなってしまいます。 たとえば以下のサブディレクトリにあるHTMLファイルにアクセスした場合、オブジェクトを指定しないとエラーになります。

  • https://sample.com/sub/ > NG(CloudFrontのError Pages設定をしている場合はそのページにリダイレクト)
  • https://sample.com/sub/index.html > OK

この辺りの制御はLambda Edgeを使用すれば解決できるためまた別の機会に紹介したいと思います!

comments powered by Disqus