Fantastic post, Adnan. Really enjoying this series of threads relating to serverless.
One (silly?) question.
Is further setup required to be able to serve static assets like images etc.?
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 assets and serve them just as from any other server (check this out in the repo).
However, I would argue against this for a real-world use case. You should really use an S3 bucket to store the images and serve them from there.
Another cool fact is that you can use Nuxt to generate static files and host everything on S3, without using AWS Lambda at all. It all comes down to preference.
Hope this clears some things up. I'm glad you liked the article. Stay in touch or send me a message through the chat if you have any questions. 😃
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?
Born before Internet, started as "webmaster", now supporting people mastering it.
I was shaped by XP methodology & DDD architectures. Open source enthusiast.
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):
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 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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Fantastic post, Adnan. Really enjoying this series of threads relating to serverless.
One (silly?) question.
Is further setup required to be able to serve static assets like images etc.?
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 assets and serve them just as from any other server (check this out in the repo).
However, I would argue against this for a real-world use case. You should really use an S3 bucket to store the images and serve them from there.
Another cool fact is that you can use Nuxt to generate static files and host everything on S3, without using AWS Lambda at all. It all comes down to preference.
Hope this clears some things up. I'm glad you liked the article. Stay in touch or send me a message through the chat if you have any questions. 😃
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:
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:
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.