Nuxt3をLambdaで超高速にSSR！サーバーサイドレンダリングをサーバーレスでコスパよく行う方法😎

$ yarn add serverless-layers -D
# or
$ serverless plugin install --name serverless-layers

yarn add serverless-apigw-binary -D

provider:
  runtime: nodejs18.x
  deploymentBucket:
    name: "${self:custom.deploymentBucketName}"

functions:
  nuxt:
    # NuxtJSのビルド結果のパスを指定
    handler: .output/server/index.handler
    # eventsには全てのリクエストをNuxtJSへ流すように設定(場合によってはGETに限定してもOK)
    events:
      - http: ANY /
      - http: ANY /{proxy+}

plugins:
  - serverless-apigw-binary
  - serverless-layers

custom:
  deploymentBucketName: "layer-bucket-name"
  apigwBinary:
    types:
      # 全てのバイナリーをサポート
      - "*/*"
  webpack:
    packager: "yarn"
  serverless-layers:
    packageManager: "yarn"

package:
  # NuxtJSのServerモジュールをパッケージに含める
  patterns:
    - "!**/**"
    - ".output/server/**"
  excludeDevDependencies: true
  individually: true

$ aws s3 mb "s3://layer-bucket-name"

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  nitro: {
    preset: "aws-lambda",
    serveStatic: false, // 画像はCloudFrontによるCDN提供を見据えてfalse
  },
});

$ yarn install
$ nuxt build
$ npx sls deploy

Resources:
  AssetsHostingCloudFront:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        # General
        Comment: "AssetsHostingCloudFront"
        Enabled: true
        HttpVersion: http2
        PriceClass: PriceClass_All
        Aliases:
          - "{your custom domain}"
        ViewerCertificate:
          MinimumProtocolVersion: TLSv1.2_2019
          AcmCertificateArn: "{your ACM arn}"
          SslSupportMethod: sni-only
        Origins:
          - DomainName: '{your bucket name}.s3-${self:provider.region}.amazonaws.com'
            Id: 'S3-xxxx-xxxx'
            S3OriginConfig:
              OriginAccessIdentity: !Sub origin-access-identity/cloudfront/${AssetsHostingOriginAccessIdentity}
            ConnectionAttempts: 3
            ConnectionTimeout: 10
        # Behaviors
        DefaultCacheBehavior:
          TargetOriginId: 'S3-xxxx-xxxx'
          ViewerProtocolPolicy: allow-all
          CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6
          Compress: true
        # Error Pages
        CustomErrorResponses:
          - ErrorCode: 403
            ErrorCachingMinTTL: 10
            ResponsePagePath: "/"
            ResponseCode: 200
        # Restrictions
        Restrictions:
          GeoRestriction:
            RestrictionType: none

  AssetsHostingOriginAccessIdentity:
    Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: "AssetsHostingOriginAccessIdentity"

  AssetsHostingBucket:
    Type: "AWS::S3::Bucket"
    Properties:
      BucketName: 'your bucket name'
      AccessControl: Private
      PublicAccessBlockConfiguration:
        BlockPublicAcls: true
        BlockPublicPolicy: true
        IgnorePublicAcls: true
        RestrictPublicBuckets: true

  AssetsHostingBucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref AssetsHostingBucket
      PolicyDocument:
        Id: PolicyForCloudFrontPrivateContent
        Version: "2012-10-17"
        Statement:
          - Sid: "1"
            Effect: Allow
            Action: s3:GetObject
            Resource: 'your bucket arn'
            Principal:
              CanonicalUser: !GetAtt AssetsHostingOriginAccessIdentity.S3CanonicalUserId