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: Hey Luca Not a silly question at all! To be direct, no further setup is required. Even though a lambda function is ephemeral, you can store static...
 

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. Then any other nuxt dist files needed once the the SPA is hydrated on the client are then retrieved form the s3 bucket/cloud-front distribution?

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