1. ハンズオン内容

• ACM / Route 53 / S3 /CloudFront
• ハンズオンでは各リソースを段階的に作成していきます

※Cloud9はVSCodeとPowerShellで代用
※画像はAWS公式ページより引用

前提条件＆注意事項

• このブログだけでは進められません。AWS公式ハンズオン動画をまず見てください。
• これらの導入が必要になると思われます。
• ドメインは購入済みであること。handson-lab.clickは自身のドメインに読み替えてください
• 一部課金が発生します（数十円程度）。終了後は必ず削除しましょう。
• 親ページ見てない人は見てね
• ドメイン名は固有なため、本ブログの記載のまま実施しても動かないと思います。

2. 第1形態

上記構成は、S3の静的ホスティング機能を有効化し、手動でコンテンツ（例：index.html）をデプロイする方式です。
※画像はハンズオンより引用

2.1 S3

2.1.1 バケット作成

• Amazon S3 > バケット > バケットを作成をクリック

2.1.2 パケットの設定変更

• Amazon S3 > バケット > handson-lab.click

🔴が変更箇所です

オブジェクト（タブ）

設定変更というかファイルのアップロード作業となります

プロパティ（タブ）

設定変更です。

アクセス許可（タブ）

設定変更です。

管理（タブ）

アクセスポイント（タブ）

2.1.2 S3にアップロードするAWSCLI

AWSコンソールからアップロードできますが、コマンドでもアップロード可能です。

# 単一のファイルをアップロード
aws s3 cp index.html s3://handson-lab.click

# 複数のファイルをアップロード
aws s3 cp . s3://handson-lab.click --recursive     

3. 第2形態

上記構成は、CloudFrontを経由してS3の静的コンテンツを配信し、キャッシュが正しく機能しているかを確認する構成です。
※画像はハンズオンより引用

3.1 CloudFront

3.1.1 ディストリビューションの作成

• CloudFront > ディストリビューション > ディストリビューションを作成をクリック

※2025/8/14現在、CloudFrontは新UIが試験導入されている。ここでは旧UIを使うことにする。またハンズオンの動画のUIは古すぎるので、要注意→10/16旧UIが使えなくなって困った。

3.1.2 ディストリビューションの修正　

ハンズオン内では修正してますが、作成時にすべての設定が完了しているので作業はありません。

3.1.3 CloudFrontキャッシュ確認

キャッシュしているか否かは、ブラウザ→デベロッパーツール（Ctrl + Shift + i）→ネットワークタブ→HeadersタブでX-Cacheの項目を見るようです。

• X-Cache Miss from CloudFront → CloudFrontでキャッシュしてない
• X-Cache Hit from CloudFront → CloudFrontでキャッシュしている

うまくいかないときはCloudFront側のキャッシュを削除する必要があります。キャッシュはブラウザにもあるが、Disable cacheのチェックを入れておけばブラウザではキャッシュしないようです。
Nameにindex.htmlが表示されてないが、AI曰く、今回の設定ではXXXX.cloudfront.netがindex.htmlに相当するらしいです。嘘かもしれない

4. 第3形態

上記構成は、Route 53で独自ドメインを設定し、Route 53経由でS3の静的コンテンツへHTTPアクセスできるようにする構成です。
画像はハンズオンより引用

4.1 Route 53

4.1.1 ドメインの取得

ドメインはすでに持っているので、今回は取得しません。ハンズオンの動画の通り購入すればOKです。.clickドメインが安いです。

4.1.2 ホストゾーンの作成

• Route 53 > ホストゾーン > ホストゾーンの作成をクリック

4.1.3 ネームサーバ修正

以下はハンズオン動画では触れられてないかもしれません。ドメインを新規に購入していた場合は作業不要ですが、すでに持っていたドメインを使う場合は修正が必要です。

• Route 53 > ホストゾーン > handson-lab.click

この画面のネームサーバを手元にコピーしておきます。

• Route 53 > 登録済みドメイン > handson-lab.click > アクション > ネームサーバを編集

設定値をコピーしたネームサーバに書き換えてください。

• WindowsのPowerShell起動
  ネームサーバを更新後、nslookupが成功すれば設定完了です。10分程度時間がかかります。

# 失敗
PS C:\Users\user> nslookup handson-lab.click
サーバー:  UnKnown
Address:  192.168.86.1

*** UnKnown が handson-lab.click を見つけられません: Server failed

# 成功
PS C:\Users\user> nslookup handson-lab.click
サーバー:  UnKnown
Address:  192.168.86.1

権限のない回答:
名前:    handson-lab.click
Addresses:  52.219.16.136
          3.5.156.197
          52.219.162.63
...

4.1.4 レコードの作成（Aレコードができます）

• Route 53 > ホストゾーン > handson-lab.click > レコードを作成をクリック

本設定でRoute53がS3に向きます

5. 第4形態

上記構成は、ACM（AWS Certificate Manager）でSSL/TLS証明書を作成し、CloudFrontに適用してHTTPS接続を実現する構成です。
Route 53で独自ドメインを設定し、CloudFront経由でS3の静的コンテンツにアクセスします。
最終的にS3への直接アクセスは禁止し、CloudFrontのみを経由させます。 （この部分は第5形態で実施）
※画像はハンズオンより引用

5.1 ACM

5.1.1 証明書作成

• AWS Certificate Manager > 証明書 > リクエストをクリック

証明書発行後は、ステータスが保留中の検証となり、次のアクションが必要です。

5.1.2 レコードを作成（CNAMEレコード）

• AWS Certificate Manager > 証明書 > c3372ea6-5f0d-42b4-84f8-57595c32eb5f（作った証明書のID）> Route 53でレコードを作成をクリック

その後、Route53のホストゾーンでCNAMEレコードが作成されます。そして10分ぐらい待つと証明書ステータスが発行済みとなります。ネームサーバの修正が漏れているとステータスは変わりません。また証明書の一覧画面ではステータスが変わってないが、詳細画面では変わっているといったことも起きます。

5.2 CloudFront

5.2.1 ビヘイビア（タブ）

• CloudFront > ディストリビューション > XXXXXXX（ディストリビューションID） > ビヘイビア（タブ） > 編集

HTTP to HTTPSのリダイレクトの設定はデフォルト設定になっているので設定不要です。ビヘイビア（タブ）の画面にあるので見ておきましょう。

5.2.2 一般（タブ）

• CloudFront > ディストリビューション > XXXXXXX（ディストリビューションID） > 一般（タブ） > 編集

ここの設定がドメインでcloudfrontにアクセスできるようになるのと、https化の設定なんだと思う。ドメイン名がバケット名と一致していることも大事だと思われる。

5.3 Route 53

5.3.1 レコードを修正（Aレコード）

Route 53はS3に向いているので、CloudFrontを向くように設定する

• Route 53 > ホストゾーン > handson-lab.click > Aレコードをチェック > レコードを編集をクリック

6. 第5形態

上記構成は、第4形態の続きで❌の部分を実装します。S3への直接アクセスは禁止し、CloudFrontのみを経由させます。CloudFrontのOACを使います。
※画像はハンズオンより引用

6.1 CloudFront

6.1.1 OACの設定

OACはOAIの後継の機能です。ハンズオンではOAIの方を使ってますが、今回はOACを使います
OACを作成し、OAC経由でS3にアクセスする設定を行います

オリジン（タブ）

• CloudFront > ディストリビューション > XXXXXXX（ディストリビューションID） > オリジン（タブ） > 対象オリジン選択 > 編集

• ハンズオン動画ではRetrict Bucket Access、Grant XXXX項目の設定があるが、見たらないので無視します。
• OACの設定は以下の通り

6.2 S3

6.2.1 バケットポリシー編集

• Amazon S3 > バケット > handson-lab.click > アクセス許可 > バケットポリシー > 編集

S3へのアクセスをCloudFront（OAC)からに限定するために、バケットポリシーをアップデートします。先の手順でコピーしたポリシーを貼り付けます。

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::handson-lab.click/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::XXXXXXXXX:distribution/E1QOHG293CS4B5"
                    }
                }
            }
        ]
      }

• E1QOHG293CS4B5はディストリビューションID

6.2.2 静的ウェブホスティングを無効化

• Amazon S3 > バケット > handson-lab.click > プロパティ > 静的ウェブサイトホスティングを編集 > 無効にする

無効化して動くのか疑問だったが、CloudFrontにホスティング機能があるので、S3側では不要になるようです。

6.2.3 バケットのパブリックアクセスのオン

• Amazon S3 > バケット > handson-lab.click > アクセス許可 > ブロックパブリックアクセス (バケット設定) > 編集

ハンズオンでは行ってないが、オンに戻してもよい。

6.3 最後の動作確認

1. route53にアクセスして画面が表示されることを確認
   https://handson-lab.click

2. 静的ウェブホスティングのURLでアクセスできないことを確認
   http://handson-lab.click.s3-website-ap-northeast-1.amazonaws.com

   アクセス不可の画面

   404 Not Found
   
   • Code: NoSuchWebsiteConfiguration
   • Message: The specified bucket does not have a website configuration
   • BucketName: handson-lab.click
   • RequestId: 1WVEFA0EBDCKWX56
   • HostId: s6uPVUn41scbz6gAej8Z3IxlApa/tlshFhXIsCfqAsXjv23+zwQS0oRZmMR6Ro9KjdSAmAKR3UE=
   

3. バケットのオブジェクトURLでアクセスできないことを確認
   https://s3.ap-northeast-1.amazonaws.com/handson-lab.click/index.html

7. 後片付け（削除作業）

1. Cloudfront（無効→削除）

2. Route53

   1. ドメインは購入品なので削除しない
   2. ホストゾーンのレコードを削除する。デフォルトのレコード以外を削除。つまりAレコードとCNAMEレコードを削除する。このあとホストゾーンを削除してもよい（任意）

3. S3バケット（バケットを空にしてから削除）

4. ACM証明書

   1. CloudFrontの削除が終わらないと実行できません

追加作業

追加でいくつか試します。

CodePipeline導入

今はCloudFormationの画面からテンプレートを実行していますが、これをCoodePipelineから実行してみます。

Artifact用バケット作成

codepipeline-ap-northeast-artifacts-moritokey今回はこの名前で固定します。自動生成させるとランダム値が入り自動化時に苦労します。

CodePipelineを作成

• デベロッパー用ツール > CodePipeline > パイプライン > パイプラインを作成する

※ここで自動作成するロールの主な役割はS3、GitHub、CloudFormationへのアクセスです。

さいごに

感想です

1. ハンズオンの動画が古く躓くところが多い。
2. 各種パラメータを文章にするのがきつかった...
3. ハンズオンをやるだけだと全然身につかない
4. ここまでやればかなり理解を進んだ
5. CloudFormationとGitHub連携はあまりメリットを感じなかったが、間にCodePipelineを挟むやり方はデプロイが簡単になる印象を受けた