Posted on Jul 30 Depending on your requirement, There are many ways to host a website in a cloud environment. And tons of frameworks at you r disposal to get the website up and running. Here in this article, we will focus on how we can leverage AWS CloudFront and S3 to set up our static hosting infrastructure. I am planning to discuss the scenario using two articles. In this article, we will focus primarily on infrastructure setup, and the second article would be dedicated to enhancing SEO, using Lambda at Edge functions.The source code for this article is available hereI wanted to emphasize the following, If you come from an agile background (who ain't eh?) say these are our user storiesBefore we start we shall set up our Terraform environment. In Terraform it is vital to maintain your state file secure. I personally prefer Terraform Cloud as the configuration is straightforward and we don’t need to worry about CI/CD (GitOps-like) setup. First, you will need to a create Terraform cloud account here (it’s free). Then create a project and set up a workflow, at this point, you would need to have a GitHub account (or from any VCS provider) to maintain your infrastructure code. I am not going to show-how this, as this is very straightforward.If you have set up your Terraform workspace correctly, you should be able to see a webhook configured in your GitHub account. If you are using a VCS other than GitHub you would need to set this webhook manually. You can follow this to set up the backend.If you refer to the GitHub repo, config.remote.tfbackend describe my remote backend configuration. In this case, I am using a CLI input to configure the backend.Let's have a quick peek into our provider's configuration.As we have set up our remote backend and conquered the provider configuration we can start writing our code.For this section please refer to the s3.tf.There are a couple of things to note here,Let’s take a look at the policy document. See data.tfHere we are specifying two different statements.It is important to note that we will be using Origin Access Control (OAC) instead of legacy OAI (Origin Access Identity) to provide access to S3 bucket content to the CloudFront.See hereFor this article, we shall keep the CloudFront configuration to a minimum. Let’s discover more when we configure the Lambda at edge functions.Here we specify the origin configurations, as most of them are self-explanatory I am not planning to go and explain each one of them. But I think we might need an explanation for SSL certification configuration and function association.If we refer to the repository, my certificate set up is sort of a “Bring your own certificate”, but I have put together a configuration for Email or DNS challenge validation.Please refer to acm.tf. For Email validation use the following.If you see src/astro.js, I have a little edge function there and it is self-explanatory. A little confession, my blog is using the Astro framework, so I grab the code to the edge function from the documentation here.During the deployment, the deployer user would need to:If you skim through the file, you would get a good understanding of how this has been set up.We shall have two policy documents for each use case mentioned earlier,As they are pretty generic, I am not going dig deep, but here we are attaching those two policies, to the deployer group call {var.domain_name}_deployment_group and then create a user called ${var.domain_name}_deployer and add it to the group.There are a couple of variables I have been using, In my case, I use terraform.tfvars file to set the bucket name and the domain name. As I am not super comfortable with sharing my AWS account ID, I have copied the certificate ARN from a previously created certificate and save it against TF_VAR_ssl_certificate_arn. You can configure these variables in Terraform Cloud. ⚠️ Don’t forget to set your AWS access key pair.Depending on your configuration, you may either use CLI to apply the Terraform plan or, execute the plan using Terraform cloud.Once, you’ve deployed the environment, you may need to manually create the IAM key pair using AWS Console, and use it in your CI/CD pipelineTemplates let you quickly answer FAQs or store snippets for re-use.Thank you for sharing this informative and practical guide on how to host a static website in AWS using Cloudfront, S3 and Terraform. I appreciate the clear steps, the screenshots and the code snippets that you provided. I have a question, what will happen when we deploy the code second time? Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Nikitas Gargoulakis - Jun 15 Mohit Kumar - May 17 Lucas Barret - Jun 15 Hussein Alamutu - Jun 15 Once suspended, krishanthisera will not be able to comment or publish posts until their suspension is removed. Once unsuspended, krishanthisera will be able to comment and publish posts again. Once unpublished, all posts by krishanthisera will become hidden and only accessible to themselves. If krishanthisera is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Krishan Thisera. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag krishanthisera: krishanthisera consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging krishanthisera will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.