AWS Website to S3

Overview

In this scenario, you found a job or internship that you want to apply for. In the job description, they have a MINIMUM requirement of S3 knowledge. You noticed they PREFER candidates who have experience with hosting websites in S3 buckets and can deploy code to the bucket. To build your resume, you will put code into an S3 bucket and make the website public directly from the S3 bucket.

Business Requirements

Project Requirements

You might want to delete the EC2 instance from last week if you didn't yet. We won't use it again and it will cost every time you turn on your learner lab. Go terminate/delete it.

Table of Contents

  1. Create an S3 bucket to deploy your website with autoscaling
  2. Login to your AWS Academy account
  3. Select the Region
  4. Deploy a website on an S3 bucket from your computer
  5. Still not sure where to find S3 Buckets how to use it?
  6. Upload your website files to an S3 bucket
  7. Make the S3 bucket a web page to the internet
  8. HTTP vs HTTPS (the ‘S’ is secure = it is encrypted)
  9. Website URL
  10. Troubleshooting & Common Problems
  11. Learning More

Project Instructions

Create an S3 bucket to deploy your website with autoscaling

WHEN YOU MAKE THE BUCKET IT MUST HAVE YOUR NAME IN IT (at least your first or last name)

Get Started with S3

Login to your AWS Academy Account

  1. Open your Learner lab. If you can’t remember how, follow this document

    Connecting to AWS Learner Lab

Select the Region

To access various resources in AWS like an S3 bucket (a network file storage system similar to your hard drive on your computer, but available on the internet), you can do this directly using AWS. First select the location (region) nearest to you.

Change your region to US West by clicking on the N. Virginia near the top right corner of your browser. This change to the Oregon computer/servers that we deployed in Oregon will be found, which is physically closer to Idaho.

AWS Change Region

Deploy a Website on an S3 bucket from your computer

Choose an Option:

  1. Option 1: Do it on your own with AWS Documentation

    Work with S3 Objects

  2. Option 2: Need more guidance on where to start

    Upload a file to an S3 bucket using the interface

    If needed look at the next steps below or google What is AWS S3 or How do you upload files to an S3 bucket?

Still not sure where to find S3 and how to use it?

  1. Learn How to Create an S3 Bucket
  2. Create the S3 bucket
  3. Can't figure it out? Google How do I create an S3 bucket?

Upload your website files to an S3 bucket

  1. Learn how to upload web page files to the S3 Bucket
  2. Upload your index.html file to the S3 bucket
  3. Can't figure it out? Google How do I deploy an file from my computer to an S3 bucket

Make the S3 bucket a web page to the internet

  1. First, make sure that you did the steps above, you have an S3 bucket with your name in it AND make sure that you uploaded an index.html file to the S3 bucket

  2. Overview:

    S3 Hosting Steps

    Website Hosting

  3. Find the URL for your web page:

    Website Endpoints

  4. Enable static web hosting:

    Enable Website Hosting

  5. Modify the bucket permissions ON STEP 2 - Add a bucket Policy:

    MAKE SURE TO replace the code in red with YOUR BUCKET NAME

    Setting permissions for website access

  6. Save changes to the bucket policy. It should like something like this (replace the orange with your bucket name)

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

HTTP vs HTTPS (the ‘S’ is secure = it is encrypted)

For your website to be secure, you need to add an SSL certificate and AWS requires CloudFront distribution on top of the S3 bucket if you want https. Because we aren’t using CloudFront, you have to use http (not https).

We will load our site with http:// (not https://). Passwords would be visible on the network by using http. This is a big security problem. Don’t add authentication to this scenario.

Website URL

The URL of your site should be something like this:

http://yourbucketname.s3.amazonaws.com

Troubleshooting & Common Problems

If the webpage doesn't load

References that might help

Working with Amazon S3 Buckets

Learning More

Want to learn more about AWS? Take ITM310 Applied Cloud Computing.

Build your resume: Deployed a JavaScript website to an AWS S3 bucket

Build your resume (FUTURE project): Implemented AWS CloudFront distribution for a JavaScript website in an S3 bucket

Learning More - Add a Version Control Repository with CI/CD Pipelines

Load the crud.html into your S3 bucket and make sure your database is working too. Add the S3 URL domain to your Firebase console.

Learning More - Add a Version Control Repository with CI/CD Pipelines

AWS CI/CD Pipelines

Build your resume (FUTURE project): Built a CD/CI pipeline from ___________ for a JavaScript website to an S3 bucket