ivarvermeulen / nuxt-serverless-at-edge

Nuxt.js Serverless SSR using Cloudfront, Lambda@edge and S3

Nuxt.js Serverless SSR using Cloudfront, Lambda@edge and S3

This project demonstrates how you can utilize lambda@edge to create a serverless Nuxt.js server-side rendering solution. This solution offers several benefits over a setup which uses API Gateway + Lambda

• Control over which requests are handled by Nuxt.js and which request can served directly from S3, no need to serve static assets through API gateway + Lambda
• Control over cachability of responses, by either specifying seperate PathPatterns within Cloudfront CacheBehaviors or returning cache-control headers as part of Nuxt.js response
• Global scalability, lambda@edge functions are replicated accross all AWS regions
• Latency, invocation of API Gateway + Lambda has a higher latency
• Costs, per request costs of API Gateway are higher, certainly when using caching

Required software

• Node.js
• Serverless framework npm install -g serverless
• AWS CLI

Development

• Install NPM dependencies: $ npm install
• Serve the project: $ npm run dev
• Invoke lambda@edge render function locally $ npm run invoke

Deploy

• Deploy the project: $ npm run deploy

Demo

• Visit Demo page

nuxt-serverless-at-edge's Issues

The specified bucket does not exist

Hi

Thanks for this, seems really good. I am struggling with this error:

The specified bucket does not exist

Any ideas?

Error deploying based on Lambda size limits

Hey Ivar, thanks for the demo...trying to get our Nuxt project running serverless, and based on your demo, tried to get running in lambda. If I just build a complete skeleton project with nuxt create app, and only add in serverless follwoing your steps, my deploy errors out saying I already hit the 50MB Lambda function limit. Serverless uses aws api which is like 60MB or something alone. In a real production project with many libraries in node modules, how can we possibly run serverless in lambda with their limits? What am I missing? Thanks

Deploy doesn't work

Hi, I tried deploy your example, and get this errors:

1. First I get "bucketname already exist" I changed
   ` before:deploy:deploy:
   • aws s3 cp --recursive ./.nuxt/dist/client/ s3://nuxt-serverless-at-edge/_nuxt/ --cache-control "max-age=31536000,public,immutable"
   • aws s3 cp --recursive ./static/ s3://nuxt-serverless-at-edge/ --exclude "README.md" --cache-control "max-age=31536000,public,immutable"`

To this:

after:deploy:deploy: - aws s3 cp --recursive ./.nuxt/dist/client/ s3://nuxt-serverless-at-edge/_nuxt/ --cache-control "max-age=31536000,public,immutable" - aws s3 cp --recursive ./static/ s3://nuxt-serverless-at-edge/ --exclude "README.md" --cache-control "max-age=31536000,public,immutable"

2. After fixed first error i get this:
   ERROR

The request could not be satisfied.

The Lambda function returned an invalid request or response to CloudFront.
Generated by cloudfront (CloudFront)

Please, can you update configuration? Thanks!