Setup AWS S3 for Frontend Apps

S3 has a service which can turn a bucket into a web hosting site and is easy to configure

Setting up the bucket

1. Go to the AWS S3 page.
2. Click on "Create bucket"
3. Enter the name of your bucket
   • A good naming scheme is "ecs" followed by the project name, ie ecs-apollo
4. Select "US West (Oregon)"
5. Leave the rest as is
6. Once the bucket is created, go to "Properties"
7. Select "Static web hosting"
   • Check "Use this bucket to host a website"
   • For "Index Document", set "index.html"
   • For "Error document", set "index.html" as well
   • You can leave "Redirection rules (optional)" blank
   • Note the website url: http://<bucket-name>.s3-website-<region>.amazonaws.com
8. Select "Permissions"
9. On "Block public access", uncheck the "Block all public access"
10. Select "Bucket Policy" and set the following policy, substituting <bucket-name> for your buckets' name:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*"
        }
    ]
}

Deploy scripts

To deploy to S3, you need to have the aws-cli installed. Once you have, make sure your AWS credentials are correct and pointing to our default region (us-west-2).

The command is pretty simple:

aws s3 cp --recursive <dir_to_copy> s3://<bucket-name>

Generally dir_to_copy is usually build or dist, so use the one appropiate for your framework.

There's a small problem when using docker for builds, as the build is done inside the container and the AWS cli and credentials are generally only on the host runner. To remedy this, you can make a small "hack" to copy over the files of the container to the host, and then deploy to S3

# start the container
docker-compose up -d
# run the build command
docker-compose exec front ember build
# hack to use cp in docker compose
# "myapp/dist" is the dir in the container where the build is placed
docker cp $(docker-compose):myapp/dist .

A full .gitlab-ci stage would look something like this:

deploy_staging:
  stage: deployment
  variables:
    DOCKER_TAG: 'staging'
  before_script:
    - "mkdir -p dist"
    - "docker-compose up -d"
  script:
    - "docker-compose exec -T front ember build --environment staging"
    - "docker cp $(docker-compose ps -q front):myapp/dist ."
    - "aws s3 cp dist s3://ecs-apollo --recursive"
  after_script:
    - "rm -rf dist"
    - "docker-compose down"
  only:
    - develop