Introduction

A while back I built a basic CRUD app to learn more about app development. For a while I hosted it on an EC2 instance, but shut it down at some point. To get it back up an running I decided to split the front end hosting off and use S3.

I had set up a simple website on S3 using the graphical interface before, so this time I wanted to challenge myself by using the command line with AWS CLI.

Set Up AWS CLI

I’m currently running Linux as my daily driver, so installation was as easy as running:

sudo apt install awscli

From there I needed to create an IAM access key and add it to the configuration. To do that, I went:

  1. IAM -> Users -> <my user>
  2. Security credentials tab -> create access key button
  3. Command Line Interface radio button -> Next
  4. tag is optional - I put “cli”
  5. Save the access and secret keys - I downloaded them to a .csv.

After that, I ran aws configure, entering the public “access” key and the private “secret” key. At first I thought it wanted filenames which store each key, but it just wanted the keys directly

screenshot

To confirm it was working, I ran aws s3 ls and it was!

Create and Configure S3 Bucket

Here are the steps and commands I used next to create and configure the S3 bucket:

1. Create the bucket:

aws s3api create-bucket --bucket films.rickt.io --region us-west-2 --create-bucket-configuration LocationConstraint=us-west-2

I confirmed using aws s3 ls

2. Enable static website hosting:

aws s3 website s3://films.rickt.io --index-document index.html --error-document error.html

3. Remove public access block

aws s3api delete-public-access-block --bucket films.rickt.io

4. Add policy to bucket to allow public read access

To do this I created a file with the following:

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

which I saved as bucket-policy.json

Then, from the same folder as the file I ran the command:

aws s3api put-bucket-policy --bucket films.rickt.io --policy file://bucket-policy.json

To confirm everything worked, I went to the new bucket in S3 and selected Permissions, from there I could see the settings were all in place

screenshot

Upload content

Everything looked good and was ready for files, so I navigated to the /build folder of my front-end (built using React) and ran the following:

aws s3 cp ./ s3://films.rickt.io --recursive

Everything was on the web interface, great!

Get Website URL

Last step - I went Properties tab of the bucket’s page and scrolled to the bottom, there was the url under Static website hosting

screenshot

An update to my domain’s DNS records, some minutes later, and I had the webpage up!

Conclusion

This was a great project to get some experience using the AWS CLI. I was surprised how fairly straight-forward it was. It will be interesting to find out how useful it is going forward. I plan on learning Terraform soon and I’m curious how much that will replace the need for this tool.

Cheers!
Rick