フロントエンドエンジニアがCloudFrontを構築してみた
SPAを自分でホスティングしたい
AWSはまだ初学レベルですが、Amplifyによるホスティングを通してSPAを簡単に公開できることに味をしめていました。
次のステップとして、もう少しコストを抑えた一般的な構成を学びたいと思っていましたが、ちょうど業務でS3・CloudFrontを用いての実装を試すことができたので、備忘録がてら記録しておきます。
使用したAWSサービス
- S3
- CloudFront
CloudFrontの疎通
S3バケットを作成する
- S3へ移動する
- 「バケットを作成」を選ぶ
公開用バケットということで、ここでパブリックアクセスを触ってしまいそうになりますが、今回はCloudFrontで配信を行うため、まだ権限はいじりません。
ファイルをアップしておきます。
（適当な index.html ファイルでOK）
<html> <head> <meta charset="utf-8"/> </head> <body> テストページ </body> </html>
CloudFrontの設定
次は本丸のCloudFrontの設定です。
- CLoudFrontへ移動する
- 「ディストリビューションを作成」を選ぶ
S3を配信するための設定をおこなっていきます。
ディストリビューションの設定には大まかに以下の項目が含まれます。
オリジン
呼び元となるリソース、今回はS3となる。
- 「オリジンドメイン」にS3を選択する。（プルダウンで選択可）
- S3内のディレクトリ下を指定する場合は「オリジンパス」も指定する。こちらは空白可。
- 任意の「名前」を入力。（プルダウン選択時に自動入力される）
- S3バケットアクセスにて、OAIを使用する方を選択する。
ビヘイビア
CloudFrontにアクセスがあった際のルーティングごとの振る舞い。 ここで指定のルートにS3を割り当てる。
- 設定は任意ですが、HTTPへのアクセスをHTTPSに転送してくれるのが便利なので設定しました。
- また、S3へのアクセスはGET、HEADに限定するのが安全です。
キャッシュキーとオリジンリクエスト
キャッシュを有効にさせる設定や、ルーティング解決時の関数設定などがおこなえる。
- 今回はキャッシュの設定のみおこないます。
- ChachingOptimaizedがS3では推奨されています。
- ファイル更新時にキャッシュクリアの処理が必要になります。
設定
最後に、設定という項目下を確認します。
- 「デフォルトルートオブジェクト」にindex.htmlを設定します。
- こちらを忘れると、ドメイン直下が疎通しません。
動作確認
作成が完了すると、以下のようなメニューが表示されます。
- 「ディストリビューションドメイン名」が自動で割り当てられ、こちらで疎通が確認できます。
- ここまでにおこなった設定は各タブで見直すことも可能です。
こちらが実際のURLの実行結果になります。
疎通成功です！
おまけ
キャッシュ削除
S3ファイルを更新した際、「キャッシュ削除」の実施により迅速な確認がおこなえます。
- 全部のキャッシュをクリアしたい場合は
/*を入力。- 実行後、若干の待ち時間があります。
所感
意外にも、CloudFrontを用いることでバケット設定をいじるよりもシンプルに公開ができたように思えます。
AWSへの接し方としては単独のサービスで解決しようとせず、適切な組み合わせを把握した上で実装することが重要に感じました。
独自ドメインの紐付け、NotFoundルーティングへの対応などもここでおこなえるので、そちらも追々書き留めていこうと思います。
