Skip to content

Cloud DevOps Project - Deploy a static website to AWS using S3, CloudFront, and IAM.

Notifications You must be signed in to change notification settings

arabog/udacity_project_1

Repository files navigation

Deploy Static Website on AWS using S3, CloudFront, and IAM Policy.

Pre-requisites:

Launch and Connect to an Elastic Compute Cloud(EC2) instance
IAM policy
EC2 auto scaling grp
Elastic Load Balancers

SNS
SQS
Elatic Container Service: Create a Cluster
Cloud Trail

Cloud Watch
Cloud Formation
AWS Command Line Interface(CLI)
Interacting with S3 bucket using CLI

Introduction

Hosting static websites that only include HTML, CSS, and JavaScript files that require no server-side processing. The whole project has two major intentions to implement:
Hosting a static website on S3 and Accessing the cached website pages using CloudFront, a content delivery network (CDN) service. which offers low latency and high transfer speeds during website rendering.

Note that Static website hosting essentially requires a public bucket, whereas the CloudFront can work with public and private buckets.

Create S3 Bucket

bucket1

Upload files to S3 Bucket

Do not select the udacity-starter-website folder. Instead, upload its content one-by-one. Upload the files and folder such dt the index.html is in the root folder.

bucket2

Or use code
bucket3

Secure Bucket via IAM

{ "Version":"2012-10-17", "Statement":[ { "Sid":"AddPerm", "Effect":"Allow", "Principal": "", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::your-website/"] } ] }

This step is required for static website hosting.

Note - If we were not learning about static website hosting, we could have made the bucket private and wouldn't have to specify any bucket access policy explicitly. In such a case, once we set up the CloudFront distribution, it will automatically update the current bucket access policy to access the bucket content. The CloudFront service will make this happen by using the Origin Access Identity user.

Configure S3 Bucket

bucket4

bucket5

Distribute Website via CloudFront

Domain Name Don't select the bucket from the dropdown list. Paste the Static website hosting endpoint of the form
.s3-website-region.amazonaws.com

From the CloudFront dashboard, click “Create Distribution”.

bucket7

Leave the defaults for the rest of the options, and click “Create Distribution”. It may take up to 10 minutes for the CloudFront Distribution to get created.

bucket9

Access Website in Web Browser

https://d10n1yblhthtc8.cloudfront.net

bucket10

Access the website via website-endpoint, such as http://. s3-website.us-east-2.amazonaws.com/

Access the bucket object via its S3 object URL, such as,
https://.s3.amazonaws.com/index.html

All three links: CloudFront domain name, S3 object URL, and website-endpoint will show you the same index.html content.

About

Cloud DevOps Project - Deploy a static website to AWS using S3, CloudFront, and IAM.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages