Host A Static Website Using AWS S3

Overview:

Level Up Bank is a fictional fintech startup that provides customers with a fully digital banking experience. It’s website plays an important role in attracting new customers. It explains the company’s products and services and functions as the main point of interaction with the bank. Right now, the site runs on a physical server hosted locally on site. The IT team has to maintain, troubleshoot, and update this resource. This setup increases operational costs and makes the overall infrastructure more complicated than it needs to be. To simplify operations and reduce expenses, Level Up Bank plans to migrate its website to AWS S3. This move offers several advantages.

Advantages

1. Cost savings: Hosting a static website on AWS S3 is more cost-effective compared to using an EC2 or on-premises server.

2. Improved scalability: AWS S3 provides automatic scalability without requiring any additional effort from the company.

3. High availability: AWS S3 offers high availability and durability, ensuring that the website is accessible to users at all times.

4. Reduced management overhead: Since AWS S3 is a fully managed service, Level Up Bank can reduce the burden of managing and maintaining the website.

Requirements

1. Create an S3 bucket using the AWS Console and upload the index.html file. Download the index.html code needed for the website.
2. Modify the S3 bucket so that it can host a static website and can be reachable through the internet.
3. You should verify internet access using the Bucket website endpoint and not by the Object URL. You can use a private or incognito browser to test.

Foundational Instructions

Create Bucket

— Log into your AWS free tier account. Navigate to the S3 Service in the management console. Search for S3.

— Select Create Bucket.

— Under general configuration, name your bucket.

— Leave all the settings below this part of page in their default settings.

— Select create bucket.

Upload Website

— Now we will need to upload the Index.html file to our newly created bucket.

— After the upload is successful upload.

— You should see the file is hosted in your bucket.

— Scroll back to your bucket and click on permissions.

— Scroll down to Block public access (bucket settings).

— You should see that public access to your bucket is blocked.

— You will need to modify your S3 bucket permissions to allow access.

Modify Bucket Permissions

— Navigate back to the permissions tab of your S3 Bucket.

— Scroll down to Block public access (bucket settings).

— Disable Block all public access.

— Save changes.

— The next section below is Bucket policy.

— You will need to add a JSON script to grant public read access to your website.

— See code example below:

{
    "Version": "2012-10-17",       
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Your-bucket-name/*"
            ]
        }
    ]
}

— Replace Your-bucket-name with the name of your S3 bucket.

— After this is done you will be ready to access your website.

Access Your Website

— Navigate back to bucket properties.

— Scroll down to Static Website Browsing and copy the url under Bucket website endpoint.

— This is the URL for your website. Paste that url into a separate browser.

— You should be able to reach your website.