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

Last updated at 2023-02-15Posted at 2023-02-12

初めに

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

開発環境

node：16.17.1
Nuxt： 3.0.0

デプロイ＆Web公開手順

Nuxt3のプロジェクト準備

まず初めにNuxtのプロジェクトを用意する必要があります。
依存関係をインストールしたのち、Buildが完了したら、http://localhost:3000/に接続し、動作確認をします。
```
$ npx nuxi init sample-nuxt3
$ npm i
$ npm run dev
```
この画面が出てくればOKです。
動作確認が完了したのち、プロジェクトをBuildします。
今回は静的ウェブサイトホスティングを行うため、以下のコマンドを使用します。
```
$ npm run generate
```
distフォルダと以下ファイルが生成されます。
今回はこのフォルダ直下をS3にUploadし、CloudFrontにてWeb公開します。

AWS準備

AWSのS3へアクセスし、Bucketを作成します。
その後、生成されたdistをS3へアップロードします。

distフォルダ以下をS3にUploadします。
CloudFrontの設定に移ります。
[オリジンアクセス] > [コントロール設定]を新規で作成します。

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

↓

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"
                }
            }
        }
    ]
}

最後に、CloudFrontのディストリビューション > デフォルトルートオブジェクトを編集します。
index.htmlと入力しましょう。

設定が完了しました。ディストリビューションドメイン名をコピーし、URLに遷移します。
完了です！

最後に

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

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

参考サイト・書籍

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up