Skip to content
loading...

re: A crash course on serverless-side rendering with Vue.js, Nuxt.js and AWS Lambda VIEW POST

TOP OF THREAD FULL DISCUSSION
re: Very nice example and article! Any thoughts on how to store the static dist files on S3? I mean lambda for the SSR first hit from the client. Th...

Alright, I spent my weekend on this, here's the insights:

  1. You need a "manually setup" cloudfront distribution and stop relying on the automated edge optimized domain name by serverless.
    You configure the cloudfront distribution with 2 behaviors:
    "/" to your API Gateway
    "/_nuxt/*" to your s3 bucket.
    And you configure manually the custom domain name in cloudfront and in Route53 DNS
    Its a bit of initial work but you'll do this only once. You can remove the serverless plugin for domain management.

  2. I used serverless-finch plugin which handle the upload to s3 + a manually s3 bucket setup
    You can remove the "app.use('/nuxt', express.static(path.join(_dirname, '.nuxt', 'dist')))" as your lambda won't be called anymore for serving static files.

  3. You need to optimize (aka reduce) your dependencies, rely on nuxt-start (check npm), which is a production-only distribution of nuxt.

Exclusively for aws lamba (not sure for other cloud providers):

  • I packaged expressjs in a lambda layer
  • I packaged nuxt-start and my other dependencies in a second layer

So I excluded the directory "node_modules/**" from my serverless deployment. Which means every time I install another npm package, I have to update my layer, you can automate this with a specific ".sh", but it's still cumbersome tbh.

For my serverless deployment, it becomes extremly lightweight and simple:
exclude everything, include only:

  • .nuxt/dist/server/*
  • index.js
  • prismic.config.js
  • nuxt.config.js
  • nuxt.js

The client ones are hosted on s3 thanks to the serverless-finch plugin:
bucketName: ********
distributionFolder: .nuxt/dist/client
keyPrefix: _nuxt

The result is efficient: the lambda size is around 15.7 Kb deployed.

Layers uploaded only once as my deps are not really moving:

  • The expressjs layer: 678 Kb zipped
  • My project dependencies layer: 4.7 Mb zipped

I might be writing a blog post about it here on dev.to soon.

I really need your post =)
i can't integrate static with cloudfront

Thanks Ludovic,

I got things running however couldn't find the distribution listed in cloudfront. Hence, unable to use it to proxy to other aws resources... which seems to be a limit in the serverless domain plugin.

code of conduct - report abuse