Deploy assets to s3

[cyrilwanner]

It should be possible to deploy the static assets to s3 if the user wants that.

Ideas:

• Create a custom serverless plugin for it
• after:deploy:resources: Upload .next to s3
• Separate assets by BUILD_ID (configurable max number to keep in S3)
• S3 bucket should be configurable within serverless.yml (a resource link or bucket name)
• Provide a next.js plugin for next.config.js which automatically sets the assets prefix in lambda
• It should be possible to use CloudFront or any other CDN (probably even needed because S3 doesn't support HTTPS)
• next-serverless deploy command if necessary

[dihmeetree]

I use this Serverless plugin atm :) https://github.com/fernando-mc/serverless-finch

I deploy it in my package.json with "deploy:s3": "next export && sls client deploy --no-confirm"

[cyrilwanner]

Thank you for the link @lolcoolkat, I'll check it out before I implement something new :)

[trubi]

I am not sure whether this is what @cyrilwanner was asking..and I have the same problem. I still want to deploy my code to lambda and access it via api gateway, because of SSR and some dynamic URLs. But I want to put all static files (js, css, png, etc) to S3 bucket and prefix all paths to that bucket so browser downloads all this data from S3. If serverless-finch can do this, it's great. But it doesn't seem so from their readme. Any suggestions? Thanks a lot!

[cyrilwanner]

I currently have another project which I have to finish first, but after that, I'll come back to next-serverless and implement the improvements which I have in mind.

But I think it should also be possible with serverless-finch (and without modification of next-serverless). I currently have these steps in mind:

1. Deploy assets to s3 with serverless-finch
2. Set assetPrefix in next.config.js to the s3 url
3. Deploy the next.js app using next-serverless

No guarantee as I didn't have the time to try serverless-finch out yet, but I think it could work like that. On the first request, you get the response back from lambda (server-side rendered) and in this response, all other assets point to the s3 url and are used for the client-side navigation.

Please let me know if this worked for you or if you experienced a problem somewhere :)

I definitely plan to include something like this (e.g. serverless-finch auto configured) into next-serverless to make it easier.

[trubi]

It won't work as easy as you describe because S3 cannot serve files over https (and you will probably also want custom domain name). You need to setup CloudFront (if we are talking just AWS). But you shouldn't do this inside of your website serverless project if you have more complex infrastructure. Instead this should be probably handled separately using cloud formation, terraform or just manually in AWS console. So resolution probably is that serverless-finch is good for this job but you need a little bit more additional setup. Am I wrong?

[cyrilwanner]

Ah yes, you are right. A HTTPS proxy (CloudFront) needs to be set up and you then have to put this url into the assetPrefix setting instead of the direct s3 url. However, serverless-finch can still be used to deploy the assets to s3, but there is an additional configuration step.. If you want to configure this within your project in the serverless.yml file or somewhere else is up to you - it probably depends from project to project on what makes more sense.