Automate static website deployment on AWS S3 using CircleCI

This is the very common practice now hosting a static site in AWS S3. Not only normal html-chess app, you can host angular, react or any kind of rich javascript app in S3. In my last tutorial, I explain how you can deploy your static website or contents into AWS S3.   Today, I will explain how you can automate the continuous deployment with Circle CI.

I personally like Circle CI as the continuous deployment tool because of its features and simplicity. Circle CI has built-in support for AWS CLI tool and you can easily configure it with you GitHub or Bitbucket. I want to add one more information, in the free tier you will get one container and it’s enough to build as much as you want.

 

Step 1: Create bucket

In my last post, I already showed how to create a bucket.  I am explaining again here.

  1. Log in to the AWS Management Console and open the Amazon S3 console at  https://console.aws.amazon.com/s3/.
  2. Create bucket
    3. Press next to skip all steps and then press “Create bucket”. Just note down or remember the region name.  My case, the region is US East.

Step 2: IAM user create

For security purposes, you should create a new IAM user with proper permission.  Basically, you will have to create a new IAM user and then you will have to attach appropriate policy for S3 deployment so that your IAM user has full access to S3 bucket.

1. Browse to the IAM management console at https://console.aws.amazon.com/iam

2. Create a new user with checked “Programing access” option. And, then press “Next: Permissions”

3. Click on  “Attach existing policies directly”  and then select “AmazonS3FullAccess”.

4. Press next and then press “Create user”. You suppose to see a success message with Access Key ID and Secret access key. Please SAVE the Access key ID and Secret access key securely. You need these keys configuring AWS S3 with Circle CI.

 

Step 3: Circle CI setup 

The third step is configuring Circle CI with AWS credentials. I am expecting, you already created a free account at CircleCI and imported the repo from Bitbucket and Github. Now, set Access Key ID and Secret Access Key in your project’s settings page on CircleCI as below:

Step 4: Adding circle.yml to project

Please add circle.yml file with the following snippet.

dependencies:
    override:
        - sudo pip install awscli
test:
  override:
    - echo "test"
 
deployment:
  prod:
    branch: master
    commands:
      - aws s3 sync /home/ubuntu/circle-ci-aws-s3-deploy s3://circlecis3deploy --region us-east-1

Everything is done. Now, when will you push your changes, CircleCi will automatically build and deploy everything into the AWS S3 bucket. After a successful build, you will have all the files as below in your S3 bucket.

In case you want to make available the contents publicly, you will have to publish as Static website hosting from your bucket’s properties. The github repo associated this post is available here: https://github.com/eftakhairul/circle-ci-aws-s3-deploy

Tips:

  •   Don’t share your AWS Access key ID and Secret access key with anyone. You should preserve it securely.
  •  Some regions of S3 give an error while syncing. It’s better to mention the region name as –region us-east-1 in the circle.yml file
  • Always add only the required policy NOT full admin access while creating IAM user. For example, our case we added only the policy: AmazonS3FullAccess, NOT the policy with all administrator access:  AdministratorAccessaccess.
  • In this tutorial, I faked the unit test. You should write the proper unit test.
 

Eftakhairul Islam

Hi, I’m Eftakhairul Islam, a passionate Software Engineer, Hacker and Open Source Enthusiast. I enjoy writing about technical things, work in a couple of startup as a technical advisor and in my spare time, I contribute a lot of open source projects.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Read previous post:
Publish your static website with HTTPS, AWS S3 and Cloudflare

In this post, I will cover how easily you can publish your static website with HTTPS and Cloudflare caching (Despite...

Close