CloudFront Support

[danielcondemarin]

CloudFront Support

Motivation

Currently, API Gateway is being used as a proxy to S3 to serve static assets from /static and /public directories. Whilst this works, is not the best solution as API Gateway is not as cost effective as CloudFront, nor is designed to be used as a CDN.
Also CloudFront comes with features such as compression, logging, domains, certificates etc.

Proposal

custom:
  serverless-nextjs:
    assetsBucketName: cloudfront.isawesome
    cloudFront: true

When cloudFront flag is set to true, a CloudFront distribution is created with API Gateway and S3 as origins. _next build assets and static/ or public/ folder assets are served from the S3 origin. Page requests, such as /blog/:post are served from the API Gateway origin.

This article was used as a reference for implementation:
https://aws.amazon.com/premiumsupport/knowledge-center/api-gateway-cloudfront-distribution/

[ulysset]

Hey @danielcondemarin !
I don't understand if we need both the assetsBucketName and the assetPrefix or only the assetsBucketName. If we need the assetPrefix what should we put? something like "my-bucket-name.cloudfront.net"?

[danielcondemarin]

@ulysset If you are using cloudfront you only need assetsBucketName. Next build asset (/_next/*) requests are handled by the cloudfront distribution so you don’t really need the assetPrefix in that case.

[ulysset]

Ok thank you!
To use a custom domain so the next step is to manually go into CloudFront -> General -> Edit -> Edit custom SSL Certificate or CNAME?

[danielcondemarin]

@ulysset Manually updating the distribution is a bad idea as it will drift the stack.
Instead you can now override the default cloud front configuration, available in v2.2.0-alpha.0. Check https://github.com/danielcondemarin/serverless-nextjs-plugin#serving-static-assets for more details