Passion make things more better

Ruby on Rails / React.js / Swift / AWS / Docker

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.jsheadersの部分を以下のように変更してください。

  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

参考