今更ですが、サーバーを使用せず、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
  

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

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

▶ 詳細AWS Document

• 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」

S3へファイルをUP

• index.htmlやその他cssファイル、jsファイル、必要な画像を配置する
• 僕は、s3アップロード用のいいライブラリがあまり見つからなかったので、自作しました（/post/node-upload-s3/ ）。
  

まとめ

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

参考

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