よくAWSに触れるものです。
webページでも静的なページはどこかにホスティングしたいと考えるはず
静的コンテンツの配置に悩んだらまずS3を採用してみましょう。
今回はS3にアップロードした静的コンテンツにCloudfront経由で安全にアクセスするやり方を書いていきます。
構成
以下のような構成を取ります。
S3のバケットポリシー次第でパブリックでアクセスすることもできますし、他のAWSサービスからもアクセスすることはできますが、今回は安全にHTTPSでS3バケット内のコンテンツにアクセスできるような構成にします。
ユーザーが指定のFQDNを叩くとRoute 53でCloudfront Distributionのドメイン名に名前解決されます。
この際、Route53のレコードはCNAMEでもAレコードのエイリアスでもどっちでも大丈夫です。
CloudfrontにはACM上にインポートした証明書が紐付いています。OAI(Origin Access Identity)に基づいて安全にS3のコンテンツにアクセスすることができるわけです。
あとはレスポンスでそのS3内のコンテンツをユーザーに返します。
以上の構成を詳しく見ていきましょう。
手順
1. S3バケットにコンテンツをアップロード
まずはS3にサンプルをアップロードしましょう。
今回はS3にtest-cloudfront-v1という名前のバケットを作成します。ちなみに同名のバケット名が世の中に存在していると作れません。
そこにindex.htmlをアップロード。
一回、テストのためにパブリックアクセスを許可して中身を確認しましょう。
ブロックパブリックアクセスでパブリックアクセスを許可します。
次にバケットポリシーを編集。principalはワイルドカードを使用します。
アップロードしたものを選択してURLを叩くと中身がブラウザ上で見れます。
1.の手順は以上です。
2. Amazon Certificate Manager に証明書を保存する。
ACMのページに行きましょう。
証明書のプロビジョニングから今すぐ始めるを選択。
証明書のインポートを選択。
証明書の本文とキーに自分で取得した証明書(xxx.crt)とキー(xxx.key)の中身をコピーアンドペーストして完了。
終わったらドメイン名などがあっているかの確認をしましょう。
3. Cloudfrontの設定
続いてCloudfrontでDistributionを作成します。
SSL Certificateで先程の証明書を選択します。
続いてOriginの設定をするのですが先にOAIを作成しておきましょう。
S3コンテンツにHTTPSで安全にアクセスするためにはこの設定が必要です。
コメントのところにFQDNを追加しましょう。
OAIが作成できたら先程のDistributionからOriginの設定に行きます。
Origin Domain NameでS3のコンテンツを指定します。
ここでのポイントはRestrict Bucket AccessOAIの設定が出てこないことです。OAIの設定が出てきたら先程作ったものを選択しましょう。
これでcloudfrontの設定は完了です。
これではまだS3のコンテンツにはアクセスできません。
4. S3バケットのバケットポリシーを編集する。
S3バケットのページに戻ります。
バケットポリシーの編集でprincipalのところを上図のように変えます。
CloudFront Origin Access Identityのあとの値はOAIのIDです。
以上でCloudfront DistributionのDomain Nameを叩けばアクセスできますが、せっかくなのでRoute53の設定もしてしまいましょう。
5. Route53の設定
Route53のページに行きます。
以下のようにレコードを追加。
ここではAレコードのエイリアスにしています。
CNAMEで登録しても動作は変わらないですが、名前解決の速さでエイリアスを選択しました。
AレコードとCNAMEの違いは今度書きます。
さてこれで今回の設定はすべて完了です。
Route53で登録したFQDNを叩くとS3バケットのコンテンツがブラウザで見れると思います。
まとめ
結構、基礎的な内容でしたね。
今回のポイントはS3バケットのバケットポリシーとCloudfrontのOAIでした。
ここの設定を間違えるとS3コンテンツにCloudfront経由でアクセスでないので注意が必要です。
※参考
・公式ドキュメント
docs.aws.amazon.com
