Every brand needs a website. And guess what? We have one and two too.
Once we were done building our JAM stack site, inevitably we had to change a few things here and there. That is what marked the beginning of the deployment drama.
We’ve done it. Here’s how you could do it too!
Upload your code on AWS S3, route it via AWS CloudFront for the HTTPS, connect it to AWS Route53 and you’re good to go.
Now, you must be thinking you’d only need to set these up the first time and later, you’ll just upload to s3. Right? Well, not so fast.
Every time we pushed something to the s3 bucket, we’d have to do all of these.
- Check for correct permissions for the S3 objects which were uploaded.
- Is it working? No, Change didn’t reflect 🤨
- Realize that the CloudFront cache wasn’t flushed 🤦
- Goto CloudFront (CF) dashboard,
- Search for that particular CF distribution.
- Switch to the cache invalidations tab.
- What was that format to flush all objects again? /* or *. Ah, It’s /*.
- Keep refreshing the CF deployment status page, till it says it’s done.
- Verify the change again.
There’s always some inherent frustration going on when a change this small takes so many steps and so much effort.
What are some of the alternatives then?
- Github Actions with Github Pages
- Netlify
- Heroku
- Firebase
- Digital Ocean
- AWS CodePipeline
- AWS Amplify
Since we use AWS, we tried AWS CodePipeline. It was an eye-opening ride, seeing all the service roles, stages, notification configuration on SNS for slack.
But an eye-opening ride shouldn’t feel like you are greying early 👨🦳.
So, we switched to AWS Amplify for deployment. The setup looks super easy, all in one dashboard.
- Create a frontend app.
- Configure git source.
- Specify branches.
- Configure Build step.
- Configure custom domain configuration of Route53, while selecting a domain listed in our account.
- Deploy.
What’s to like in AWS Amplify?
- Single provider – if something goes wrong, tech-support is at one place.
- Single dashboard to set up and manage the whole deployment as well as be notified of.
- Auto configuring of domains with certificates.
- Auto cache flushes on each deployment.
- New endpoints for each PR created with AWS Amplify Preview.
- Build step for static site generators.
- Independently use AWS Amplify to host only front-end applications.
- An option to build your backend with it too.
Here are some Gotchas!
- If you already have an AWS CloudFront distribution for your domain, make sure you have a temporary site in a different provider configured. There may be chances that your site will be down while your site is served via AWS Amplify. This is because Amplify internally uses Cloudfront and may conflict with the existing one.
- The nifty AWS Amplify Pull Previews feature doesn’t support custom domains as of yet.
- No SNS Support for notifications, only emails notification as of now.
- No notifications when a deployment is done in AWS Amplify Previews as of now.
Sayonara.
