サーバレス AWS s3 + cloudfront + route53 + ACM で静的website ホスティング のメモ

今更ですが、サーバーを使用せず、node環境でコンパイルした静的ファイルを、AWS上で公開する方法のメモです。
静的コンテンツの配信性能を高めるために、cloudfront経由でs3にアクセスする正しい方法と、route53でドメイン管理、ACMでhttps対応をするなど、サーバーレスでのAWS上のwebサイトの公開方法をメモしておきます。

事前準備

  • AWSアカウント
  • 公開するファイル(html,js,cssなど)を用意
  • 公開用のドメインを取得済み

S3にバケット作成

  • Consoleより S3へ
  • s3画面より、バケットを作成し、バケット名を登録
  • あとは、基本そのままで「次へ」
  • パブリックの設定にはしないこと(特定のCloudfront distribution経由のみからアクセスさせる)

Cloudfrontの設定

  • Consoleより Cloudfrontへ
  • Cloudfront画面より、「Create Distribution」
  • Webとして、Get Start

cf1

  • Restruct Bucket をYESにし、このRestributionからのみアクセスできるようにidentifyを作成し、s3のCROSの設定を反映させる

cf2

  • 公開するドメインをAlternate Domain Namesに指定
  • SSL Certificateは、ACMにてcertificateを作成して指定する
  • ACM作成時に、ドメインの所有権を確認するために、通常Emailでの認証を選択しますが、下記のアドレス宛に確認メールが飛ぶので、いずれかのアドレスで受信できるよに事前に設定しておく必要がある
administrator@your_domain_name
hostmaster@your_domain_name
postmaster@your_domain_name
webmaster@your_domain_name
admin@your_domain_name

詳細:https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/gs-acm-validate-email.html

cf3

  • Default Root Objectに index.html等入れておく
    ここを設定しないと、https:xxxxxxx.com/ と言う形でファイル名を省略してアクセスした際に、cloudfrontが判断できなくなる
  • これで 「Create Distribution」

※ 一覧から「Enable」になるまで少し時間がかかります。尚、「Enable」になっても、Cloudfrontの「Domain Name」にアクセスしても、URL上S3のURLにリダイレクトされることがありますが、時間が経てば解決しますので、次の設定をして、気長に待ちましょう。

Route53の設定

  • Consoleより Route53へ
  • Hosted Zoneが未登録(新たにドメインを登録する)場合は、「Create Hosted Zone」から「Domain Name」を入力して、作成する
  • 該当Domainを選択し「Create Record Set」

Route53


S3へファイルをUP

まとめ

  • 設定が反映されるまでにしばらく時間がかかりますので、気長に待ちましょう。その後、登録したドメインにアクセスしてみます。
  • httpでアクセスした際、httpsにリダイレクトするかどうかも確認します。
  • ClourdFrontのcacheはデフォルトで24時間なっていますので、動的部分が多いコンテンツの場合は、設定の変更もしくは、Create Invalidationにてcacheをクリアする必要があります。
  • cloudfrontの反映に時間がかかるので、気長に待ちましょう。思った通りの動作にならず、設定を間違えているのかと思いがちですが、大丈夫です。

参考

CloudFront + S3 特定バケットに特定ディストリビューションのみからアクセスできるよう設定する
S3の特定バケットへのアクセスを特定のCloudFrontからのみ許可する
CloudFrontでS3のウェブサイトをSSL化する