#03：AWS-S3を使った静的Webサイトホスティング～インフラ構築編～

2026年9月22日 | #aws #構築

はじめに

このwebサイト記事は、AWS S3に格納したファイルをCloudFront経由でHTTPS配信することで成り立っています。

本記事にて、このWebサイトの作成におけるインフラ構築ついて説明します。

この記事でわかること

• CloudTrailを有効化し、AWS操作の証跡ログを記録する方法

• Route53で独自ドメインを取得し、ホストゾーンを構成する手順

• webサイトのファイルを格納する、セキュアなS3バケット（パブリックアクセスブロック・暗号化・バージョニング）の作成方法

• CloudFront + OAC（Origin Access Control）を使って、S3バケットを非公開のままHTTPS配信する設定手順

全体の流れ

1. AWS-S3を使った静的Webサイトホスティング～設計編～　

2. AWS-S3を使った静的Webサイトホスティング～構築準備編～

3. AWS-S3を使った静的Webサイトホスティング～インフラ構築編～ ★イマココ！

4. AWS-S3を使った静的Webサイトホスティング～webページ執筆環境構築編～

運用コスト

本記事を読み進めて実践するにあたり、下記のAWS利用課金が発生します。ご注意ください。

学習用途であり、可能な限りコストを抑えたい場合は、独自ドメインの取得をしなければ、$1/月くらいで済むと思います。

（独自ドメインを取得しても、1カ月当たりに換算すれば、$2.5=￥400くらいですね。趣味としては安い…！）

構築

前回作成した、adminユーザーにログインし、インフラ構築作業を進めます。

step5. 証跡ログ（CloudTrail）の有効化

証跡ログを有効化しておくことで、セキュリティインシデントが発生した場合の調査の足掛かりにします。

5-1. CloudTrailの管理画面へ移動する

• 画面上部の検索窓に「CloudTrail」と入力し、CloudTrailを開く。

• 画面右上のプルダウンから、リージョン「東京 ap-northeast-1」を選択する。

5-2. 「証跡作成」を開始する

• 左カラム「証跡」をクリックして証跡一覧画面に遷移する。

• その後、右上にある橙色の「証跡の作成」ボタンをクリックする。

5-3. 証跡属性の選択

• 証跡名

  →任意の名前を入力

• ストレージの場所

  →「新しいS3バケットを作成します」を選択

• 証跡ログバケットおよびフォルダ

  →任意のバケット名を入力します（証跡用とwebサイトページ用で異なる名前にする必要があるので注意）

• SSE-KMS暗号化

  →任意でチェックをつける。個人用途であれば不要でもOK

• ログファイルの検証

  →有効化する。　改ざん検知のために利用される。

そのほかの項目は特に設定せず、「次へ」をクリックします。

5-4. ログイベントの選択

• イベント

  →「管理イベント」のチェックボックスをオンにする

• 管理イベント

  →APIアクティビティのうち「読み取り」と「書き込み」のチェックボックスをオンにする

設定ができたら、「次へ」をクリックしてください。

5-5. 確認と作成

• 確認画面が出てくるので、設定した内容を確認して、画面右下の「証跡の作成」をクリックして、証跡を作成する。

• 画面左手の「イベント履歴」から、実際に記録されているかを確認してください。

step6. Route53で独自ドメインを取得する

Route53で独自ドメインの取得を行います。

6-1. Route53管理画面を開く

画面上部の検索バーに「Route53」を入力し、Route53の管理画面を開きます。

6-2. ドメインの登録を開始する

• 画面左カラム「登録済みドメイン」をクリックする。

• 画面右上にある橙色の「ドメインの登録」をクリックして、登録画面に進む。

6-3. ドメインを登録

• ドメインの検索

  →利用したいドメイン名（＝XXXX.com）を入力してから「検索」をクリックし、利用可能かどうかを確認する。

• 検索結果

  →結果を確認し、利用可能であれば、アクション欄で「選択」をクリックする。

  →利用不可であれば別のドメイン名にするか、使用可能なドメイン（TLD違い）から選択する。

利用するドメインが選択できたら、橙色の「チェックアウト」をクリックしてください。

6-4. Secure your brand across other extentions

別のTLDでドメインを取得するか聞かれるポップアップが表示されますが、基本的に不要なので、青字の「Skip」をクリックしてください。

6-5. 料金

ドメインの料金オプションにて、利用したい期間と、自動更新の要否をチェックしてください。

選択が終わったら、橙色の「次へ」をクリックします。

6-6. 連絡先情報

• 自分の連絡先を入力する。

• プライバシーの保護はオンにすることを推奨する。

設定が終わったら、「次へ」をクリックします。

6-7. 注文の確認

登録内容を確認し、利用規約に同意した後、「注文を完了」をクリックして支払いを確定させます。

6-8. ドメインの登録完了

• 登録手続きが開始されると、AWSアカウントに紐づいたメールアドレスにメッセージが届きます。

• 10分ほどすると、ドメインの登録が完了し、「登録済みドメイン」欄にドメイン名が表示されるようになります。

• ドメイン登録完了時に、「[Action Required] Verify your email address」というメールが届くので、メール内のリンクをクリックしてメールアドレス紐づけの有効化を行う。

6-9. ホストゾーンの確認

• 画面左カラムから「ホストゾーン」を選択する

• ドメイン名と同じホストゾーンが表示されることを確認する。

これで独自ドメインの取得は完了です。いよいよ、S3+CloudFrontの環境を用意していきます。

step7. S3バケットの作成

Webサイトページを格納するS3バケットを作成していきます。

7-1. S3管理画面を開く

画面上部の検索バーに「S3」を入力し、S3の管理画面を開いてください。

7-2. リージョンの確認

画面右上のリージョンのプルダウンメニューから「ap-northeast-1（東京）」リージョンを選択してください。

7-3. S3バケットの作成開始

画面左カラムから「汎用バケット」をクリックして、バケット画面に遷移します。

その後、右上の「バケットを作成」をクリックしてください。

7-4. バケットを作成

• AWSリージョン

  →「アジアパシフィック（東京）ap-northeast-1」であることを確認する

• バケットタイプ

  →「汎用」を選択する

• バケット名前空間

  →「グローバル名前空間」を選択する

• バケット名

  →任意の名前を入力する

• オブジェクト所有者

  →「ACL無効（推奨）」を選択する

• このバケットのブロックパブリックアクセス設定

  →「パブリックアクセスをすべてブロック」のチェックボックスをオンにする

• バケットのバージョニング

  →「有効にする」を選択

• デフォルトの暗号化

  →暗号化タイプ：「Amazon S3マネージドキーを使用したサーバー側の暗号化（SSE-S3）」を選択

  →バケットキー：「有効にする」を選択

全て設定できたら、右下の橙色の「バケットを作成」をクリックしてください。

7-5. バケットの正常作成完了

画面上部に、バケット「XXXX」が正常に作成されました　と表示されればOKです。

step8. CloudFrontディストリビューションを作成する

CloudFrontの設定の中で、セキュリティの保護、ACMによる証明書の発行、独自ドメインへのルーティングまですべて設定が可能です。

AWSの構築設定としては、このステップが最後になります。

8-1. CloudFront管理画面を開く

画面上部の検索バーに「CloudFront」を入力し、CloudFrontの管理画面を開いてください。

8-2. ディストリビューション作成の開始

画面左カラムの「ディストリビューション」をクリックした後、画面右上の橙色の「ディストリビューションを作成」をクリックします。

8-3. Choose a plan

• Flat-rate plansを選択する。

• プランは「無料」で十分なので、「Choose 無料」をクリックする。

8-4. Get started

• Distribution name

  →任意の名前を指定する。

• Distribution type

  →「Single website or app」を選択。

• Domain

  →step6で取得したRoute53の独自ドメインを入力し、「check domain」をクリックする。

  →緑の枠で「Domain managed by Route53」と表示されればOK。

8-5. Specify Origin

• Origin type

  →Amazon S3を選択する

• Origin

  →S3 Originの入力欄の右手にある「Browse S3」をクリックする。

  →Select S3 locationポップアップウィンドウで、step7で作成したS3バケットを選択する。

• Settings

  →「Allow private S3 bucket access to CloudFront」のチェックボックスをオンにする。

  →「オリジン設定」は「Use recommended origin settings」を選択する。

  →「Cache settings」は「Use recommended cache settings tailored to serving S3 content」を選択する。

設定ができたら、右下の「Next」をクリックします。

8-6. Enable security

AWS WAFによる基本的なセキュリティ保護はデフォルトで有効になっており、この画面では無効化はできません。

特に設定は不要ですので、右下の「Next」をクリックします。

8-7. GET TLS certificate

事前にACMで証明書を発行していないので、ここで新規に発行することになります。

• Create certificateをクリックする。

一定時間経ってから、「A certificate for XXX.com was created successfully.」と表示されればOKです。「Next」をクリックしてください。

8-8. 設定内容の確認

設定確認画面にて、特に問題がなければ、右下の「Create distribution」をクリックします。

「新しいディストリビューションが正常に作成されました」と画面上部に表示されればOKです。

8-9. Set up DNS routing

• 一般タブの設定の中にある、「代替ドメイン名」の下にある「Route domains to CloudFornt」をクリックする。

• ポップアップしたSetup DNS routing画面にて、「Set up routing automatically」をクリックし、Route53のホストゾーンへ、CloudFrontへのAレコード（AAAAレコード）を登録する。

これでCloudFrontの設定は終了です。最後に念のため、step8-9で登録したDNS routingの確認を行いましょう。

step9. 独自ドメインとCloudFrontの紐づけ確認

9-1. 対象ホストゾーンのレコードをRoute53で確認する

• 画面上部のバーに「Route53」と入力し、Route53の管理コンソールを開く

• 左カラムから「ホストゾーン」をクリックしたのち、「ホストゾーン名」から、step6で作成した独自ドメインをクリックする。

• レコードタブの中に下記が存在することを確認する。

  • レコード名：独自ドメイン名

  • タイプ：A

  • ルーティングポリシー：シンプル

  • エイリアス：はい

• 画面左「レコードの詳細」にある、「レコードを編集」をクリックする

• トラフィックのルーティング先が「CloudFront ディストリビューションへのエイリアス」になっていることを確認する。

• キャンセルをクリックする。

9-2. Powershellで反映状況を確認する

• 下記コマンドを実行し、名前解決ができているかどうかを確認する。

Resolve-DnsName <ドメイン名>

※ <ドメイン名> は自分の独自ドメインに置き換えてください。

ドメイン名と、それに対応するIPアドレスの組み合わせが返ってくれば名前解決は問題ありません。

• 下記コマンドを実行し、CloudFrontで配信されていることを確認する。

curl.exe -I https://<ドメイン名>

※ <ドメイン名> は自分の独自ドメインに置き換えてください。

Via: 1.1 XXXXXXXX.cloudfront.net (CloudFront)

という結果を含む応答が返ってくればOKです。

インフラ構築完了

これでAWSにおけるインフラの構築は完了になります。

あとは、Hugoでwebページを作成して、S3バケットにアップロードしてあげれば、webサイトページを表示させることができます。

次回は、Hugoでのwebページ執筆環境を整えてから、実際にS3にアップロードするところを解説します。

続きは下記へ。

執筆中：AWS-S3を使った静的Webサイトホスティング～webページ執筆環境構築編～