S3のBucketを非公開にしたままCloudFrontでWeb公開


## 初めに

```S3 Bekcet```を非公開設定で```CloudFront```静的サイトをDeployしました。
その備忘録となります。
今回はNuxtを使って公開をしてみました。

## 開発環境
node：16.17.1
Nuxt： 3.0.0

## デプロイ＆Web公開手順

### Nuxt3のプロジェクト準備
1. まず初めにNuxtのプロジェクトを用意する必要があります。
    依存関係をインストールしたのち、Buildが完了したら、```http://localhost:3000/```に接続し、動作確認をします。

    ```cmd
    $ npx nuxi init sample-nuxt3
    $ npm i
    $ npm run dev
    ```
    この画面が出てくればOKです。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/84350494-1671-1b38-b60d-d7abb0607a6f.png)

    
1. 動作確認が完了したのち、プロジェクトをBuildします。
    今回は静的ウェブサイトホスティングを行うため、以下のコマンドを使用します。
    ```cmd
    $ npm run generate
    ```
    
    ```dist```フォルダと以下ファイルが生成されます。
    今回はこのフォルダ直下をS3にUploadし、CloudFrontにてWeb公開します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/6b076cf7-5e67-6184-a281-d171a4114c79.png)

### AWS準備
1. AWSのS3へアクセスし、Bucketを作成します。
    その後、生成されたdistをS3へアップロードします。
    ![a45394bc-efd5-4d2d-b506-4277717e9454.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/b8c48e29-2d5c-dd36-eda6-dff4b4f51de3.png)

    ```dist```フォルダ以下をS3にUploadします。
    ![b8049b09-5ae6-4655-8d3d-fa0e0654601a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/76fea441-829d-8387-7ced-e96698481cbd.png)

1. ```CloudFront```の設定に移ります。
    [オリジンアクセス] > [コントロール設定]を新規で作成します。
    ![45c667d5-c02e-40fa-aae6-da4049411913.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/bcc19b49-939b-8bb0-b11e-adcdbfabd430.png)

    ↓
    ![1d22a725-1141-4455-bbd7-7d5123c049e2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/128edfa4-9a71-dc43-02ea-7aca7f1a348f.png)


1. 続いて、[ディストリビューション]を作成します。
    作成後、このディストリビューションのARN情報を使用します。

    ![4932eec6-3f19-4bb4-b63f-717d02d4f002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/434439a1-793e-649c-07ae-29237dd4a2fb.png)

    ↓
    ![87a46068-4e32-4a6a-afd6-45fc2a1dfbc7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/92f9be5c-f53a-ca0f-d54b-29c7f1ed128d.png)


1. S3の[アクセス許可]=>[バケットポリシー]を編集します。
    ```CloudFront```から```S3 Bucket```にアクセスするために、以下の設定を行います。

    - ```Resource```は作成したバケット名を入力します。
    - ```AWS:SourceArn```の部分が先ほど作成したディストリビューションのARN情報になります。


    ```
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipalReadOnly",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::sample-nuxt3-deploy/*",
                "Condition": {
                    "StringEquals": {
                        "AWS:SourceArn": "arn:aws:cloudfront::528397217410:distribution/E36XXXXXXXXXXX"
                    }
                }
            }
        ]
    }
    ```

1. 最後に、```CloudFront```のディストリビューション > デフォルトルートオブジェクトを編集します。
    ```index.html```と入力しましょう。
    ![74089bc8-3a38-4b60-bcc5-8516fb724cb9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/d340dc29-de4c-0347-9848-81640787ebb4.png)

    設定が完了しました。ディストリビューションドメイン名をコピーし、URLに遷移します。
    ![45e2134a-054e-4ebf-8808-ea43ec11b254.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/64f50407-faa7-9660-f913-16f43dbb1768.png)

1. 完了です！
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2527164/84350494-1671-1b38-b60d-d7abb0607a6f.png)


## 最後に

```CloudFront```は一定まで無料で使用できますが、リクエスト数に応じて課金されます。
簡単にWeb公開ができますが、個人で公開する際は攻撃に気を付けましょう。
（とんでもない金額になった事例もあるようです）

記事の内容に間違いがありましたら連絡ください！

## 参考サイト・書籍
- [Nuxt公式ページ](https://nuxt.com/)
- [CloudFrontとS3で作成する静的サイト構成の私的まとめ](https://dev.classmethod.jp/articles/s3-cloudfront-static-site-design-patterns-2022/)
- [CloudFront ディストリビューションを使用して Simple Storage Service (Amazon S3) バケットへのアクセスを制限するにはどうすればよいですか?](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-access-to-amazon-s3/)