初めに
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 generatedistフォルダと以下ファイルが生成されます。
今回はこのフォルダ直下を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公開ができますが、個人で公開する際は攻撃に気を付けましょう。
（とんでもない金額になった事例もあるようです）
記事の内容に間違いがありましたら連絡ください！