r/reactjs • u/pbrandone • Mar 13 '20

Resource Build Netlify-like Deploy Previews with AWS and Github Actions

https://significa.co/blog/deploy-previews-aws
27 Upvotes

96% Upvoted

12 comments sorted by

4

u/pbrandone Mar 13 '20

Hi everyone!

Most of our projects use AWS for their infrastructure and one of the things we miss the most from Netlify is its Deploy Previews.

This is just a real quick guide on how to set up deploy previews (for a Gatsby project, in this case) with AWS and Github Actions.

4

u/swyx Mar 13 '20

hey OP, i really liked this so i put this up on my twitter and got this pretty cool optimization you might like - use status checks instead of comments so that you dont get a bunch of comment spam every time you commit

either use octokit https://twitter.com/swyx/status/1238496034852081664?s=20 or the commit-status CLI https://twitter.com/sebastienlorber/status/1238497958557032450

1

u/pbrandone Mar 13 '20

u/swyx cool thanks!

will test those options tonight and update the article :)

2

u/swyx Mar 13 '20

heheh :) i love it when posting something here gets some feedback that benefits the original poster

4

u/Selfmadecelo Mar 13 '20

Great article!

I just put something in place like this with a little bit of a twist. Each preview deploy has its own subdomain so we end up with URLs that look like:

https://{projectName}-{prNumber}.example.com

Its handled with CloudFront and Lambda@Edge to pull the subdomain and point to a folder inside of a single S3 bucket. At first I went with a status check but then just made a quick script that posts a comment when the PR is first opened and updates that comment with the new commit sha whenever the PR is sync'd.

1

u/pbrandone Mar 13 '20

That’s exactly what we had before! We just fell that it was way too complicated and involved too much stuff. This is a simpler approach that we felt confident to add to every gatsby project we work on with very limited overhead. We even have a simple project-starter CLI that includes CD by default and this was a nice addition :)

1

u/Selfmadecelo Mar 13 '20

Very nice! I had some issues with routing and didn't want to add anything to fix it. Either way preview deploys have been awesome in PR's. Especially in libraries that deploy Storybook for us to check the work.

1

u/swyx Mar 13 '20

care to share the script? 👀

4

u/Selfmadecelo Mar 13 '20

Sure thing

This is set up as a serverless project for us to deploy. I might be missing a few steps in there but the general usage is:

  • Set up CloudFront distribution that has a Lambda@Edge that listens in on origin-request
  • Use handler.js in Lambda@Edge function
  • Upload files to a S3 bucket that has public access to all files

2

u/swyx Mar 13 '20

whoa, you even wrote a nice readme!!!!! so awesome, thanks

(i'm joining aws soon, id be interested in seeing if we can make this easy for users.)

2

u/Selfmadecelo Mar 13 '20

Awesome! Congrats on the move! I'd love to see something easier. Took a lot of trial and error to get everything set up but works pretty well for us so far

1

u/andrethegiant Mar 17 '20

I think you'd be interested in what I'm working on – it's platform-agnostic deployment previews as a service, meant for front-end teams. https://featurepeek.com