CloudFrontとS3を使った静的サイトの公開方法

# この記事でやること
- 静的ウェブサイトホスティングを使用せずにCloudFrontからS3上に配置した静的ページをを表示する方法について。
- ドメインの紐付けまではしない。


# 自己紹介
- 都内のDevOps系の企業でエンジニアをやっています。
- 主にAWSとTerraformを扱っております。
- フルリモートで勤務しております。
- 大阪在住、年齢は27歳、趣味は古着屋巡りと映画鑑賞です。


## 静的ページの準備
静的サイトについては以下ページのサンプルページを使いたいと思います。
https://code-step.com/portfolio1-menu/


## S3バケットの作成
まずは以下設定で作成します。

ごく普通のバケットの作成です。

![Screenshot 2023-06-28 at 12.21.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/63a16edd-0452-a12a-76c8-e13a14a75629.png)
![Screenshot 2023-06-28 at 12.19.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/179fb486-1c9f-ee80-b370-91b3513c2fd6.png)
![Screenshot 2023-06-28 at 12.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/f0c7a891-c87f-33bc-0d99-157dbcb76d75.png)

次に作成した静的コンテンツをS3バケット上にアップロードします。

![Screenshot 2023-06-28 at 12.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/b65c8639-ee76-c61a-b2ce-35ab53fe61ac.png)

アップロードが完了しました。

![Screenshot 2023-06-28 at 12.24.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/cceb08fd-f224-feb9-0f5e-b79ea96e205f.png)

※現段階において静的コンテンツは公開されていません。


## CloudFrontの設定

引き続きCloudFrontの設定をやっていきます。

[ディストリビューション]の作成を押下します。

![Screenshot 2023-06-28 at 13.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/67754659-877c-220f-8aab-a6031a370792.png)

OAIを作成してCloudFrontからファイルアクセスできるようにします。

![Screenshot 2023-06-28 at 13.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/a49d9e20-d197-5ab3-73fb-f62cdfc7b35b.png)

ディストリビューション作成後、

S3のバケットポリシーを変更してCloudFrontディストリビューションからのアクセスを許可する必要があります。

CloudFront側でポリシーステートメントが用意されているのでそちらを使用していきます。

[ディストリビューション]→[オリジン]→[編集]

![Screenshot 2023-06-28 at 14.10.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/ea70e87e-f1db-70ad-1d7e-e431894a3a9e.png)

編集画面の[ポリシーをコピー]を押下してください。

![Screenshot 2023-06-28 at 14.12.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/9f649bfd-9deb-8047-93a1-eff0bcd3eebc.png)

## バケットポリシーの更新

コピーしたポリシーステートメントをバケットポリシーに貼り付けてバケットポリシーを更新します。
以下がバケットポリシーです。

```
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::static-sample-2023-0628/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::AccountID:distribution/DistributionID"
                }
            }
        }
    ]
}

```


## CloudFrontからアクセス

ではCloudFrontのディストリビューションドメイン名からアクセスしてみましょう。

ドメイン名そのままアクセスしたらエラーがでました。

![Screenshot 2023-06-28 at 14.37.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/ca71ac51-706e-5550-a2fe-ae36650ef925.png)


`/index.html`を付ける必要がありました。。
![Screenshot 2023-06-28 at 14.37.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/b58d4ddf-e5d8-7bd9-ea15-69e0576599cc.png)

AWSではデフォルトルートパスを設定することが推奨されています。


[一般]→[編集]から

[デフォルトルートオブジェクト]に

`index.html`とします。

`/index.html`ではないので要注意です。

![Screenshot 2023-06-28 at 14.39.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/14517417-2ea9-3e16-34a8-77b967b6db42.png)

設定できました。

再度ドメイン名から確認してみましょう。

![Screenshot 2023-06-28 at 14.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/ffd58d5a-17ee-b56e-8e5d-4ddf3510abb4.png)



ドメイン名だけでアクセスできることが確認できました。

以上がS3に格納した静的ファイルをCloudFront経由で閲覧する方法になります。