Subscribe to the RubyPlus Screencast Feed on Apple Podcasts Now!

Deploying Frontend App to Amazon S3 using AWS CLI

By

We are going to deploy a one page static website to S3. Here is the Twitter Bootstrap 4 starter template that will do the job for our first deployment.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

We can create an S3 bucket using the command:

aws s3 mb s3://clickplan.net/

The following command configures a bucket named my-bucket as a static website:

aws s3 website s3://my-bucket/ --index-document index.html --error-document error.html

In our case:

aws s3 website s3://clickplan.net --index-document index.html --error-document error.html

Should the bucket name be www.clickplan.net or clickplan.net?

Create a user that only has access to the clickplan.net website.

aws iam create-user --user-name clickplan-frontend-deploy

JSON response:

goes here-TODO

Create AWS credentials for the front end app deploy user.

aws iam create-access-key --user-name clickplan-frontend-deploy

Create singlebucket.json file.

{
    "Statement": [{
        "Sid": "Stmt12345678",
        "Action": [
            "s3:*"
        ],
        "Effect": "Allow",
        "Resource": [
            "arn:aws:s3:::www.clickplan.net/*",
            "arn:aws:s3:::www.clickplan.net"
        ]
    }]
}

What should be the value for sid? TODO We can provide the user permissions to delete files on S3 if it is deleted locally. This user gets full access only to the clickplan.net bucket. 

aws iam put-user-policy --user-name clickplan-frontend-deploy --policy-name clickplan-frontend-s3-access --policy-document file://singlebucket.json

Create a AWS profile for the front end app deploy user.

aws configure --profile clickplan-frontend-deploy

We need to create an alias so that the domain name points to the bucket name.

aws route 53 change-resource-record-sets --hosted-zone-id "/hostedzone/Z1T19W0V4R87XY" --change-batch file://changebatch.json

The changebatch.json:

{
  "Comment": "Add S3 Bucket",
  "Changes": [
    "Action": "CREATE",
    "ResourceRecordSet": {
      "Name": "www.clickplan.net",
      "Type": "A",
      "AliasTarget": {
        "HostedZoneId": "Z3BJ6K6RIION7M",
        "EvaluateTargetHealth": false,
        "DNSName": "clickplan.net-us-east-1.amazonaws.com"
      }
    }
  ]
}

We can push website content by syncing the local content with S3.

aws s3 sync . s3://clickplan.net/ --acl public-read --delete --profile clickplan-frontend-deploy

Now we can access our front-end app by hitting the www.clickplan.net. Next step is to use Amazon CDN (Cloudfront) and put WAF in front.

References

Related Articles

Watch this Article as Screencast

You can watch this as a screencast Deploying Frontend App to Amazon S3 using AWS CLI

Sharing is Caring