Step-by-Step Guide to Deploy a Static Website using S3, CloudFront, Route 53, and AWS ACM

Objective

This project was to set up a secure, and fast website using AWS services, including CloudFront, Route 53, and ACM. The goal was to enable HTTPS for secure communication, configure DNS settings for domain routing, and leverage CloudFront for improved performance and global distribution.

Part 1: Deploy a Static Website on AWS S3

1. Open the AWS Management Console

• Navigate to the AWS Console.

• Sign in with your AWS credentials.

2. Go to the S3 Console

• In the AWS Management Console, type S3 in the search bar and select S3 from the services list to open the S3 Dashboard.

3. Create a New Bucket

• Click Create bucket to start the process.

• Enter a unique bucket name. The name must be globally unique across all AWS accounts.

4. Modify Block Public Access Settings

• Under the Block public access (bucket settings) section, uncheck Block all public access.

• A warning will appear. Confirm by checking the option: Turning off block all public access might result in this bucket and the objects within becoming public. This is important for serving a static website.

5. Create the Bucket

• After configuring the settings, click Create bucket. Your bucket will be created successfully.

Enable Static Website Hosting

1. Access the Bucket

• Once the bucket is created, click on the Bucket name to open its details.

2. Go to the Properties Tab

• In the bucket details page, click on the Properties tab in the left-hand menu.

• 

3. Enable Static Website Hosting

• Scroll down to the Static website hosting section and click Edit.

• Select the option Enable to turn on static website hosting for the bucket.

4. Configure the Website

• In the Index document field, enter index.html. This file will be served when users visit the website.

• In the Error document field, enter error.html (or your preferred error page). This file will be shown when a page is not found or an error occurs.

5. Save Changes

• Click Save changes. The S3 bucket is now configured to host a static website.

Access the Website and Set Permissions

1. Access the Website URL

• Once static website hosting is enabled, an Endpoint URL will be generated.

• Click the provided URL to access your website. If you see an "Access Denied" error, it means the objects in the bucket are not publicly accessible yet.

2. Update Bucket Permissions

• To resolve this issue, you need to modify the Bucket Policy so that the website's content can be accessed publicly.

3. Go to the Permissions Tab

• Navigate to the Permissions tab in the bucket settings.

• Scroll down to the Bucket Policy section and click Edit.

4. Add a New Bucket Policy

• Click Add new statement to create a new policy.

• In the Actions section, search for and select GetObject under S3 actions.

• In the Resources section, copy the Bucket ARN (Amazon Resource Name) for your S3 bucket. It will look like this: arn:aws:s3:::your-bucket-name/*.

• Paste this ARN into the Resource field of the policy.

5. Set the Bucket Policy

Your bucket policy should now look like this:

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "Statement1",

"Effect": "Allow",

"Principal": "*",

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::staticwebsitehostbucket2610/*"

}

]

}

6. Save Changes

• Click Save changes to apply the updated policy.

Upload Your Website Files

1. Upload Files to S3 Bucket

• In the Objects tab of your S3 bucket, click Upload.

• Select your website files, including index.html, error.html, and any other assets like images or CSS files, and upload them to the bucket.

2. Refresh the Website URL

• Once the files are uploaded, refresh the Endpoint URL.

• Your static website should now be live and accessible via the S3 URL.

You’ve successfully deployed your static website on AWS S3. Your website is now publicly accessible, and you can manage it through the S3 Console.

Part 2: Setting Up CloudFront for Your Static Website Hosted on S3

1. Open the CloudFront Console

• Go to the CloudFront Console.

2. Create a New CloudFront Distribution

• Click Create Distribution.

3. Select the Origin Domain

• Under Web, choose Get Started.

• In the Origin Settings section, select your S3 bucket as the Origin Domain.

  • This is the S3 bucket where your static website is hosted.

4. Configure the Price Class

• Scroll down to the Price Class section.

• Choose a price class based on your requirements

5. Set the Default Root Object

• In the Default Root Object field, enter index.html (or the name of your main HTML file). This will be the default file served when users access your CloudFront distribution.

6. Create the Distribution

• Once all settings are configured, click Create Distribution.

7. Wait for CloudFront to Deploy

• After the distribution is created, it will take some time (usually 15-20 minutes) for CloudFront to propagate your changes.

• Once the distribution is deployed, you’ll see a Domain Name under the General section (e.g., d12345678.cloudfront.net).

8. Access the CloudFront Distribution

• Copy the Domain Name URL provided by CloudFront.

• Paste the URL into a new browser tab. You should now see your static website hosted via CloudFront.

You’ve successfully set up CloudFront for your static website hosted on S3. The content is now delivered faster and securely using CloudFront’s global content delivery network (CDN).

Part 3: Setting Up Route 53 DNS for Your CloudFront Distribution

1. Go to the Route 53 Console

• Log into your AWS Management Console.

• Navigate to Route 53.

2. Create a Hosted Zone

• Click on Get Started.

• Click on Create Hosted Zone

3. Enter Your Domain Name

• In the Domain Name field, enter the domain name you have purchased (e.g., example.com).

• Select Public Hosted Zone for most use cases.

• Click Create Hosted Zone.

4. Update Nameservers (NS)

• After creating the hosted zone, you'll see a set of Nameservers listed under your hosted zone details.

• These nameservers need to be updated at your domain registrar where you purchased your domain. This can take 24 to 48 hours to propagate globally.

You can monitor the DNS propagation using a tool like What's My DNS.

5. Create a DNS Record for CloudFront

• In the Route 53 console, click Create Record.

• Enable Alias (this is important because an alias record points directly to CloudFront without needing an IP address).

• Choose Alias to CloudFront Distribution from the dropdown.

• In the Route traffic to field, select the CloudFront distribution that you want to use (copy and paste the domain name of your CloudFront distribution here).

  • CloudFront Domain Name typically looks like d1234abcd5678.cloudfront.net.

• Click Create Record.

6. Open the Domain Name in a New Tab

• Once the DNS changes propagate, open your domain (e.g., example.com) in a new tab.

• If you see the error: "The request could not be satisfied," follow these steps.

7. Edit CloudFront Settings

• Go to the CloudFront console.

• Find the distribution you created earlier and click on its ID to open its settings.

• In the General section, click Edit.

8. Add Alternate Domain Name (CNAME)

• Scroll down to the Alternate Domain Names (CNAMEs) section.

• Click Add Item and enter your domain name (e.g., example.com).

• Click Save Changes.

9. Refresh the Domain URL

• After saving changes, refresh your domain URL in the browser. It may take a few minutes to reflect.

You have successfully set up Route 53 DNS for your CloudFront distribution

Step 4: Adding an ACM Certificate to Make Your Website Secure

1. Request a Public ACM Certificate

1. Go to the AWS Certificate Manager Console:

   • Open the AWS Management Console.

   • Navigate to the Certificate Manager (ACM) service.

2. Request a New Certificate:

   • Click the Request button.

• Select Request a public certificate.

• Click Next.

3. Enter Your Domain Name:

   • In the Domain Name field, enter the fully qualified domain name (FQDN) you own, such as example.com or www.example.com.

• Click Next.

4. Choose DNS Validation:

   • Choose DNS Validation (this method is easier to automate and faster than email validation).

   • Click Next.

5. Review and Request:

   • Review the information you’ve entered and click Confirm and request.

2. Validate Your Domain in Route 53

After requesting the certificate, you need to prove that you own the domain by validating it via DNS.

1. Find the DNS Validation CNAME Record:

   • Once you request the certificate, you will see DNS validation instructions. AWS will provide you with a CNAME record to add to your domain's DNS settings (Route 53).

2. Add the CNAME Record in Route 53:

   • Open the Route 53 Console.

   • Navigate to your Hosted Zone for the domain you've requested the certificate for.

   • Click Create Record.

   • In the Record Name field:

     • Copy the CNAME name from the certificate details (before the yourdomainname.com part) and paste it here.

   • In the Record Type dropdown, select CNAME.

   • In the Value field:

     • Copy the CNAME value from the ACM certificate details and paste it here.

   • Click Create Record to save the DNS record.

3. Wait for the Validation:

   • After adding the CNAME record, AWS will check if it exists in your DNS settings. Validation can take anywhere from a few minutes to a few hours.

   • Once validated, the status of your ACM certificate will change to Issued.

3. Attach the ACM Certificate to Your CloudFront Distribution

Now that the certificate is issued, it’s time to configure CloudFront to use it.

1. Go to the CloudFront Console:

   • Navigate to the CloudFront service in the AWS Management Console..

   • Click on the ID of the distribution to open its settings.

2. Edit the CloudFront Distribution:

   • In the General tab, click Edit.

3. Add the ACM Certificate:

   • Under the SSL Certificate section, select Custom SSL Certificate.

   • From the dropdown, select the ACM certificate that you just requested and was issued for your domain.

4. Set Viewer Protocol Policy:

   • In the Viewer Protocol Policy section, select Redirect HTTP to HTTPS. This ensures that all HTTP traffic is automatically redirected to HTTPS.

5. Save Changes:

   • Click Yes, Edit to save your changes.

4. Verify HTTPS is Working

Once CloudFront has been updated with the ACM certificate, check that your website is accessible over HTTPS.

1. Visit your website:

   • Open a browser and go to your domain, for example: https://example.com or https://www.example.com.

   • Ensure the padlock icon appears next to your URL, indicating that the connection is secure.

2. Check SSL Certificate:

   • Click the padlock icon in the browser’s address bar to verify that the certificate is valid and issued by ACM.

Your CloudFront distribution is now configured to serve your website over HTTPS using the ACM SSL/TLS certificate.

Summary

In this project, I successfully created a highly secure and optimized website hosted on Amazon Web Services (AWS). By using CloudFront for content delivery, Route 53 for DNS management, and ACM for SSL/TLS certificates, I ensured that the website is both fast and secure. I learned how to request and validate an SSL certificate for HTTPS, configure DNS settings, and integrate these components for a seamless, professional website setup.