Nuxt.jsで作成したSPAをS3 + CloudFrontにデプロイする
環境
- Node.js 12.18.0
- Nuxt.js 2.14.5
手順
基本的にはNuxt.jsの公式ドキュメント通り進めてください。 しかし、そのままだとエラーが発生してしまいます。以下でその解消方法について説明します。
ポリシーの変更
AWS上で作成するポリシーを以下のように変更してください。
example.com
のところはS3のバケット名に変更してください。
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": ["s3:ListBucket"], "Resource": ["arn:aws:s3:::example.com"] }, { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectAcl", "s3:GetObject", "s3:GetObjectAcl", "s3:DeleteObject", "s3:ListMultipartUploadParts", "s3:AbortMultipartUpload" ], "Resource": ["arn:aws:s3:::example.com/*"] }, { "Effect": "Allow", "Action": [ "cloudfront:CreateInvalidation", "cloudfront:GetInvalidation", "cloudfront:ListInvalidations" ], "Resource": "*" } ] }
gulpfile.jsの変更
gulpfile.js
のheaders
の部分を以下のように変更してください。
headers: { 'x-amz-acl': 'private', /* 'Cache-Control': 'max-age=315360000, no-transform, public', */ },
以上の変更を加えることで、適切にデプロイができるようになります。
直接アクセスするとエラーが発生する
Nuxt.jsで作ったSPAをS3 + CloudFrontの環境にデプロイすると、トップ以外に直接アクセスをした場合にエラーが発生してしまいます。 それを回避する方法としては、CloudFrontのカスタムエラーレスポンスの設定を行います。
CloudFrontのErrorPagesのタブにて以下の情報でカスタムエラーレスポンスを作成してください。
- HTTP Error Code -> 403
- Error Caching Minimum TTL -> 0
- Response Page Path -> /
- HTTP Response Code -> 200