S3だけでホスティングする場合
S3だけの場合は簡単でホスティングしたいhtmlをS3に配置し、ホスティングの機能をONにしてインデックスドキュメントを選択するだけです。
S3のプロパティからStatic website hostingを選択し、インデックスドキュッメントを入力します。これだけでS3での静的サイトのホスティングが完成します。

CloudFrontを使ってホスティングする場合
CloudForntを使う場合はS3のホスティング機能を無効にしておく必要があります。
CloudFrontの設定
ホスティングする場合はwebのGet Startedを選択します。

Origin Domain NameにS3を選択します。

キャッシュの設定は静的サイトの場合デフォルトの設定で問題ないです。Cache Based on Selected Request HeadersはNoneにしておくとキャッシュを活用できます。
Distribution SettingはWAF(Web Application Firewall)の設定やドメインの設定ができます。ここの詳細は別途書きたいと思います。

後の設定は特に何もいじらなくて大丈夫です。最後にCreate Distributionを押して完成です。
CloudFrontのキャッシュ削除
S3にアップロードしたファイルを更新した場合はクラウドフロントのキャッシュを削除しないといけません。削除はタブのInvalidationからできます。

サンプルのようにファイルを指定もできますし、*を使って全てのファイルのキャッシュを削除することもできます。以前はキャッシュの削除に10分程度かかっていましたが、今は1,2分で完了するように改善されています。

まとめ
CloudFrontとS3を使うと静的サイトのホスティングがものすごく簡単にできます。サーバーを用意しなくていいので十分な負荷にも耐えられるし、世界中のエッジロケーションを使うことで世界中どこからアクセスしても遅延なく配信できるのが素晴らしいです。
CloudFrontは静的サイトだけでなくELBと連携することで動的サイトも構築できます。SPAの構築も慣れれば簡単にできるので今後紹介したいと思います。
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す