PS: This is my first ever post on Dev, I appreciate your feedback and comments. Follow me on twitter @hozefam
- Github account (Free)
- Travis account (Free)
- AWS account (Free but credit card required)
- Node is installed on your local computer
- Basic knowledge of React and Docker
Continuous Integration is the practice of merging in small code changes frequently - rather than merging in a large change at the end of a development cycle. The goal is to build healthier software by developing and testing in smaller increments. This is where Travis CI comes in.
As a continuous integration platform, Travis CI supports your development process by automatically building and testing code changes, providing immediate feedback on the success of the change.
Travis CI can also automate other parts of your development process by managing deployments and notifications.
Create a simple React app using the npm package - Create-react-app
npx create-react-app docker-react-app cd docker-react-app
Once this is done, you can open the folder docker-react-app in any code editor (like VSCode)
The following folder structure will be created
We will create a Docker image of the App and will create 2 files:
- Dockerfile.dev will contain instructions to build the image and will be used to run tests.
- Dockerfile will contain instructions to build the image and run the optimized version of the application.
A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.
FROM node:alpine WORKDIR /app COPY package.json . RUN npm install COPY . . CMD ["npm", "start"]
FROM node:alpine WORKDIR /app COPY package.json . RUN npm install COPY . . RUN ["npm","run", "build"] FROM nginx EXPOSE 80 COPY --from=0 /app/build /usr/share/nginx/html
At this stage checkin all the files to github. Here is my link to github repo for the "docker-react-app"
The repo should look something like this
Assuming you have account in Travis CI using your Github account gives Travis CI access to the github repos. Select the "docker-react-app" from the list of repos and switch it on as shown in the snapshot.
Now that Travis CI and Github are hooked up, we need a YML file called .travis.yml to be added in the application as this would contain the instructions you want Travis to perform with the code when the build is triggered.
sudo: required language: generic services: - docker before_install: - docker build -t hozefam/docker-react-app -f Dockerfile.dev . script: - docker run -e CI=true hozefam/docker-react-app npm run test
AWS Elastic Beanstalk is an easy-to-use service for deploying and scaling web applications and services developed with Java, .NET, PHP, Node.js, Python, Ruby, Go, and Docker on familiar servers such as Apache, Nginx, Passenger, and IIS.
Navigate to the Elasticbeanstalk service on AWS console
Click on "Create Application", set the application name as "docker-react-app" and Platform as "Docker". Leave the other values as default and click on "Create application"
after a small pause (approximately 2-3 minutes) you should be able to see a screen like below
Create a user travis-docker-react-app with programmatic access. Set permissions using Attach existing polices directly option and select AWSElasticBeanstalkFullAccess.
In the last step you will see the access key id and Secret access key. Please note these values and keep it safe, we will use it in Travis CI settings in next step.
Navigate to S3 Service and depending on the region of the EBS create a folder in the appropriate S3 bucket. Name of the folder should be same as the app name docker-react-app in this case.
In the Travis CI settings for the docker-react-app add the below environment keys AWS_ACCESS_KEY and AWS_SECRET_KEY with the values we stored from the AWS IAM user travis-docker-react-app
Add the following step at the end of .travis.yml filee
deploy: provider: elasticbeanstalk region: us-east-1 app: docker-react-app env: DockerReactApp-env bucket_name: elasticbeanstalk-us-east-1-534906124127 bucket_path: docker-react-app on: branch: master access_key_id: $AWS_ACCESS_KEY secret_access_key: $AWS_SECRET_KEY
The complete .travis.yml file should be as
sudo: required language: generic services: - docker before_install: - docker build -t hozefam/docker-react-app -f Dockerfile.dev . script: - docker run -e CI=true hozefam/docker-react-app npm run test deploy: provider: elasticbeanstalk region: us-east-1 app: docker-react-app env: DockerReactApp-env bucket_name: elasticbeanstalk-us-east-1-534906124127 bucket_path: docker-react-app on: branch: master access_key_id: $AWS_ACCESS_KEY secret_access_key: $AWS_SECRET_KEY
Now checkin the file to github and ensure Travis CI build kicks off
If all goes good, the react app will be live at the EBS url like this
Complete Source code can be found here
- Travis Docs - https://docs.travis-ci.com/
- Using docker in builds - https://docs.travis-ci.com/user/docker/
- Create React App - https://reactjs.org/docs/create-a-new-react-app.html