DEV Community

How to Host a Static Website on AWS with HTTPS and CI/CD

Anna Aitchison on December 31, 2020

Overview S3 is the obvious place to host a static (frontend code only) website on AWS. It's a simple, serverless way to store and serve ...
Collapse
 
mjgs profile image
Mark Smith

Nice article, it’s good to have a clear and to the point explainer on how to set a basic static site up on AWS.

Do you happen to know if it’s possible to implement branch previews similar to the feature Netlify offers?

Collapse
 
ara225 profile image
Anna Aitchison

That's an interesting point. Off the top of my head, the easiest way to do it would probably be having a second setup on a subdomain and deploying previews to random paths in the S3 bucket by customizing the action. It's probably worth looking into other ways of handling this though - I'd imagine a good few people have already run into this.

Collapse
 
mjgs profile image
Mark Smith • Edited

When you say ‘second setup’ do you mean another GitHub action?

Ideally pushes to any branches but main would be built and deployed to a randomly generated subdomain.

I’ve got my blog on GitHub pages at the minute but I haven’t found a way to do branch previews, so I’m always having to test code in the live site.

Thread Thread
 
ara225 profile image
Anna Aitchison

I would have a second S3 bucket & Cloudront distribution setup to be accessable from a subdomain of your site - so basically the same setup, and have some logic in the Gitub Actions to deploy branches to random folders in the S3 bucket. Doing a new subdomain for each one would probaly be a lot harder, especially if you're not using Route53 for the domain as there's no easy way to automate that with most mainstream domain providers.

Thread Thread
 
mjgs profile image
Mark Smith

So a bit like having a staging and a production environment, then always deploy the non-main branches to staging, and staging environment is always accessible via the same subdomain (e.g. staging.example.com).

Is that what you mean?

I guess that could work as long as each developer had their own separate staging environment.

Thread Thread
 
ara225 profile image
Anna Aitchison

Yeah pretty much though you could go as complicated or as simple as you want.

Thread Thread
 
mjgs profile image
Mark Smith • Edited

Yeah I think fir solo devs it’s probably good enough to have just one staging env.

Though integrating route53 would be really awesome because you could send links to clients for them to test out work in progress, and have multiple preview branches live at the same time.

I’d love to see a simple and clear tutorial on how to use route53 in that way. Perhaps you can recommend one?

Collapse
 
wparad profile image
Warren Parad

I'll do you one better, here's a CFN stack ready to go to automatically create the resources you need to run a site in S3. Just update the files in the v1/ prefix in S3 and the site will be available.

website CFN template

Collapse
 
timo_ernst profile image
Timo Ernst • Edited

If you don't have a custom domain but instead just want to get a HTTPS certificate for your AWS bucket's website endpoints follow these steps:

  1. Open the CloudFront console console.aws.amazon.com/cloudfront/
  2. Choose Create Distribution.
  3. Under Web, choose Get Started.
  4. For Origin Domain Name enter your S3 bucket's website endpoint.
  5. For Viewer Protocol Policy, choose HTTP and HTTPS (Note: Choosing HTTPS Only blocks all HTTP requests).

Instructions from: aws.amazon.com/premiumsupport/know...

To find the url to your static site, open your CloudFront distribution and you should see the domain under "Domain Name". It should look something like 123whatever.cloudfront.net.

You should now be able to access your statically hosted site on S3 bucket via https://123whatever.cloudfront.net/index.html (Replace 123whatever with the subdomain that was given to you)

Note: I noticed that you must specify the filename at the end of the url, so in this case index.html. If you don't do that you will get an error. Does anyone know how to fix this, so the site would be available via https://123whatever.cloudfront.net/index.html?

Collapse
 
eduardokanema profile image
Eduardo Stefani Pacheco

Nice article. Another alternative to host a static or dynamic site is the new AWS Amplify. It's a plug and play system that does from the CI to the hosting.

Cheers

Collapse
 
tominflux profile image
Tom

Seeing everything going on AWS is beggining to feel a bit dystopian

Collapse
 
aminmansuri profile image
hidden_dude

you could put it on Oracle or MS or Google..

(oh.. wait.. equally distopian ;) )

Collapse
 
tominflux profile image
Tom • Edited

mkorostoff.github.io/1-pixel-wealth/

AWS is what makes Bezos so unfathomably wealthy.

Collapse
 
tominflux profile image
Tom

Scenarios where everyone is using just one platform, a monopoly, are pretty freaky!

Collapse
 
kzzm profile image
Kris M.

Interesting article. A nice addition would be to compare using AWS S3 to Github pages.