AWS – Deploy a Static Website to S3 using the CLI

(This article assumes a folder with existing code for the website on your local machine. )

The steps are:

  1. (Optional) If the bucket already exists, remove it using rb.
  2. Create the bucket using mb.
  3. Recursively copy the local web files to the target using cp.
  4. Instruct S3 to treat the bucket as a static website.
  5. Apply the policy to the bucket.

Since I’ve already run through this particular exercise, I need to delete the existing bucket using the rb (“remove bucket”) command with –force to delete a bucket full of resources as evidenced below.

Screen Shot 2016-07-01 at 3.48.54 PM

rb is a little dangerous since someone else could snap up the name I want to use, but for the purposes of demonstration, this is fine.

aws s3 rb s3://gma-web --force

If we executed aws s3 ls here, we would see that gma-web no longer exists. For now, we’ll go ahead and create the bucket.

aws s3 mb s3://gma-web

As a sanity check, ls the new bucket. No files will display since our newly created bucket is empty.

aws s3 ls s3://gma-web

Copy the code using cp with –recursive.

aws s3 cp gma_v1 s3://gma-web --recursive

Since we want our bucket to behave like a static website, we need to inform S3 of this.

aws s3 website s3://gma-web/ --index-document index.html --error-document error.html

As with many things UNIX, no news is good news if our prompt returns with no message.

Users will get a 403 error when navigating our site, so we need to apply a policy letting them in.

To create the Policy, I simply used nano to create a file called policy.json with the following contents. Except for gma-web shown below, everything else is fairly standard.

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

While it may be tempting to change the “Version” to the current date, AWS will return an error if you do so.

To put the policy in place: [Source]

aws s3api put-bucket-policy --bucket gma-web --policy file://policy.json

Subsequent updates can be as simple as:

aws s3 cp index.html s3://gma-web

And now our sample site renders just fine.

Screen Shot 2016-07-01 at 4.20.58 PM

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s