S3とCloudFrontで静的WEBホスティングを公開する手法 



# S3とCloudFrontで静的WEBホスティングを公開する手法	



## この記事の目的は？

AWSで静的WEBホスティング公開する手法は割とメジャーでナレッジは探せば多くの記事がヒットしますが

AWSは頻繁にUIを変更するので記事をトレースして構築することができず、もどかしい思いをした覚えがあります

令和３年、西暦だと2021年、AWSで静的WEBホスティング公開の手順を**再入門**という意味を兼ねて記事化します


![drawio2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/df79c0b3-df38-12e4-a019-b96e036393ee.png)

シンプルな構成なので、IaC（Infrastructure as Code）化しやすく

一旦マネージメントコンソールで手動作成すれば、コード化の際にもイメージしやすいでしょう





### この記事の構成

この記事は以下の順序で構成されています



1. S3に静的HTMLを配置

3.  静的HTMLをCloudFrontで配信
4. 静的HTMLがインターネットに公開されているか確認


　終わりに





### 1. S3に静的HTMLを配置

まずはS3サービスにアクセスしてバケットを作成します



バケット名：任意

AWSリージョン：**アジアパシフィック(東京) ap-northeast-1**


![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/76b3779c-8f58-204e-a1d4-82bf503d13fd.png)



**index.html（静的HTML）**をアップロードします

中身は適当にこんな感じにしてみましょう

<index.html>

```html
Hello S3 hosting World!!
```




![11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/347f8fdb-71e2-527d-6e89-ef68786ff012.png)

注意：この時点で静的HTMLはインターネットに公開されていません



### 2. 静的HTMLをCloudFrontで配信

静的HTMLはまだインターネットに公開されません

公開するためには色々やり方はありますが、今回は**S3と CloudFrontを関連付け**して公開するやり方を採用します



Q.なぜCloudFrontを採用したの？

A.Cloudfrontはコンテンツ配信サービスで世界中にエッジロケーションが存在するサービスであり、より低いレイテンシーで配信が可能になります　**ここで使い方を覚えておくと今後役立つ機会があるはずです**

> エンドユーザーにコンテンツをより低いレイテンシーで届けるため、Amazon CloudFront では、47 か国 90 以上の都市にある 275 以上の POP (Point Of Presence) (265 以上のエッジロケーションと 13 のリージョン別中間層キャッシュ) からなる、グローバルなネットワークを使用しています

[Amazon CloudFront の主な特徴](https://aws.amazon.com/jp/cloudfront/features/?nc=sn&loc=2&whats-new-cloudfront.sort-by=item.additionalFields.postDateTime&whats-new-cloudfront.sort-order=desc)



CloudFrontにアクセスし、**ディストリビューションを作成**を選択して以下のように入力


![28.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/2902890b-b764-99ac-624e-decf6bfdf1c5.png)


Q.OAI（オリジンアクセスアイデンティティ）とは？

A.S3への直接アクセスを禁止し、Cloudfront経由でしかアクセスできないよう制限するための機能です



[オリジンアクセスアイデンティティ (OAI) を使用して Amazon S3 コンテンツへのアクセスを制限する](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html)



最初に作った**バケット** の **アクセス許可**を選択して下にスクロール


![34.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/397f1035-0e8a-5bc3-4856-8acca7353c4e.png)



CloudFrontのディストリビューション作成メニューで **はい、バケットポリシーを自動で更新します**

を選択しているので、対象のバケットポリシーが自動で更新されました（便利！）

![35.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/8e5e8387-6928-5567-138e-2cf5180ed513.png)







### 3. 静的HTMLがインターネットに公開されているか確認

では**CloudFront**に戻って ディストリビューション名をコピペしてアクセスしてみましょう

**https://(ディストリビューションドメイン名)/index.html**



![33.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/ae6ac02a-a928-e855-429a-3edd1b8c504b.png)




TIPS:**デフォルトルートオブジェクト**に **index.html**と入れておくと、index.htmlを末尾に入れなくてもアクセスできるようになります





#### 実際にブラウザからアクセスした結果はこちら


![39.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2171325/c6550dbd-2213-2f15-2094-c9a56a2b179e.png)



無事、CloudFront経由でS3に配置した静的HTMLへアクセス成功しました



※セキュリティ的な理由でCloudFront配信を特定のIPでのみアクセスできるよう限定公開したい場合は、以下の記事を参考にしてWAFv2を作成してみましょう

[AWS WAF v2でCloudFrontのIPアドレス制限を作成する](https://qiita.com/dnpds-yuharagi/items/c41b90a80847cf0272c3)





# 終わりに

今回は静的WEBサイトのホスティング方法を、再入門という形式で改めて記事にいたしました

一昔前まではWEBを公開するためには結構な手間暇がかかりましたが

今ではポチポチ操作するだけで実装できるので、技術進歩の速さに驚愕します

**次回はこの静的WEBサイトからAPI機能をコールする記事を作成したいと思います**