Hosting a static website on Amazon S3

1. Create an Amazon S3 bucket

1. Log in to the AWS Management Console.
2. Select a region.
3. Navigate to the S3 service.
4. Create a new bucket.
   1. Enter a globally unique name.
      
   2. Allow public access.
      
   3. Keep the default values for all other options.

2. Configure bucket for static website hosting

Update the bucket properties to enable static website hosting. You can also specify the index document and, optionally, the error document. The index document is the default webpage that will be displayed when users access your site, while the error document is shown when a requested page cannot be found.

3. Set Permissions

Edit the bucket policy to grant read-only access to all users. Be sure to specify the bucket ARN (Amazon Resource Name).

4. Upload your website files

1. Prepare the files: Ensure you have all the static files of your website ready for upload. This includes HTML, CSS, JavaScript, images and any other necessary assets.
2. Build modern Web apps: If you are using modern front-end development technologies like React, Angular, Vue.js etc., you need to run the build command to generate the optimized, production-ready version of your application. Each framework has its own build command:
   1. React: Run npm run build or yarn build.
   2. Angular: Run ng build --prod.
   3. Vue.js: Run npm run build or yarn build.
3. Upload the generated build: After running the build command, a folder (typically named build or dist) will be generated containing all the necessary files for your Web app. Upload the entire contents of this folder to your bucket.

This process can be automated using Continuous Integration and Continuous Deployment (CI/CD) pipelines on AWS. By setting up a CI/CD pipeline with CodeCommit for source code management and CodeBuild for automated builds and CodePipeline for orchestrating the entire deployment process, you can automatically build and deploy your website files to the bucket whenever changes are made, ensuring a smooth and efficient deployment process.

5. Access your website

Your static website is now accessible.
The URL will be in the format: http://{YOUR_BUCKET_NAME}.s3-website-{REGION}.amazonaws.com, where {YOUR_BUCKET_NAME} and {REGION} should be replaced with the proper values.

Note: this is an HTTP endpoint as S3 does not support HTTPS by default.

However, in most cases, this alone is not sufficient as we often desire to use HTTPS protocol and a custom domain. To achieve this, we need to configure CloudFront.

6. Configure CloudFront

As said before, in our scenario, we require Amazon CloudFront to enable the HTTPS protocol and utilize a custom domain for our static website hosted on Amazon S3. CloudFront acts as a content delivery network (CDN), allowing us to distribute our website’s content globally to users while ensuring fast and secure delivery. Additionally, CloudFront offers advanced caching and optimization features, further enhancing the performance and reliability of our website.

Here is how you create a CloudFront distribution:

1. Choose the previously created bucket as the originating domain and confirm the utilization of the website endpoint rather than the bucket endpoint.
   
2. Select the appropriate protocol policy (e.g. always redirect HTTP to HTTPS).
   
3. Enable or disable Web Application Firewall (WAF) based on your security requirements.
   
4. Choose the appropriate price class to balance performance and costs.
   
5. Configure the alternate domain name that you want to use for your static website.
   
6. Add a certificate. You can provide your existing certificate or let AWS generate one.
   1. Navigate to the AWS Certificate Manager service.
   2. Request a public certificate.
   3. Enter the fully qualified domain name.
      
   4. Keep the default values for all other options.
   5. You’ll notice that the certificate status is “Pending validation”, indicating that AWS is awaiting proof that you own the specified domain. To do this, simply update your DNS configuration by adding a CNAME record with the provided name and value.
      
   6. Wait until the certificate is issued.
7. After that, return to the CloudFront configuration, refresh the list of certificates, and select the one you just requested.
   

7. Add Configure DNS

Finally, in your DNS configuration, add a CNAME record that points to the CloudFront distribution domain name. This is necessary to ensure that traffic directed to your domain is routed correctly to the CloudFront distribution, which in turn serves the content from the origin (i.e. the S3 bucket).

Example: