“Hosting a Static Website on AWS with CI/CD”

Introduction

• In this guide, we will go through the process of hosting a static website using Amazon Web Services (AWS) and managing it with Codepipeline for continuous integration and deployment (CI/CD). This setup ensures that any changes made to your code are automatically deployed to your website, reflecting updates seamlessly. We will utilize Amazon S3 for storage, CloudFront for content delivery, and Namecheap for domain management.

Components Used

• Amazon S3: For storing static website files such as HTML, CSS, and JavaScript.
• Amazon CloudFront: For distributing content globally with low latency and high transfer speeds.
• AWS CodePipeline: For automating the deployment process when changes are made in GitLab.
• Namecheap: For managing your custom domain name.

Diagram

Step 1: Create an S3 Bucket

1. Create a S3 Bucket:

• Log in to the AWS Management Console.
• Navigate to S3 and create a new bucket.

• Name your bucket the same as your domain (e.g., hetpatel7131.store) to ensure compatibility with the website.

• Ensure that direct public access to the S3 bucket is denied. This means users must access your website via CloudFront, which acts as a secure intermediary.

2. Enable Static Website Hosting:

• Go to the properties of your newly created bucket.
• Enable static website hosting.

• This configuration allows the S3 bucket to serve the homepage and error pages when accessed.

3. Upload Your Website Files:

• Upload your static website files (e.g., index.html, error.html, CSS, and JavaScript files) into the S3 bucket.

Step 2: Set Up CloudFront Distribution

1. Use AWS Certificate Manager (ACM) to request a certificate for your domain.

2. Create a CloudFront Distribution:

• In the AWS Management Console, navigate to CloudFront and create a new distribution.

• Set the Origin Domain to your S3 bucket.

• Note: Selecting WAF is mandatory; otherwise, you won’t be able to proceed. This option is not included in the free tier and may cost a few cents per hour.

Step 3: Configure Domain in Namecheap

1. Create CNAME Records:

• Log in to your Namecheap account and navigate to the Domain List.
• Find your domain and click on Manage.
• Under the Advanced DNS tab, create a CNAME record

• When setting up a static website on AWS S3 with CloudFront, you need to configure the domain correctly using CNAME records in Namecheap. These records ensure that your custom domain resolves properly to the CloudFront distribution and supports HTTPS.

2. CNAME Record for @ (Root Domain)

• This record points the root domain (e.g., hetpatel7131.store) to the CloudFront distribution.
• The symbol @ refers to the apex/root domain (the domain without any prefix like www).
• This record ensures that users who access your website directly through https://hetpatel7131.store are routed through CloudFront, which serves the website’s static content from your S3 bucket.

3. CNAME Record for ACM Certificate Validation

• This record is required for AWS Certificate Manager (ACM) to validate that you own the domain.
• When issuing an SSL/TLS certificate to enable HTTPS, AWS needs to verify your domain ownership.
• Adding this CNAME record allows automated verification by ACM, proving that you control the domain hetpatel7131.store.
• Once this validation is complete, AWS will associate the SSL certificate with the CloudFront distribution, allowing the website to support secure HTTPS access.

4. CNAME Record for www (Subdomain)

• This record points the www subdomain (e.g., www.hetpatel7131.store) to the CloudFront distribution. Reason:
• Some users may try to access your site using www (e.g., https://www.hetpatel7131.store).
• This record ensures that both the www and root versions of your domain point to the same content served by CloudFront.
• Visitors will see the same website whether they type hetpatel7131.store or www.hetpatel7131.store in their browser.

Why These Three CNAME Records Are Needed

• Root Domain Configuration: Ensures that the main domain (without www) routes to the CloudFront distribution, serving your static website from the S3 bucket.
• SSL/TLS Validation: Verifies your ownership of the domain through ACM, so you can secure your site with HTTPS.
• Subdomain Configuration (www): Provides flexibility for users accessing your site with or without the www prefix by routing both to the CloudFront distribution.
• This setup ensures your website is accessible, secure, and optimized for all users. With these records, both the root domain and www version will serve content efficiently through CloudFront, while the ACM validation guarantees that HTTPS is properly enabled.

Step 4: Set Up GitLab for CI/CD

Push Your Code to GitLab:

• Create a new repository in GitLab and push your static website files to this repository. Use Git commands to add, commit, and push your files.
• My GitHub code link: Click Here.

Step 5: Set Up GitLab for CI/CD

1. Create an AWS CodePipeline:

• In the AWS Management Console, go to CodePipeline and create a new pipeline.

• For the source provider, choose GitLab and connect to your repository. You may need to authorize AWS CodePipeline to access your GitLab account.

• Set up the pipeline stages to deploy to your S3 bucket directly from GitLab.

2. Automate Deployments:

• Once the pipeline is set up, any changes pushed to the GitLab repository will trigger the pipeline, which deploys the latest code to the S3 bucket automatically.
• Before invalidation and before changing code in GitHub.

Step 5: Invalidate CloudFront Cache

Set Up CloudFront Invalidation:

• After the deployment is complete, set up an invalidation in CloudFront to clear the cache, ensuring users see the latest version of your site.

• You can automate this step within your CodePipeline by adding an invalidation action after the deployment to S3.
• After changing index.html and implementing invalidation to get latest content immediately.

Conclusion

• By following these steps, you can successfully host a static website on AWS, leveraging the power of CloudFront for fast content delivery and Codepipeline for automated deployments. This setup allows you to make updates quickly, and users will always access the latest version of your site through your custom domain.