What's?

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

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

DEVELOPMENT

web
js
aws
s3
cloudfront
ACM
route53

今更ですが、サーバーを使用せず、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@yourdomainname
  • hostmaster@yourdomainname
  • postmaster@yourdomainname
  • webmaster@yourdomainname
  • admin@yourdomainname

▶ 詳細AWS Document

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

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

まとめ

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

参考

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.