Deploy a Web Application using Docker Compose with TravisCI on AWS

Introduction

When we talk about DevOps, we always heard about CI/CD, Elastic Beanstalk and Docker. Also, we may also hear about java full stack programming. In this article, we will teach you all step by step. But we will not go through too much details about programming, only focus on deployment. The result will look like below.

This is a simple calculator to calculate Fibonacci Sequence. If you do not know or forgot about Fib, please visit here.

Solution Diagram

If we ignore the programming part, the architecture is not so complicated. We package our front end and back end into AWS Elastic Beanstalk. It is an AWS managed service to help us host the server. Also, we make use of AWS RDS as our database and ElastiCache as our Redis Cache.

  1. User visits our website, and nginx will distribute the traffic based on the URL.
  2. When user click submit, React application will make an API request to Express server.
  3. Postgres database will store a permanent list of indices that have been received.
  4. Redis will store all indices and calculated values as key-value pairs.
  5. If Redis has a new value which is not calculated before, another server called worker will calculate and update back to Redis.

Before we start, please firstly download or fork the prepared files from my github. Or

git clone https://github.com/manbobo2002/node-react-calculator.git

If we want to test it on local first, we could run:

docker-compose up --build

But please install Docker and Docker Compose first. Then we can visit localhost:3050 to see the result.

Setup AWS Environment

Create Elastic Beanstalk

Go to Elastic Beanstalk and click Create Application.

We give the application a name, let say multi-docker. Then choose Docker as a platform, and select Multi-container Docker running on 64-bit Amazon Linux. Leave others as default, create application.

Create RDS

Go to RDS and create database.

Select PostgreSQL and Free tier.

In settings, we call the DB instance identifier “multi-docker-postgres”. Also assign the username as postgres, password as postgrespassword.

We then expand additional configuration, call the database name as fibvalues. It is up to you to enable automatic backups or not, I uncheck it here.

Finally, click create database.

Create ElastiCache Redis

Go to ElastiCache, select Radis=>Create.

By default it should choose Redis here, please make sure we uncheck cluster mode.

In Redis settings, we give it a name “multi-docker-redis”, then set the node type as t2.micro and number of replicas as 0.

Leave others as default and click create.

Create Security Group

In VPC, we choose Security Group => Create security group.

We call the security group as multi-docker-sg, and make sure the VPC is default VPC.

Then Create security group.

After creation, we click edit inbound rules.

We add one rule that allows TCP port 5432 to 6379, and set the source group is itself. Then save rules.

Back to ElastiCache, we select our Redis datastore click Actions=>Modify.

We click the pencil icon to add our security group, then click modify.

Then we expand the information of Redis, copy the primary Endpoint for later use.

Go to RDS, select Databases=>Modify.

We add our security group under connectivity.

Click Continue.

Choose apply immediately and modify DB instance.

After modification, we click our database and copy the endpoint under connectivity for future use.

Create IAM Users

We go to IAM page, select Users=>Add user.

Give it a username and select Programmatic access.

We go to Attach existing policies directly, select almost all the ElasticBeanstalk policies except AWSElasticBeanstalkEnhancedHealth, AWSElasticBeanstalkReadOnlyAccess, AWSElasticBeanstalkRoleECS and AWSElasticBeanstalkRoleSNS. Actually we may need less than our selection, but for convenience, just check them out. Then click next and review.

Create user.

Copy and paste the access key and secret key for future use.

Configure ElasticBeanstalk Environment

Go to Elastic Beanstalk, click configuration under MultiDocker-env. Then edit software.

Add the values as above. Please note that we should already copy the REDIS_HOST and PGHOST previously. Just use your own endpoint. Then click Apply.

Update .travis.yml

In our repository file, please update all docker images as your own. Also, copy the S3 bucket name and paste the name into bucket_name.

Push the Code to Your own Github

Create your own repository on Github. Then follow the instruction to push all the codes you clone from me. Or even previously you could directly fork my repository. Since we edited the .travis.yml file, so please push your code one more time.

Setup TravisCI

In TravisCI, link your github account first. Then in repository list, you find and check the repository, and click settings.

In Environment Variables, add our AWS_ACCESS_KEY and AWS_SECRET_KEY, also DOCKER_ID and DOCKER_PASSWORD. Please note that all the environment variables are case-sensitive and must be the exactly same as actual value. Please double check.

We can click more options and then trigger build.

Leave all the things as default, then Trigger build.

Result

Back to Elastic Beanstalk, we click the link on MultiDocker-env.

Our amazing calculator is here!

Then the next question is, what if I have to update my application?

For example, I want to add “!!!” in our application. What we only have to do is just git push on our github.

Type:

git add .
git commit -m "update"
git push origin master

In Travis CI, it will auto detect any update on Github, and then do a set of testing process and rebuild. Once it passes, then it will push on AWS S3. Finally deploy on Elastic Beanstalk.

Now we can see our change.

Cleanup

Delete our elastic bean stalk first.

Also delete the RDS database.

Finally delete the Redis store.

You can delete the S3 bucket as well.

And you may delete security group and IAM if you want.

Leave a Reply