Skip to content

Cloudformation template #32

Open
Open
@emulienfou

Description

@emulienfou

Trying to deploy Nextjs 13 using open-next with Serverless/Cloudformation.

Currently unsuccessful, but this is the start template I currently got, hope this could help some of you and can even help me debug it and make it work.

  1. First of you will need the next 3 Serverless plugins to execute scripts, sync build to S3 and configure Lambda@Edge:
npm i --save @silvermine/serverless-plugin-cloudfront-lambda-edge serverless-s3-sync serverless-scriptable-plugin
  1. Here is the full serverless config template file:
service: nextjs-app
useDotenv: true

plugins:
  - serverless-scriptable-plugin
  - serverless-s3-sync
  - '@silvermine/serverless-plugin-cloudfront-lambda-edge'

custom:
  scriptable:
    hooks:
      before:package:createDeploymentArtifacts:
        - npx open-next@latest build
        - mkdir -p ./.open-next/zips
        - cd .open-next/server-function && zip -r ../zips/server-function.zip .
        - cd .open-next/image-optimization-function && zip -r ../zips/image-optimization-function.zip .
  s3Sync:
    - bucketName: ${self:service}-assets
      localDir: .open-next/assets

package:
  individually: true

provider:
  name: aws
  runtime: nodejs16.x
  stage: ${opt:stage, 'dev'}
  region: us-east-1
  endpointType: REGIONAL
  apiGateway:
    shouldStartNameWithService: true
    binaryMediaTypes:
      - "*/*"

functions:
  default:
    description: Default Lambda for Next CloudFront distribution
    name: ${self:service}-${self:provider.stage}-default
    handler: index.handler
    runtime: nodejs16.x
    memorySize: 512
    timeout: 10
    package:
      artifact: .open-next/zips/server-function.zip
    lambdaAtEdge:
      - distribution: DefaultDistribution
        eventType: origin-request
        includeBody: true
      - distribution: DefaultDistribution
        eventType: origin-response
        includeBody: false
      - distribution: DefaultDistribution
        eventType: origin-request
        includeBody: true
        pathPattern: /api/*
      - distribution: DefaultDistribution
        eventType: origin-request
        includeBody: true
        pathPattern: /_next/data/*
      - distribution: DefaultDistribution
        eventType: origin-response
        includeBody: false
        pathPattern: /_next/data/*
  imageOptimization:
    description: Image Lambda for Next CloudFront distribution
    name: ${self:service}-${self:provider.stage}-image-optimization
    handler: index.handler
    runtime: nodejs16.x
    memorySize: 512
    timeout: 10
    package:
      artifact: .open-next/zips/image-optimization-function.zip
    lambdaAtEdge:
      - distribution: DefaultDistribution
        eventType: origin-request
        includeBody: true
        pathPattern: /_next/image

resources:
  Resources:
    DefaultDistribution:
      Type: AWS::CloudFront::Distribution
      Properties:
        DistributionConfig:
          Enabled: true
          PriceClass: PriceClass_All
          Origins:
            - DomainName: 'nextjs-app-assets.s3.us-east-1.amazonaws.com'
              Id: ${self:service}
              CustomOriginConfig:
                HTTPPort: '80'
                HTTPSPort: '443'
                OriginProtocolPolicy: http-only
          DefaultCacheBehavior:
            MinTTL: 0
            DefaultTTL: 0
            MaxTTL: 31536000
            TargetOriginId: ${self:service}
            ViewerProtocolPolicy: redirect-to-https
            AllowedMethods: [ 'GET', 'HEAD', 'OPTIONS' ]
            CachedMethods: [ 'HEAD', 'GET' ]
            Compress: true
            ForwardedValues:
              QueryString: true
              Headers:
                  - x-op-middleware-request-headers
                - x-op-middleware-response-headers
                - x-nextjs-data
                - x-middleware-prefetch
              Cookies:
                Forward: all
          CacheBehaviors:
            - TargetOriginId: ${self:service}
              ViewerProtocolPolicy: https-only
              PathPattern: /_next/static/*
              Compress: true
              AllowedMethods: [ 'GET', 'HEAD', 'OPTIONS' ]
              CachedMethods: [ 'HEAD', 'GET' ]
              ForwardedValues:
                QueryString: false
            - TargetOriginId: ${self:service}
              ViewerProtocolPolicy: https-only
              PathPattern: /api/*
              AllowedMethods: [ 'GET', 'HEAD', 'OPTIONS', 'PUT', 'POST', 'PATCH', 'DELETE' ]
              ForwardedValues:
                QueryString: true
                Cookies:
                  Forward: all
                Headers: [ 'Authorization', 'Host', 'Accept-Language' ]
            - TargetOriginId: ${self:service}
              ViewerProtocolPolicy: https-only
              PathPattern: /_next/image
              AllowedMethods: [ 'GET', 'HEAD', 'OPTIONS', 'PUT', 'POST', 'PATCH', 'DELETE' ]
              ForwardedValues:
                QueryString: false
                Headers: [ 'Accept' ]
            - TargetOriginId: ${self:service}
              ViewerProtocolPolicy: https-only
              PathPattern: /_next/data/*
              AllowedMethods: [ 'GET', 'HEAD' ]
              ForwardedValues:
                QueryString: true
                Cookies:
                  Forward: all
                Headers:
                  - x-op-middleware-request-headers
                  - x-op-middleware-response-headers
                  - x-nextjs-data
                  - x-middleware-prefetch

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationwontfixThis will not be worked on

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions