search

pimlie / nuxt-lambda

Nuxt.js command to quickly & easily create an optimized lambda
MIT License
43 stars 4 forks source link

Serverless framework example #15

Open alexcroox opened 3 years ago

alexcroox commented 3 years ago

Do you think it would be worth including a serverless framework yml file as an example about how one might deploy this optimally and easily to Lambda? Especially if you recommend not serving the assets it would useful to see the Cloudfront config that directs traffic to the S3 origin for non html requests.

volkipp commented 3 years ago

@alexcroox I've been working through the best way to deploy using this project lately myself. I'm a huge fan of serverless framework, but the hoops you'd have to jump through to make this fit within the serverless framework probably isn't worth it. From what I've seen with the current state of the project the easiest way to deploy and update the lambda is going to be with the AWS cli. From what I've found, here's how I set up the project. Would really love to see some official documentation on how to deploy. If there's an easier way I'd love to hear it!

Basically what I had to do was

Lambda Creation

  1. Create a NodeJS lambda function in the aws console and set the handler to "nuxt.handler" instead of the default: "index.handler"
  2. Run the nuxt-lambda command to compile and zip up the project
  3. Run aws lambda update-function-code --function-name YOUR_FUNCTION_NAME --zip-file fileb://./dist/nuxt.zip

API Gateway Creation

  1. From your lambda function, add an API Gateway trigger. I used the HTTP API as it's a little faster and the new hotness.
  2. In Routes, create a route for ANY request method, and for the path put /{proxy+}
  3. Under integrations select Choose an Existing Integration and select your lambda function from the dropdown

S3

  1. Create an S3 Bucket to house your static assets and client side javascript
  2. Unzip the nuxt.zip that you created from the nuxt-lambda command
  3. upload any files in your /static folder to your s3 bucket
  4. rename the client folder in "nuxt/.nuxt/dist" to "_nuxt" and upload it to your s3 bucket
  5. Make all the files public readable

Setup a Cloudfront Distribution

  1. Create a cloudfront distribution
  2. Add a custom origin and provide the API gateway domain you setup from above
  3. I set the TTL as 0 on caching for all of these, but set the cache values to suit your needs.
  4. Add an S3 origin, and select the S3 bucket you created above.
  5. For the behavior of the s3 origin, make it catch *.* so that it'll pick up any file with an extension. Anything that doesn't have a file extension will fall through to the custom nuxt SSR origin then.

You should be able to hit your cloudfront distribution URL to see your project with SSR running! At that point you'll have to setup DNS and your own certificates, but there are plenty of tutorials for that.

Hopefully that gets you pointed in the right direction!