AWS CLI S3 Static Website Hosting

December 04, 2018

Photo by Carlos Muza on Unsplash

AWS CLI S3 Static Website Hosting

Do Machines Make History? written by Robert L. Heilbroner

Speaks of the propensity of technology to evolve in a linear fashion. It wasn’t until we mastered the concepts of electrical engineering, that we could proceed to build the digital computer. In accordance with Moore’s law, the number of transistors we could put on a single chip increased exponentially with time. This increase in processing power opened up the way for complex software applications. As it stands right now, the vast majority of new jobs are related to software in one form or the other. This is quickly changing. We’re gradually beginning to see the emergence of a new a boom in response to the large quantities of data being produced by the populace. Companies like Amazon, Google and Facebook are training machine learning models with the enormous amount of data they’ve accumulated over the years.

Although your company isn’t going to be dealing with anywhere near the amount of data as say Google, you can still going to benefit from some kind infrastructure to store, access and backup your data. Thanks to economy of scale, cloud providers like Amazon offer a cheap and safe way to store your data. AWS offers multiple services related to data storage but in this tutorial we’ll be taking an in depth look at S3 or Simple Storage Service.

In the context of S3, data is segregated into buckets. A bucket is analogous to a root directory. It’s important to note that all bucket names are unique. This means that after a bucket is created, the name of that bucket cannot be used by another AWS account in any AWS Region until the bucket is deleted.

We can create a bucket using the mb (make bucket) command.

`aws s3 mb s3://`s3-tutorial-youtube.corymaklin.com

Next, we’ll create a simple file.

echo "This is a test" > file.txt

We can copy files to our bucket like any other directory by adding the S3 prefix.

`aws s3 cp file.txt s3://`s3-tutorial-youtube.corymaklin.com

You can list the contents of your bucket by running the following.

aws s3 ls s3://s3-tutorial-youtube.corymaklin.com

Similar to any other OS level command rm deletes the file.

aws s3 rm s3://s3-tutorial-youtube.corymaklin.com/file.txt

Now, let’s take a look at how we can deploy a React application using the Static Website Hosting feature.

git clone [https://github.com/corymaklin/S3_React_Example.git](https://github.com/corymaklin/S3_React_Example.git)

From within the project, run npm install to install all the required libraries and dependencies.

The proceeding command will leverage Webpack to combine and minify all of our Javascript files.

npm run build

Copy the contents of the project to our S3 bucket.

`aws s3 cp --recursive --exclude "node_modules/*"` --exclude ".git/*"  S3_React_Example `**s3://**`s3-tutorial-youtube.corymaklin.com

By default, the files inside of our S3 buckets are private. To leverage static website hosting, we’ll have to update our bucket’s policy to make it public.

{
    "Version":"2012-10-17",
    "Statement":[
        {
            "Sid":"PublicReadForGetBucketObjects",
            "Effect":"Allow",
            "Principal": "*",
            "Action":["s3:GetObject"],
            "Resource":["arn:aws:s3:::s3-tutorial-youtube.corymaklin.com/*"]
        }
    ]
 }
aws s3api put-bucket-policy --bucket s3://s3-tutorial-youtube.corymaklin.com --policy file://policy.json

Select static website hosting under the properties tab.

Select index.html and hit save.

Finally, click on the endpoint to access your web page.

s3-tutorial-youtube.corymaklin.com.s3-website-us-east-1.amazonaws.com/

Cory Maklin
_Sign in now to see your channels and recommendations!_www.youtube.com


Profile picture

Written by Cory Maklin Genius is making complex ideas simple, not making simple ideas complex - Albert Einstein You should follow them on Twitter