Scribd
Upload
5 views

03_RV_4th_sem_static_website_s3_cfnt (1)

This document provides a step-by-step guide to deploy a simple static website using AWS S3 for hosting and CloudFront for content delivery. It includes tasks such as creating an S3 bucket, uploading website files, enabling static website hosting, configuring CloudFront, and testing the deployment. Additionally, it outlines the process for cleaning up resources to avoid incurring costs after the lab is completed.

Uploaded by

rishikv.btech23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

03_RV_4th_sem_static_website_s3_cfnt (1)

This document provides a step-by-step guide to deploy a simple static website using AWS S3 for hosting and CloudFront for content delivery. It includes tasks such as creating an S3 bucket, uploading website files, enabling static website hosting, configuring CloudFront, and testing the deployment. Additionally, it outlines the process for cleaning up resources to avoid incurring costs after the lab is completed.

Uploaded by

rishikv.btech23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Deploying a Simple Static Website

using AWS S3 and CloudFront


Objective
In this lab, you will deploy a static website using Amazon S3 for hosting and use Amazon
CloudFront for global content delivery (CDN). By the end of this lab, you will have a highly
available and scalable static website hosted on AWS.

Requirements
 An AWS account.
 Basic knowledge of AWS services.
 A simple static website (HTML/CSS/JS files). You can create a basic HTML page if
you don’t have one.

Architecture Diagram
Tasks
Task 1: Create an S3 Bucket for Static Website Hosting
Amazon S3 (Simple Storage Service) provides object storage that can be used for hosting
static websites.
1. Log in to the AWS Management Console.

2. Navigate to Amazon S3:


• From the AWS Management Console, type S3 in the search bar and click Amazon
S3.
3. Create a New S3 Bucket:
• Click the Create bucket button.
• Bucket Name: Enter a globally unique name for your bucket. (e.g., testuser-
static-website-demo)

• Region: Select the region closest to your target audience. (E.g., Mumbai (ap-
south-1). Make sure in the Object Ownership, ACLs disabled option is selected.
• Block Public Access Settings: Uncheck the box labeled Block all public access. A
static website needs to be publicly accessible.
• In the warning prompt that appears, confirm the changes by checking the
acknowledgment box.

• Leave other options as default and click on Create bucket to complete the creation.
Note: Set the S3 Bucket name in this format < AWS Username >-< keywords >. For
example, if your AWS username is user-10, the name of the bucket can be “user-10-
statics3lab”
4. Upload Your Website Files:
• Download the Source HTML and other static files from the following link
https://rvcollege-srcfiles.s3.ap-south-1.amazonaws.com/staticwebsite-srcfiles.zip
• Extract it in your local computer. These files have to be uploaded in the bucket you
just created.
• Click on your newly created bucket to open it.
• Click Upload.
• Click Add files and select all your HTML and other static image files for your static
website as shown below.
• After adding the files, click Upload at the bottom of the page to complete the
process.
• Rename the HTML file as index.html. Select the Object, click on Actions >
Rename Object.

5. Enable Static Website Hosting:


• Inside your S3 bucket, click on the Properties tab.

• Scroll down to Static website hosting and click Edit.

• Select Enable.
• Index Document: Type index.html (or the name of your home page).
• (Optional) If there ia a custom error page (e.g., 404.html), enter it in the Error
Document field.

• Click Save changes.

6. Make the Files Public:


• Go to the Permissions tab of your bucket.
• Scroll down to Bucket policy and click on Edit.
• Type in the following bucket policy
{

"Version": "2012-10-17",
"Statement": [
{
"Sid": "granting-access-to-s3-objects",
"Principal": "*",
"Effect": "Allow",
"Action": [
"s3:GetObject"
],
"Resource": "arn:aws:s3:::<YOUR-BUCKET-NAME-HERE>/*"
}
]
}
• Click the Save changes.

7. Test the Static Website:


• Copy the Endpoint URL displayed under the Static website hosting section (it will
look like http://<bucket-name>.s3-website-<region>.amazonaws.com).
• Open this URL in a browser to confirm that your website is being served.
Task 3: Create a CloudFront Distribution for the S3 Bucket
Amazon CloudFront is a CDN that delivers your content with low latency and high transfer
speeds by caching the content in edge locations globally.
1. Navigate to CloudFront:
• From the AWS Management Console, search for CloudFront and click on it.

2. Create a CloudFront Distribution:


• Click Create Distribution.
3. Configure the Origin Settings:
• Origin Domain: Select the S3 bucket you created from the dropdown. The field will
auto-fill the S3 bucket's URL. Origin Path: Leave this blank unless your website files
are stored in a subfolder of your S3 bucket.
• Origin name: This will auto-populate, but you can customize it if needed.
• In the Origin access section, choose the recommended option which is Origin
access control settings and click on Create new OAC.

• After creating a new OAC, CloudFront will prompt you to update the S3 bucket policy
to ensure S3 access is restricted to CloudFront.
• Under Default cache behavior, leave everything as default. Make sure the cache
policy is set to CachingOptimized
• Under Web Application Firewall (WAF), select Do not enable security protections to
keep this demo simple. However, in production scenarios, this will change.

• Under Settings, choose Use North America, Europe, Asia, Middle East, and Africa
to keep costs lower, or choose Use all edge locations for global distribution. Also,
set index.html as the Default root object as shown below.
• (Optional) Alternate Domain Names (CNAMEs): If you plan to use a custom domain
(e.g., www.mywebsite.com), enter it here. Otherwise, leave it blank.
• (Optional) SSL Certificate: If you’re using a custom domain, select Custom SSL
Certificate and choose one from AWS Certificate Manager (ACM). If not, select
Default CloudFront Certificate (which uses CloudFront's domain).
• Review all settings and click Create Distribution.
• It may take several minutes for CloudFront to create and deploy your distribution.

Task 3: Update S3 Bucket Permissions (Recommended)


If you intend to use CloudFront as the only entry point to your S3-hosted static website
(and not the direct S3 URL), you can restrict access to the S3 bucket to allow only
CloudFront to serve your files.
1. You can see the status of the Distribution as Deploying. Observe the Yellow Notification
on the top where it says The S3 bucket policy needs to be updated. Click on Copy policy
to copy the OAC S3 bucket policy.

2. Open the S3 bucket, navigate to Permissions > Bucket Policy


3. Click on Edit and replace the older policy with the new OAC policy from the previous
steps and save the changes. The following is the newer OAC policy for your reference
(Don’t Copy from Here).
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<BUCKET-NAME>/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn":
"arn:aws:cloudfront::329599625651:distribution/<DISTRIBUTION-ID>"
}
}
}
]
}
Task 4: Test the CloudFront Distribution
Once your CloudFront distribution status is Deployed and this reflects in Last Modified:
1. Access the Website:
• Copy the Domain Name of your CloudFront distribution (it will look like
dxxxxxxxxxx.cloudfront.net).

• Open this URL in your browser to test whether your website is now served through
CloudFront.

2. Check the Caching:


• You can verify that your website is being cached by refreshing your browser several
times and observing the loading speed.
• CloudFront will cache your website's content in edge locations, reducing the load
time for future visitors.
Task 5: Deleting the Resources
To avoid incurring costs, make sure to delete all the resources once you are done with this
lab.
1. Delete CloudFront Distribution:
• Disable the CloudFront Distribution:
• Go to CloudFront in the AWS Console.
• Select the distribution you created and click Disable.
• Wait until the distribution is disabled. Check the Last Modified column to see the
changes.

2. Delete the CloudFront Distribution:


• Once disabled, click Delete.
• Confirm the deletion.
3. Delete the S3 Bucket:
• Navigate to S3 in the AWS Console.
• Open the bucket you created.
• Select All files and click on Delete to empty the bucket.

4. Delete the Bucket:


• After the bucket is emptied, go back to the bucket list.
• Select the bucket and click Delete.
• Confirm the bucket name to delete the bucket permanently.

You might also like