Open
Description
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.
- 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
- 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