Deploy-a-Static-Website-on-AWS

Hosting a static website on S3 and Accessing the cached website pages using CloudFront content delivery network (CDN) service.

Create S3 Bucket

• Navigate to the "AWS Management Console" Page, type "S3" in the "Find Service" box and then select "S3" and click on "Bucket"

• The Amazon S3 dashboard displays. Click “Create bucket”

 In the General configuration, enter a “Bucket name” and a region of your choice. Note: Bucket names must be globally unique.

• In the Bucket settings for Block Public Access section, uncheck the “Block all public access”. It will enable the public access to the bucket objects via the S3 object URL.

Note - We are allowing the public access to the bucket contents because we are going to host a static website in this bucket. Hosting requires the content should be publicly readable.

Click “Next” and click “Create bucket”.

Once the bucket is created, click on the name of the bucket to open the bucket to the contents.

I created my "S3" bucket called "layorstatic2257bucket"

Upload files to the S3 bucket

• Once the bucket is open to its contents, click the “Upload” button.

• Click the "Add files" and “Add folder” button, and upload the Student-ready starter code content from your local computer to the S3 bucket.

• Click "Add files" to upload the index.html file, and click 'Add folder' to upload the css,image and vendor folders.

Secure bucket via IAM

• Click on the “Permissions” tab.

• The “Bucket Policy” section shows it is empty. Click on the Edit button.

Empty bucket policy. Check this policy again after setting up the CloudFront distribution.

• Enter the following bucket policy replacing your-website with the name of your bucket and click “Save”.

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

You will see warnings about making your bucket public, but this step is required for static website hosting.

Configure S3 bucket

• Go to the Properties tab and then scroll down to edit the Static website hosting section.

• Click on the “Edit” button to see the Edit static website hosting screen. Now, enable the Static website hosting, and provide the default home page and error page for your website.

Specify your index document (must be the same as the index.html file so in my case it would be index.html) Specify your error document (must be the same as the index.html file so in my case it would be index.html)

Link that explain above point

Did you notice that enabling the static website hosting requires you to make your bucket public? In the snapshot above, it says "For your customers to access the content at the website endpoint, you must make all your content publicly readable."

• After successfully saving the settings, check the Static website hosting section again under the Properties tab. You must now be able to view the website endpoint as shown below

Distribute website via cloudfront

• Select “Services” from the top left corner and enter “cloud front” in the “Find a service by name or feature” text box and select “CloudFront”.

• From the CloudFront dashboard, click “Create a cloudfront Distribution”.

• Use the following details to create a distribution:

Configurations - Origin details

Configurations - Cache behavior, key and origin requests

• 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.

Note - Remember, as soon as your CloudFront distribution is Deployed, it attaches to S3 and starts caching the S3 pages. CloudFront may take 10-30 minutes (or more) to cache the S3 page. Once the caching is complete, the CloudFront domain name URL will stop redirecting to the S3 object URL.

Access website in a browser

Note - In the steps below, the exact domain name and the S3 URLs will be different in your case.

• Open a web browser like Google Chrome, and paste the copied CloudFront domain name (such as, d2bsi81nksibhz.cloudfront.net) without appending at the end. The CloudFront domain name should show you the content of the default home-page, as shown below:

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

• Access the bucket object via its S3 object URL, such as,http://layorstatic2257bucket.s3-website-us-east-1.amazonaws.com