Amazon S3とCloudFrontを使用したwebページの公開手順

users 
Amazon 
CloudFront 
Amazon S3

 

AWSで静的ページを公開する時の最も基本的な構成ですが、意外と引っかかるポイントが多いので(2024年の今頃はパブリックアクセスの設定やバケットポリシーの設定など、いくつか躓くポイントがあったのですが、いつの間にかAWSが改善してますね。。)手順をまとめていきたいと思います。

 

もくじ

① S3バケットの作成

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

③ S3バケットにポリシーを設定

④ CloudFront経由のみアクセスが許可されていることを確認

 

① S3バケットの作成

 

AWS マネジメントコンソールで「S3」と検索し、S3のサービス画面に移動する。aWS 
Q 55 
X 
サ - ヒ ス 
9 件 す へ て の 結 果 を 表 示 
サ - ヒ ス ( 9 ) 
ク ラ ウ ド 内 の ス ケ - ラ ブ ル な ス ト レ - 
機 能 ( 58 ) 
リ ソ - ス New 
プ ロ ク 投 稿 ( 226 ) 
S3 Glacier 
ド キ ュ メ ン ト 仏 489 ) 
ク ラ ウ ド 内 の ア - カ イ プ ス ト レ - ジ 
ナ レ ッ ジ 記 事 ( 〃 6 ) 
チ ュ - ト リ ア ル ( 7 ) 
M ョ 「 ketp に ( 2 ( 41 引 ) 
5t0 ge Gateway 
ハ イ プ リ ッ ド ス ト レ - ジ の 統 合 
AWSSnowFamily 
大 容 星 デ - タ の 転 送


「バケットを作成」をクリック
ス ト レ - ジ 
Amazon S3 
任 意 の 量 の デ - タ を ど こ か ら で も 保 存 
お よ び 取 得 
A 「 nazonS3 は 、 業 界 ト ッ プ ク ラ ス の ス ケ - ラ ヒ リ テ ィ 、 デ - タ の 可 用 性 、 セ キ ュ リ テ ィ 、 パ フ ォ - マ ン ス を 捉 
供 す る オ プ ジ ェ ク ト ス ト レ - ジ サ - ヒ ス で す 。 
仕 組 み 
aVVS 
Introduction 10 Amazon S3 
リ ン ク を コ ... 
aws 
バ ケ ッ ト の 作 成 
内 の す べ て の オ プ シ ェ ク ト は 八 ケ ッ ト に 保 存 さ れ 
ま す 。 フ ァ イ 丿 し と フ ォ ル タ を に ア ッ プ ロ - ド す る 
に は 、 オ プ シ ェ ク ト が 保 存 さ れ る 八 ケ ッ ト を 作 成 す る 
必 要 が あ つ ま す 。 
バ ケ ッ ト を 作 成 
に は 低 料 金 は あ り ま せ ん 。 使 用 し た 分 に つ い て 
の 料 金 の み を お 支 払 い い た だ き ま す 。 料 金 は バ ケ 
ッ ト の 場 所 に 臺 づ い て い ま す 。 
AWS 簡 易 見 積 り ツ ー ル 匕 を 使 用 し て 月 額 料 金 を 見 積 
も る 
料 金 の 詳 細 を 表 示 匕 
リ ソ - ス 匕 
ュ - ザ - カ イ ト 
API リ フ ァ レ ン ス 
よ く あ る 当 問

 

バケットの作成画面に遷移します。
希望のリージョンがあれば、変更しておきましょう。
弊社は京都に本社があるため、今回は一番近い大阪リージョン(ap-northeast-3)を使用することにします。

設定項目は以下の7つがありますが、設定が必要なのは「一般的な設定」の「バケット名」だけです。

・一般的な設定 ← ここでバケット名を設定する
・オブジェクト所有者
・このバケットのブロックパブリックアクセス設定
・バケットのバージョニング
・タグ-オプション
・デフォルトの暗号化
・詳細設定(オブジェクトロック)

今回はバケット名を「genech-blog-bucket」としました。
大文字やアンダースコアは使えないので注意してください。

- 般 的 な 設 定 
AWS リ - シ ョ ン 
ア ラ ア バ シ フ ィ ッ ク ( 大 阪 ) ap-northeast-3 
バ ケ ッ ト 名 ー 情 報 
genech-blog-bucket 
バ ケ ッ ト 名 は ク ロ - ノ ( ル 名 前 空 問 内 で - 意 て あ る こ と に 加 え て 、 ハ ケ ッ ト 命 名 規 則 に 従 う 必 要 が あ り ま す 。 バ ケ ッ ト 命 名 規 則 を 表 示 匕 
既 存 の バ ケ ッ ト か ら 設 定 を コ ヒ - - オ プ シ ョ ン 
次 の 設 定 の バ ケ ッ ト 設 定 の み が コ ヒ ー さ れ ま す 。 
バ ケ ッ ト を 選 択 す る 
形 式 : s3://bucket/p 「 efix

その他はデフォルトのままで大丈夫です。

Webページなのにパブリックアクセスをブロックにして大丈夫?と感じるかもしれませんが、④でCloudFrontのオリジンアクセスコントロール(OAC)を使用して、CloudFront経由でのみアクセスできるようにするので、心配ありません。

オ プ ジ ェ ク ト 所 有 者 
他 の AWS ア カ ウ ン ト か ら こ の 八 ケ ッ ト に 雪 き 込 ま れ た オ プ ジ ェ ク ト の 所 有 権 と 、 ア ク セ ス コ ン ト ロ ー ル リ ス ト (ACL) の 使 用 を 管 埋 し ま す 。 オ プ シ ェ ク ト の 所 有 権 は 、 オ プ シ ェ ク ト ^ つ ア ク セ ス を 指 定 で き る ユ ー ザ ー を 決 定 し ま す 。 
0 ACL 無 効 能 奨 ) 
こ の バ ケ ッ ト 内 の す べ て の オ プ ラ エ ク ト は 、 こ の ア カ ウ ン ト に よ っ て 所 有 さ れ ま す 。 こ の バ ケ ッ ト と そ の オ プ ラ エ ク ト へ の ア ク セ ス 
は 、 ホ リ シ - の み を 使 用 し て 指 定 さ れ ま す 。 
オ プ ジ ェ ク ト 所 有 省 
八 ケ ッ ト 所 有 者 の 強 制 
〇 ACL 有 効 
他 の AWS ア カ ウ ン ト が こ の バ ケ ッ ト 内 の オ プ ラ エ ク ト の 所 有 者 と な る こ と が で き ま す 。 こ の バ ケ ッ ト と そ の オ プ ラ エ ク ト へ の ア ク セ 
ス は 、 ACL を 使 用 し て 指 定 で き ま す 。

こ の バ ケ ッ ト の プ ロ ッ ク バ ブ リ ッ ク ア ク セ ス 設 定 
バ ブ リ ッ ク ア ク セ ス は 、 ア ク セ ス コ ン ト ロ - ル リ ス ト (ACL 、 Access Control List) 、 八 ケ ッ ト ホ リ シ ー 、 ア ク セ ス ホ イ ン ト ホ リ シ ー 、 ま た は そ の す べ て を 介 し て 八 ケ ッ ト と オ プ シ ェ ク ト に 許 可 さ れ ま す 。 こ の 八 ケ ッ ト と そ の オ プ シ ェ ク ト へ の 公 開 ア ク セ 
ス が 確 実 に プ ロ ッ ク さ れ る よ う に す る に は 、 [ バ ブ リ ッ ク ア ク セ ス を す べ て プ ロ ッ ク ] を 有 効 に し ま す 。 こ れ ら の 設 定 は こ の 八 ケ ッ ト と そ の ア ク セ ス ホ イ ン ト に の み 適 用 さ れ ま す 。 AWS て は [ バ ブ リ ッ ク ア ク セ ス を す べ て プ ロ ッ ク ] を 有 効 に す る こ と を お 
勧 め し ま す が 、 こ れ ら の 設 定 を 適 用 す る 前 に 、 ア プ リ ケ ー シ ョ ン が 公 開 ア ク セ ス な し で 正 し く 機 能 す る こ と を こ 確 認 く だ さ い 。 こ の バ ケ ッ ト や オ プ シ ェ ク ト ^ つ あ る 程 度 の 公 開 ア ク セ ス が 必 要 な 場 合 は 、 各 ス ト レ ー ラ ユ ー ス ケ ー ス に 合 わ せ て 以 下 に あ 
る 個 々 の 設 定 を カ ス タ マ イ ズ で き ま す 。 詳 細 匕 
バ ブ リ ッ ク ア ク セ ス を す へ て プ ロ ッ ク 
こ の 設 定 を オ ン に す る こ と は 、 以 下 の 4 つ の 設 定 を す べ て オ ン に す る こ と と 同 じ て す 。 次 の 各 設 定 は 互 い に 独 立 し て い ま す 。 
新 し い ア ク セ ス コ ン ト ロ - ル リ ス ト (ACL) を 介 し て 付 与 さ れ た バ ケ ッ ト と オ プ ジ ェ ク ト へ の バ ブ リ ッ ク ア ク セ ス を プ ロ ッ ク す る 
55 は 、 新 し く 這 加 さ れ た バ ケ ッ ト ま た ま オ プ ジ ェ ク ト に 適 用 さ れ た バ ブ リ ッ ク ア ク セ ス 許 可 を プ ロ ッ ク し 、 既 存 の ( ケ ッ ト お よ び オ プ ラ エ ク ト に 対 す る 新 し い パ プ リ ッ ク ア ク セ ス L が 作 成 さ れ な い よ う に し ま す 。 こ の 設 定 で は 、 A 〔 L を 使 用 し て 53 リ ソ - ス へ の バ ブ リ ッ ク ア ク セ 
ス を 許 可 す る 既 存 の ア ク セ ス 許 可 は 変 更 さ れ ま せ ん 。 
任 意 の ア ク セ ス コ ン ト ロ - ル リ ス ト (ACL) を 介 し て 付 与 さ れ た バ ケ ッ ト と オ プ ジ ェ ク ト へ の バ ブ リ ッ ク ア ク セ ス を プ ロ ッ ク す る 
55 は バ ケ ッ ト と オ プ ラ エ ク ト へ の バ ブ リ ッ ク ア ク セ ス を 付 与 す る す べ て の ACL を 無 視 し ま す 。 
新 し し V 、 プ リ ッ ク バ ケ ッ ト ホ リ ッ - ま た は ア ク セ ス ホ イ ン ト ホ リ ッ - を 介 し て 付 与 さ れ た バ ケ ッ ト と オ プ ジ ェ ク ト へ の バ ブ リ ッ ク ア ク セ ス を プ ロ ッ ク す る 
は 、 バ ケ ッ ト と オ プ ラ エ ク ト へ の バ ブ リ ッ ク ア ク セ ス を 許 可 す る 新 し い バ ケ ッ ト ホ リ シ - お よ び ア ク セ ス ホ イ ン ト ホ リ シ - を プ ロ ッ ク し ま す 。 こ の 設 定 は 、 53 リ ソ - ス へ の バ ブ リ ッ ク ア ク セ ス を 許 可 す る 既 蓚 の ホ リ ラ - を 変 更 し ま せ ん 。 
任 意 の バ ブ リ ッ ク バ ケ ッ ト ホ リ シ - ま た は ア ク セ ス ホ イ ン ト ホ リ シ - を 介 し た バ ケ ッ ト と オ プ ジ ェ ク ト へ の バ ブ リ ッ ク ア ク セ ス と ク ロ ス ア カ ウ ン ト ア ク セ ス を プ ロ ッ ク す る 
55 は 、 バ ケ ッ ト と オ プ ラ エ ク ト へ の バ ブ リ ッ ク ア ク セ ス を 付 与 す る ホ リ ラ - を 使 用 し た バ ケ ッ ト ま た は ア ク セ ス ホ イ ン ト へ の パ プ リ ッ ク ア ク セ ス と ク ロ ス ア カ ウ ン ト ア ク セ ス を 鱆 視 し ま す 。

バ ケ ッ ト の バ - ジ ョ ニ ン グ 
バ ー ラ ョ 二 ン ク は 、 オ プ シ ェ ク ト の 複 数 の バ リ ア ン ト を 同 し バ ケ ッ ト 内 に 保 持 す る 手 段 で す 。 バ ー ラ ョ 二 ン ク を 使 用 す る と 、 Amazon バ ケ ッ ト に 格 納 さ れ て い る す べ て の オ プ ジ ェ ク ト の す べ て の バ - ジ ョ ン を 保 存 、 取 得 、 復 元 で き ま す 。 
ン ク を 使 用 す る と 、 意 図 し な い ユ - ザ - ア ク シ ョ ン と 意 図 し な い ア プ リ ケ - シ ョ ン 障 害 の 両 方 か ら 簡 単 に 復 旧 で き ま す 。 詳 細 匕 
バ ケ ッ ト の バ - ジ ョ - ン ク 
0 無 効 に す る 
〇 有 効 に す る

タ グ - オ プ シ ョ ン ( 0 ) 
バ ケ ッ ト タ ク を 使 用 し て 、 ス ト レ ー ラ コ ス ト を 追 跡 し 、 バ ケ ッ ト を 整 理 で き ま す 。 詳 細 は こ ち ら 匕 
こ の 八 ケ ッ ト に 関 連 付 け ら れ た タ ク は あ り ま せ ん 。 
タ ク の 追 加

デ フ ォ ル ト の 暗 号 化 
サ - 八 - 側 の 晴 号 化 は 、 こ の 八 ケ ッ ト に 保 存 さ れ た 新 し い オ プ シ ェ ク ト に 自 動 的 に 適 用 さ れ ま す 。 
階 号 化 タ イ プ 情 報 
0 Amazon マ ネ - ジ ド キ - を 使 用 し た サ - バ - 側 の 暄 号 化 (SSE-S3) 
〇 AWS Key Management Se Ⅳ に 2 キ - を 1 吏 用 し た サ - バ - 側 の 暄 号 化 (SSE-KMS) 
〇 AWS Key Management Se Ⅳ に 2 キ - を 1 吏 用 し た デ ュ ア ル レ イ ヤ - サ - バ - 側 の 暄 号 化 (DSSE-KMS) 
2 つ の 異 な る 暗 号 化 レ イ ヤ ー で オ プ ジ ェ ク ト を 保 護 し ま す 。 料 金 の 詳 細 に つ い て は 、 Amazon 53 の 料 金 匕 ペ - ラ の ス ト レ - ラ ] タ ブ の 055E ・ KMS の 料 金 を ご く た さ い 。 
バ ケ ッ ト キ - 
55E ・ KMS に バ ケ ッ ト キ ー を 使 用 す る と 、 AWS KMS へ 皀 び 出 し を 減 ら す こ と で 暗 号 化 コ ス ト を 削 減 で き ま す 。 DSSE-KMS で は バ ケ ッ ト キ ー は サ ホ - ト さ れ て い ま せ ん 。 詳 細 匕 
〇 無 効 に す る 
0 有 効 に す る

, 詳 細 設 定 
オ プ ジ ェ ク ト ロ ッ ク 
Write-Once-Read-Many(WORM) モ テ ル を 使 用 し て オ プ ラ エ ク ト を 保 存 す る と 、 オ プ ラ エ ク ト が - 定 期 問 ま た は 垣 期 限 に 削 ま た は 上 碧 き さ れ る の を 防 げ ま す 。 オ プ ラ エ ク ト ロ ッ ク は バ - ジ ョ 二 ン ク さ れ た バ ケ ッ ト で の み 機 能 し ま す 。 詳 細 
0 無 効 に す る 
〇 有 効 に す る 
こ の バ ケ ッ ト 内 の オ プ ラ エ ク ト の ロ ッ ク を 永 続 的 に 許 可 し ま す 。 こ の バ ケ ッ ト 内 の オ プ ジ ェ ク ト が 削 除 ま た は 上 碧 き さ れ な い よ う に す る に は 、 バ ケ ッ ト の 作 成 後 に バ ケ ッ ト 詳 細 で 直 加 の オ 
プ ラ エ ク ト 匚 ッ ク 設 定 が 必 要 で す 。 
① オ プ シ ェ ク ト ロ ッ ク は 、 バ ー ラ ョ 二 ン ク 対 応 の バ ケ ッ ト で の み 機 能 し ま す 。 オ プ シ ェ ク ト ロ ッ ク を 有 効 に す る と 、 バ ー ラ ョ 二 ン ク が 自 動 的 に 有 効 に な り ま す 。

 

続いて、作成したバケットにindex.htmlファイルをアップロードします。
こちらのファイルがCloudFront経由でのみ表示されることを今回のゴールとします。

先ほど作成したバケットに移動し、index.htmlをドラッグアンドドロップしましょう。

genech-blog-bucket 
ス ト レ - ッ ク ラ ス 
オ プ ジ ェ ク ト 
プ ロ バ テ ィ 
ア ク セ ス 許 可 
メ ト リ ク ス 
管 埋 
ア ク セ ス ホ イ ン ト 
オ プ ジ ェ ク ト ( 0 ) 情 報 
0 53 URI を コ ビ - 
URL を コ ヒー 
土 タ ウ ン ロ - ド 
開 く 匕 
削 除 
オ プ ジ ェ ク ト は 、 Amazon に 保 存 さ れ た 臺 本 的 な エ ン テ ィ テ ィ で す 。 Amazon イ ン べ ン ト リ 匕 を 使 用 し て 、 八 ケ ッ ト 内 の す べ て の オ プ シ ェ ク ト の リ ス ト を 取 得 で き ま す 。 他 の ユ ー サ ー が 自 分 の オ プ シ ェ ク ト に ア ク セ ス で き る た め に は 、 明 示 的 に 
ア ク セ ス 権 限 を 付 与 す る 必 要 が あ り ま す 。 詳 細 は こ ち ら 匕 
Q プ レ フ ィ ッ ク ス で オ プ ジ ェ ク ト を 検 索 
| タ イ プ 
0 
マ | 是 終 更 新 日 時 
オ プ ジ ェ ク ト が あ り ま せ ん 
こ の 八 ケ ッ ト に は オ プ ジ ェ ク ト が あ り ま せ ん 。 
↑ ア ッ プ ロ - ド 
マ 
サ イ ズ

アップロードするファイルの確認画面が表示されます。
設定は変更せず「アップロード」ボタンをクリックしましょう。

ア ッ プ ロ - ト 
情 報 
に ア ッ プ ロ - ド す る フ ァ イ ル と フ ォ ル タ を 追 加 し ま す 。 160G 日 を 超 え る フ ァ イ ル を ア ッ プ ロ - ト す る に は 、 AWSCLI 、 AWSSDK. ま た は Amazon RESTA 円 を 使 用 し ま す 。 詳 細 は こ ち ら 匕 
こ こ に ア ッ プ ロ - ト す る フ ァ イ ル と フ ォ ル タ を ト ラ ッ ク ア ン ト ト ロ ッ プ す る か 、 [ フ ァ イ ル を 追 加 ] ま た は [ フ ォ ル タ を 追 加 ] を 選 択 し ま す 。 
フ ァ イ ル と フ ォ ル ダ ( 1 合 計 ′ 257.0 B) 
こ の テ - プ ル 内 の す べ て の フ ァ イ ル と フ ォ ル タ が ア ッ プ ロ - ト さ れ ま す 。 
Q 名 前 で 検 索 
ロ 
ロ 
名 前 
Index.html 
マ | フ ォ ル タ 
マ 
タ イ プ 
text/html 
削 除 
25 ス 0 B 
送 信 先 
情 報 
送 信 先 
s3://genech-blog-bucket 匕 
送 信 先 の 詳 細 
指 定 さ れ た 宛 先 に 保 さ れ た 新 し い オ プ シ ェ ク ト に 髟 す る バ ケ ッ ト 設 定 。 
ア ク セ ス 許 可 
他 の AWS ア カ ウ ン ト へ の パ プ リ ッ ク ア ク セ ス と ア ク セ ス 権 を 付 与 し ま す 。 
プ ロ バ テ ィ 
ス ト レ - ラ ク ラ ス 、 号 化 設 定 、 タ ク な ど を 指 定 し ま す 。 
キ ャ ン セ ル

アップロードが成功すると以下の画面が表示されます。〇 ア ッ プ ロ - ド に 成 功 し ま し た 
詳 細 に つ い て は 、 [ フ ァ イ ル と フ ォ ル ダ - ] テ - プ ル を 参 照 し て く だ さ い 。 
ア ッ プ ロ - ト : ス テ - タ ス 
① こ の ベ ジ か ら 移 動 す る と 、 以 下 の 情 報 は 利 用 で き な く な り ま す 。 
概 要 
送 信 先 
s3://genech-blog-bucket 
フ ァ イ ル と フ ォ ル タ 
設 定 
フ ァ イ ル と フ ォ ル ダ ( 1 合 計 ′ 257.0 B) 
Q 名 前 で 検 索 
名 前 
index.html 匕 
ー フ ォ ル タ 
マ 
成 功 し ま し た 
〇 1 フ ァ イ ル . 25 ス 0 B ( 100 ℃ 0 % ) 
タ イ プ 
text/html 
マ 
サ イ ス 
257.0 B 
〇 0 個 の フ ァ - イ 丿 レ 0B ( 0 % ) 
マ 
〇 成 功 し ま し た 
工 フ - ー

 

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

 

「CloudFront」と検索し、CloudFrontのサービス画面に移動します。aWS 
サ - ヒ ス 
Q cloudfront 
サ - ヒ ス ( 1 ) 
リ ソ - ス New 
プ ロ ク 投 稿 ( 68 ) 
ド キ ュ メ ン ト ( 410 ) 
ナ レ ッ ジ 記 事 ( 67 ) 
チ ュ - ト リ ア ル ( 1 ) 
M ョ 「 ketp ( 2 ( 257 ) 
X 
CloudFront 
ク ロ - バ ル な コ ン テ ン ツ 配 信 ネ ッ ト ワ - ク 
リ ソ -- ス / 焦 点 を 絞 っ た 検 索 用 
① リ ソ - ス 検 索 の 概 要 
ア カ ウ ン ト 0 ) ク ロ ス リ - ジ ョ ン リ ソ - ス を 検 索 結 果 に 表 示 で き る よ う に し ま す 。 セ ッ ト 
ア ッ プ に 要 す る 時 問 は 5 分 以 下 で す 。 
R 部 ou 「 ( eExp 爬 「 に ア ク セ ス 
X 
プ ロ グ 投 稿 
68 件 す へ て の 結 果 を 表 示

 

「CloudFrontディストリビューションを作成」をクリックネ ッ ト ワ - ク と コ ン テ ン ツ 配 信 
Amazon CloudFront 
低 レ イ テ ン シ - と 高 速 転 送 速 度 で コ ン 
テ ン ツ を 安 全 に 配 信 
Amazon ロ 0 凵 dF 「 ont は 、 低 レ イ テ ン シ - と 咼 速 転 送 速 度 で 、 デ - 夕 、 動 画 、 ア プ リ ケ ー 
顧 客 に 安 全 に 配 信 す る 咼 速 コ ン テ ン ツ 配 信 ネ ッ ト ワ - ク (CDN) サ - ヒ ス で す 。 
、 API を 世 界 中 の 
利 点 と 特 徴 
レ イ テ ン シ - を 削 減 
CloudF 「 ont ネ ッ ト ワ - ク に は 225D し と び ) POP ( PointOfPresen ( 2 ) 
が あ り 、 完 全 に 冗 長 な バ ラ レ ル 1 GbE フ ァ イ 八 一 て 接 続 さ れ 、 工 
ン ト ユ ー ザ ー の た め に 超 低 レ イ テ ン シ - パ フ ォ ー マ ン ス と 高 可 用 性 
を 実 現 し ま す 。 CloudF 「 ont は 、 キ 17 ッ シ ュ さ れ た コ ン 丁 ン ツ ま た 
は 動 的 コ ン テ ン ツ を 掟 供 す る 際 に 、 ネ ッ ト ワ ー ク 条 件 を 自 動 的 に マ 
ッ ヒ ン ク し 、 ユ ー ザ ー の ト ラ フ ィ ッ ク を イ ン テ リ ラ エ ン ト に ル ー 
イ ン ク し ま す 。 
コ ス ト を 削 減 
AWS と 統 合 さ れ た CloudF 「 ont を 1 吏 用 す る と 、 リ ク エ ス ト カ 充 合 さ 
れ 、 AWS オ リ シ ン か ら の デ ー タ 転 送 料 金 を 支 払 う 必 要 が な く な り 
セ キ ュ リ テ ィ を 向 上 さ せ る 
CloudF 「 ont を 使 用 し て 、 境 界 保 謹 、 ト ラ フ ィ ッ ク の 暄 号 化 、 お よ 
ひ ア ク セ ス 制 を 行 い ま す 。 AWS Shield Standard は 、 CloudFront 
を 介 し て 送 信 さ れ た ト ラ フ ィ ッ ク を DDoS 攻 堕 か ら 三 自 加 料 金 な し で 
防 し ま す 。 ア プ リ ケ ー シ ョ ン の 保 讌 の た め に 、 AWS WAF 、 マ ネ 
ー シ ト ル ー ル 、 マ ネ ー シ ト サ ー ト バ ー テ ィ ー フ ァ イ ア ウ ォ ー ル オ プ 
シ ョ ン を CloudFront ワ ー ク ロ ー ト に 統 合 で き ま す 。 
配 信 を カ ス タ マ イ ス 
サ ー 八 一 レ ス コ ン ヒ ュ ー テ ィ ン ク 機 能 を 使 用 す る と 、 AWS CDN 工 
ッ シ で 独 自 の コ ー ト を 安 全 に 実 行 て き ま す 。 デ リ 八 リ ー を カ ス タ マ 
Cloud Front を 使 い 始 め る 
Amazon S3 ノ ( ケ ッ ト 、 Application Load 
Ba n [ 2 「 、 Amazon API Gateway API な 
ど の 咼 速 で 、 信 頼 で き 、 安 全 な コ ン テ ン 
ッ 配 信 を 5 分 以 内 で 実 現 し ま す 。 
OudFront 丁 イ 
ョ ン を 作 成 
AWS 無 料 利 用 枠 
1 TB の デ ー タ 転 送 (OUT) 
10. 0.000 の HTTP ま た は HTTPS リ ク 
2 工 00 ′ 000 の CloudFront Functions の 呼 
ひ 出 し 
毎 月 、 常 に 料 
料 金 ( 米 国 ) 
毎 月 呈 初 の 1 TB の デ - タ 転 送 が 舞 料 
10 TB/É 
GB あ た っ 住 085USD

 

ディストリビューションの作成画面に遷移します。

「オリジンを選択」にカーソルを合わせると、先ほど作成したS3バケットが表示されるので選択しましょう。Origin domain 
Choose an AWS origin, or enter your origin's domain name. Learn more 
Enter a valid DNS domain name, such as an S3 bucket, HTTP server, or VPC origin ID. 
Origin path - optional 
Enter a URL path to append to the origin domain name for origin requests. 
Enter the origin path 
-7t7Y3 > 
CloudFront 
Enable Origin Shield 
Origin shield is an additional caching layer that can help reduce the load on your origin and help protect its availability.

 

オリジンアクセスは「Origin access control settings (recommended)」を選択し、
「Create new OAC」をクリックします。O 
Public 
Bucket must allow public access. 
O Origin access control settings (recommended) 
Bucket can restrict access to only CloudFront_ 
C) Legacy access identities 
Use a CloudFront origin access identity (OAI) to access the S3 bucket. 
Origin access control 
Select an existing origin access control (recommended) or create a new control. 
Select an origin access control 
Create new OAC

変更せずに、「Create」ボタンをクリックX 
( 「 eate new OAC 
名 前 は - 意 で あ る 必 要 が あ り ま す 。 有 効 な 文 字 : 英 字 、 数 字 、 お よ び ほ と ん ど の 持 殊 文 字 。 最 大 64 文 字 
ま て 使 用 で き ま す 。 
genech-blog-bucket.s3.ap-northeast-3.amazonaws.com 
説 明 オ プ シ ョ ン 
説 明 に は 最 大 2 ら 6 文 字 を 使 用 で き ま す 。 
説 明 を 入 力 
者 名 動 作 
〇 リ ク エ ス ト に 名 し な い 
0 名 リ ク エ ス ト ( 推 ) 
ロ 認 証 ヘ ッ タ - を 上 き し な い 
受 信 リ ク エ ス ト に 認 証 ヘ ッ ダ - が あ る 場 合 は 覊 名 し ま せ ん 。 
オ リ ジ ン タ イ プ 
オ リ シ ン タ イ プ は オ リ ラ ン ト メ イ ン と 同 じ タ イ プ で な け れ ば な り ま せ ん 。 
キ マ ン セ ル 
r22t2

 

「デフォルトのキャッシュビヘイビア」、「関数の関連付け-オプション」はデフォルトのままとします。デ フ ォ ル ト の キ ャ ッ シ ュ ヒ ヘ イ ヒ ア 
バ ス パ タ - ン 情 報 
デ フ ォ ル ト 門 
オ プ ジ ェ ク ト を 自 動 的 に 圧 縮 
〇 NO 
ヒ ュ - ワ - 
ビ ュ - ワ - プ ロ ト コ ル ホ リ シ - 
0 HTTP and HTTPS 
〇 
Redirect HTTP to HTTPS 
( ) HTTPS only 
訐 可 さ れ た HTTP メ ソ ッ ド 
0 GET, HEAD 
〇 
GET, HEAD, OPTIONS 
情 報 
〇 
GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE 
ビ ュ - ワ - の ア ク セ ス を 制 限 す る 
ヒ ュ ー ワ - の ア ク セ ス を 制 限 す る 合 、 ヒ ュ - ワ - が コ ン テ ン ツ に ア ク セ ス す る に は CloudF 「 ont 名 付 き URL ま た は 名 付 き cookie を 使 用 す る 必 要 が あ り ま す 。 
キ ャ ッ シ ュ キ - と オ リ ジ ン リ ク エ ス ト 
キ マ ッ シ ュ キ ー と オ リ ラ ン リ ク エ ス ト を 制 御 す る に は 、 キ マ ッ シ ュ ホ リ シ ー と オ リ ラ ン リ ク エ ス ト ホ リ シ ー を 使 用 す る こ と を お 勧 め し ま す 。 
0 朝 [ he policy and Origin 「 eque t policy ( 「 2 [ ommended ) 
( ) Legacy [ 2 ( he settings 
キ ャ ツ ツ ュ ホ リ ッ - 
既 存 の キ 11 ッ シ ュ ホ リ シ - を 択 す る か 、 新 し い キ 11 ッ シ ュ ホ リ シ - を 作 成 し ま す 。 
CachingOptimized 
Policy with caching enabled. 5 凵 PPO 「 ts Cup and Brotli comp 化 55i0 ル 
Recommended for S3

関 数 の 関 連 付 け - オ プ シ ョ ン 
情 報 
こ の キ 17 ッ シ ュ ヒ ヘ イ ヒ ア に 関 連 付 け る 工 ッ ラ 関 数 と 、 関 数 を 呼 び 出 す CloudFront イ ベ ン ト を 選 択 し ま す 。 
関 数 タ イ プ 
ヒ ュ - ワ - リ ク エ ス ト 
関 数 ARN/ 名 前 
本 文 を 含 め る 
ヒ ュ - ワ - レ ス ホ ン ス 
オ リ ジ ン リ ク エ ス ト 
オ リ ジ ン レ ス ホ ン ス 
関 連 付 け な し 
関 連 付 け な し 
関 連 付 け な し 
関 連 付 け な し


ここでWAFを有効にできますが、今回の構成の中で一番高額になるため外しておきます。
必要であれば、有効にしておきましょう。ウ エ プ ア プ リ ケ - シ ョ ン フ ァ イ ア ワ ォ - ル (WAF) 
〇 
セ キ ュ リ テ ィ 保 讌 を 有 効 に す る 
AWSWAF を 使 用 し て 、 最 も - 般 的 な ウ エ プ の や セ キ ュ リ テ ィ の 脆 弱 性 か ら ア プ リ ケ - シ ョ ン を 保 護 し ま す 。 プ ロ ッ ク さ れ た リ ク 
工 ス ト は 、 ウ エ プ サ - バ - に 到 達 す る 前 に 止 さ れ ま す 。 
0 セ キ ュ リ テ ィ 保 讌 を 有 効 に し な い で く だ さ い 
ア プ リ ケ - シ ョ ン に AWS WAF セ キ ュ リ テ ィ 保 護 が 心 要 な い 合 は 、 こ の オ プ シ ン を 択 し て く た さ い 。

 

「デフォルトルートオブジェクト」はindex.htmlとしておきましょう。

0 オ ン 
説 明 オ プ シ ョ ン 
Standard logging 情 報 
Additional charges may ap 可 第 S22 fo fo 「 mo 「 2 de ね i 
ロ ク 配 信 
Amazo 冂 、 Firehose 、 ま た は ロ 。 udWat [ h へ の ヒ ュ - ワ ー リ ク エ ス ト の ロ ク を 取 得 
0 オ フ 
キ ャ ン セ ル 
デ ィ ス ト リ ヒ ュ ー シ ョ ン を 作 成

ディストリビューションが作成できました。

次の手順でポリシーが必要なので、ポリシーをコピーしておきましょう。

 

③S3バケットにポリシーを設定


S3バケットの「アクセス許可」タブをクリックします。
0 
Amazon S3 
Amazon 5 」 
汎 用 パ ケ ッ ト 
ハ ケ ッ ト 
genech-blog-bucket 
〇 
〇 
く 
genech-blog-bucket 
デ ィ レ ク ト リ バ ケ ッ ト 
テ - プ ル バ ケ ッ ト 
A [ [ 2 Grants 
ア ク セ ス ホ イ ン ト 
Obje [ tLambda ア ク セ ス ホ イ ン ト 
マ ル チ リ - ジ ョ ン ア ク セ ス ホ イ ン ト 
バ ッ チ オ ペ レ - シ ョ ン 
IAM A [ [ 2 Analyzer for S3 
こ の ア カ ウ ン ト の プ ロ ッ ク 八 プ リ ッ 
オ プ ジ ェ ク ト 
プ ロ バ テ ィ 
ア ク セ ス 許 可 
オ プ ジ ェ ク ト ( 1 ) 情 報 
メ ト リ ク ス 
0 
管 埋 
53U を コ ヒ - 
ア ク セ ス ホ イ ン ト 
URL を コ ヒー 
土 タ ウ ン ロ - ド 
開 く 匕 
削 除 
オ プ ジ ェ ク ト は 、 Amazon に 保 存 さ れ た 基 本 的 な エ ン テ ィ テ ィ で す 。 Amazon イ ン べ ン ト リ 匕 を 使 用 し て 、 八 ケ ッ ト 内 の す べ て の オ プ シ ェ ク ト の リ ス ト を 取 得 で き ま す 。 他 の ユ ー サ ー が 自 分 の オ プ シ ェ ク ト に ア ク セ ス で き る た め に は 、 明 示 
的 に ア ク セ ス 権 限 を 付 与 す る 必 要 が あ り ま す 。 詳 細 は こ ち ら 匕 
Q プ レ フ ィ ッ ク ス で オ プ ジ ェ ク ト を 検 索 
0 
ロ 
ロ 
ー タ イ プ 
html 
マ 
index.html 
是 終 更 新 日 時 
2025 / 01 / 10 04 : 21 : 05 PM 」 ST 
マ 
25 ス O B 
ス ト レ - ジ ク ラ ス 
ス タ ン タ ー ト

 

バケットポリシー欄の「編集」クリックし、先ほどコピーしたバケットポリシーを貼り付けます。バ ケ ッ ト ホ リ シ - 
」 SON で 記 述 さ れ た ア ク セ ス ホ イ ン ト ホ リ シ ー は 、 八 ケ ッ ト に 保 存 さ れ た オ プ シ ェ ク ト ^ つ ア ク セ ス を 掟 供 し ま す 。 八 ケ ッ ト ホ リ シ ー は 、 他 の ア カ ウ ン ト が 所 有 す る オ プ シ ェ ク ト に は 適 用 さ れ ま せ ん 。 詳 細 匕 
① こ の バ ケ ッ ト に 対 し て プ ロ ッ ク バ ブ リ ッ ク ア ク セ ス 設 定 が 有 効 に な っ て い る た め 、 バ ブ リ ッ ク ア ク セ ス は プ ロ ッ ク さ れ て い ま す 
有 効 に な っ て い る 設 定 を 確 す る に は 、 こ の バ ケ ッ ト の プ ロ ッ ク 八 プ リ ッ ク ア ク セ ス 設 定 を 確 し ま す 。 詳 細 に つ い て は 、 「 Amazon プ ロ ッ ク バ ブ リ ッ ク ア ク セ ス の 使 用 匕 」 を こ 覧 く だ さ い 
表 示 す る ホ リ シ - が あ り ま せ ん 。 
編 集 
コ ヒ 
削 除 
- す る

 

④ CloudFront経由のみアクセスが許可されていることを確認

 

ディストリビューションドメイン名をコピーし、ブラウザのURL欄に入力してみましょう。

CloudFront経由でS3に保存したindex.htmlが表示できることを確認できました。

 

最後に、S3バケットに直接アクセスできないようになっているかも確認しましょう。

S3バケットにアップロードした、index.htmlをクリックしオブジェクトのプロパティを確認します。genech-blog-bucket 
オ プ ジ ェ ク ト 
プ ロ バ テ ィ 
ア ク セ ス 許 可 
オ プ ジ ェ ク ト ( 1 ) 情 報 
メ ト リ ク ス 
0 
管 埋 
S3URl を コ ヒ - 
ア ク セ ス ホ イ ン ト 
URL を コ ヒー 
土 タ ウ ン ロ - ド 
開 く 匕 
削 除 
オ プ ジ ェ ク ト は 、 Amazon に 保 存 さ れ た 臺 本 的 な エ ン テ ィ テ ィ で す 。 Amazon イ ン べ ン ト リ 匕 を 使 用 し て 、 八 ケ ッ ト 内 の す べ て の オ プ シ ェ ク ト の リ ス ト を 取 得 で き ま す 。 他 の ユ ー サ ー が 自 分 の オ プ シ ェ ク ト に ア ク セ ス で き る た め に は 、 明 示 
的 に ア ク セ ス 権 限 を 付 与 す る 必 要 が あ り ま す 。 詳 細 は こ ち ら 匕 
Q プ レ フ ィ ッ ク ス で オ プ ジ ェ ク ト を 検 索 
0 
ロ 
ロ 
名 前 
巴 
index.html 
ー タ イ プ 
html 
マ 
是 終 更 新 日 時 
2025 / 01 / 10 04 : 21 : 05 PM 」 ST 
マ 
25 ス O B 
ス ト レ - ジ ク ラ ス 
ス タ ン タ ー ト

 

「オブジェクトの概要」にあるオブジェクトURLをクリックして、アクセスします。URL 
https://genech-blog-bucket.s3.ap-northeast-3.amazonaws.com/index.html

 

以下の画面が表示されれば、S3へのアクセスはブロックされていることが確認できます。genech-blog-bucket.s3.ap-northeast-3.amazonaws.com/index.html 
This XML file does not appear to have any style information associated with it. The document tree is shown below. 
'-Message>Access 
(Request 
(Host 
</Er ror>

Amazon S3とCloudFrontを使用したwebページの公開手順は以上です。
上記の構成であれば、独自ドメインを使用しても1か月あたり約100円で運用が可能です。

私も上記の構成で独自ドメインを使用してホームページを公開していますが、2024年12月の請求額は0.63ドル(99.14円)でした。

S3(0.13ドル) + CloudFront(0ドル) + Route 53(0.50ドル) = 0.63ドル

※ここにWAFを追加すると1か月あたり約3000円の追加費用が発生します。

ぜひ、試してみてくださいね。