AWS-S3を使った静的Webサイトホスティング～設計編～
はじめに
このwebサイト記事は、AWS S3に格納したファイルをCloudFront経由でHTTPS配信することで成り立っています。
本記事にて、このWebサイトの作成における設計思想について説明します。
この記事でわかること
AWSを使いながら、静的なWebサイトをHTTPS配信する設計がわかります。
AWS S3の静的Webサイトホスティング機能だけでは実現できないため、CloudFront + ACM を使って実現しています。
全体の流れ
AWS-S3を使った静的Webサイトホスティング～設計編～ ★イマココ！
AWS-S3を使った静的Webサイトホスティング～構築編～
設計方針（要件定義）
何事を始めるにしてもまずは設計方針を立てましょう。今回は下記のような要件としています。
- AWSの勉強がしたいので、何かしらのAWSサービスを利用する
- サーバーのプロビジョニング（＝用意）やWebサイト運用保守のコストを最小限にしたい
- webサイトは静的なコンテンツしか含まない。
- webサイトは24/365で稼働させる
- WebサイトはHTTPS接続とする
- 独自ドメインを取得して「自分のポートフォリオサイト」としても活用したい
- WordPressなどを使ってサイト作成の手間も簡略化したい（直感的に作成したい）
「AWSの勉強がしたい」というモチベーションは大前提として作っていきます。
また、基本設計書などの堅苦しいドキュメントは作りません。作っていたら時間がかかってモチベが下がってしまうので…。
最低限の設計だけ書いて、さっさと構築することにします。
設計
webサイトコンテンツ配信サービスの検討
まずはインフラを含めた利用サービスを検討します。
静的Webサイトであれば、レンタルサーバー＋WordPressで構築したり、GitHub Pagesで手軽にwebページ作成、なんてこともできそうですが、設計方針の 0. にあるように、AWSのサービスを使うことを前提とします。
AWSでWebサイトを立ち上げるとなると、ぱっと思いつくのは下記でしょうか。
EC2の+Linuxサーバー上にLAMP環境を構築 + サーバー公開セキュリティ対策
S3の静的Webホスティング機能を利用 + CloudFront配信
設計方針1.にある、「開発・運用保守どっちにしてもとにかくコストを落とす」という要件から、EC2サーバーを用意するのはやめました。
AWSの無料枠がないと、最小構成のt2.microでも月額1500円くらいするんです。
S3であれば高可用かつ24/365で利用可能なので要件3.を満たせますし、課金は利用時間ではなく、アクセスとデータ容量に従量課金されるので、しがない個人サイトであればその金額は微々たるものです。
要件2.より、静的Webサイトなので、S3で十分事足ります。何か動的なコンテンツが必要になれば、別途Lambda使うなりして実装すればよさそうです。
Amazon S3を使用して静的ウェブサイトをホスティングする - AWS userguide -
…が、次節で説明しますが、この機能はHTTPSに対応していませんのでひと工夫必要になります。
セキュリティの検討
今回、要件4.にHTTPS化の要件がありますが、S3静的webサイトホスティング機能はHTTPS化未対応のため、S3単体では実現することができません。
HTTPS化対応のために必要な証明書をACM (AWS Certificate Manager)から払いだすものとして、S3への直接アタッチもできません。
そこで、S3の前段にCloudFrontを置いてあげて、ACMから払い出した証明書をアタッチしてあげることで、CloudFrontまでの通信のHTTPS化を実現します。
S3バケットに対しては「特定のCloudFrontからのリクエストのみ許可する」設定を行い、CloudFrontに対しては、OAC (Origin Access Control)と呼ばれる、「このオリジン（=S3 バケット）の中身を取得してよい」という権限を与えることで、構成を実現します。
Amazon CloudFrontとはなんですか？ - AWS Developer Guide -
Amazon S3 オリジンへのアクセスを制限する -AWS Developer Guide -
AWS Certificate Manager とは - AWS userguide -
下図のようなイメージになります。
この構成であれば、ユーザーはS3バケットに直接アクセスする必要がないので、S3の「パブリックアクセスブロック」機能をオンにすることができ、設定ミスによる不用意なS3バケットの公開を防ぐ安全装置となります。
さらに言えば、CloudFrontに対しては何もしなくてもAWS Shield Standardが適用され、L3/L4レイヤのDDos攻撃などのインフラ攻撃に対する保護もつけることができ、まさしく一石二鳥になっています。
AWS Shield Standardの概要 - AWS developer guide -
独自ドメインの検討
「自分のサイト」であることを象徴する独自ドメインですが、取得にはお金がかかります。
有名どころだとお名前.comだと思いますが、AWSはRoute53の機能の中に独自ドメイン取得が可能なので、今回はこちらを利用しようと思います。
いろんなTLD (Top Level Domain) がありますが、新規取得/継続コストが一番安価な".com"でいいでしょう。
ドメインは年間契約になるようで、1年で$16(≒￥2560)かかるようです。取得した時点でお金が発生するので、気を付けましょう。
webコンテンツ作成方法の検討
要件6.にあるように、Webサイト作成は、https直書きではなく何かしらのツールを使い、なるべく手を抜きたいわけですが、EC2を利用しないのでWordPressの利用ができません。
Claude先生と相談して、今回はHugoという静的Webサイトジェネレータを利用することにしました。
markdown記法でサイトを執筆してあげると、htmlに変換してwebサイトページを作ってくれる優れものです。
markdown記法は昔馴染みがありますし、やりたいことは調べれば何でも出てきそうなので採用しました。
（エンジニアらしくやりたければ、Next.jsとかありかなぁとか思いましたが、学習コストがかかるので今回は見送りました。機会があればやります。）
構築Phaseへ
これで要件0.～6.のすべてについて考慮が終わりました。
設計が終わったので構築へ進みます。続きは下記へ。
ここまでも、これからも、Claude先生の力を借りながら作っていきます。