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

目次

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



事前準備

S3にバケット作成

Cloudfrontの設定

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の設定

Route53


S3へファイルをUP

まとめ

参考

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus