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?
Did you found a solution for this?
Alright, I spent my weekend on this, here's the insights:
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.
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.
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):
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:
The client ones are hosted on s3 thanks to the serverless-finch plugin:
The result is efficient: the lambda size is around 15.7 Kb deployed.
Layers uploaded only once as my deps are not really moving:
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
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.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.