hhy5277 / web-app-with-ci-cd

Introduce CI/CD flow using Trival CI and Heroku for a web app

Introduce CI/CD flow using Trival CI and Heroku for a web app

Demonstrate how to introduce CI/CD flow for a web app. Use an application developed by React.js to be an example. The project contains basic React.js settings that you also can fork the project to do web app devlopment.

If you just want to understand how to introduce CI/CD flow, skip Getting Started and go to Introduce CI/CD flow.

The project will achive the flow as follows:

1. Push code to GitHub
2. Lint JS/CSS, Test JS, and Deploy a docker image to Heroku by Trival CI
3. The project can run on Heroku

Table of Contents

• Getting Started
• Introduce CI/CD flow
• Appendix

Getting Started

To execute the project, you have to do is:

Install dependencies

$ yarn

node js should be installed first, and then use npm install -g yarn command to install yarn.

Launch a web server to develop

$ yarn start

It will serve with hot reload at http://localhost. The default port 80 can be modified in config/webpack/dev.config.js.

Build for production with minification

$ yarn build

The minify files will be built to dist/.

Other commands

The parts of mainally commands:

JS lint: lint js codes for checking JS coding styles

$ yarn lint

CSS lint: lint css codes for checking CSS coding styles

$ yarn stylelint

Unit test: test js codes

$ yarn test

See scripts section in package.json for more commands.

Introduce CI/CD flow

Let's use free online services (Travis CI and Heroku) to introduce CI/CD flow. Need to create accounts for services first.

Type	Services
CI	Travis CI for GitHub pubilc repository Travis CI for GitHub private repository
CD	Heroku

After doing Travis and Heroku settings, the CI/CD flow will work with GitHub project.

Travis CI Setting

1. Accept the authorization of Travis CI to synchronize GitHub projects.
2. Modify .travis.yml to tell Travis CI what to do.

In projcet, executing four jobs including JS lint, CSS lint, Unit test and Deploy in order.

3. Set environment variables for further use (see Defining Variables in Repository Settings).

In projecet, the variables HEROKU_AUTH_TOKEN would be set for deploying to Heroku by command (see Heroku Setting 4.).

Heroku Setting

1. Create an new app on Heroku.
2. Set value of HEROKU_APP_NAME in .heroku.env which should be the same as created Heroku app name.
3. Get Heroku API token.
   1. Download and install Heroku CLI
   2. Login by Heroku CLI

   $ heroku login
   

   3. Get Heroku API token

   $ heroku auth:token
   

4. Set an environment variable HEROKU_AUTH_TOKEN on Travis CI (assign the heoku API token genreated by 3.3. to the variable).

Now, when you push codes to GitHub each time, it will synchronize Travel CI to execute some jobs (lint, test, deploy) based on Travis.yml and then the project runs on Heroku.

Appendix

How to build a docker image for a project

After building minify files, we can dockerize project. In the root directory contains Dockerfile and nginx.conf that can build a docker image for running the project on nginx web server.

If you only want to build image and run on your (or others) machine:

Need to have docker in your environment.

1. Build a docker image

$ docker build --cache-from <IMAGE_TAG_NAME> -t <IMAGE_TAG_NAME> .

2. Run a docker container

docker run -p <LOCAL_PORT>:<CONTAINER_SERVICE_PORT> <IMAGE_TAG_NAME>

Variables	Description
IMAGE_TAG_NAME	The name is used to identify image
LOCAL_PORT	The port in local machine for mapping to service port of container
CONTAINER_SERVICE_PORT	The port for service which running on container

EX: Build an image named project_with_cicd and run the image which the service port and local port are all 80.

$ docker build --cache-from project_with_cicd -t project_with_cicd .
$ docker run -p 80:80 project_with_cicd

The defalut port is 80, you can set service port ENV PORT=80 in Dockerfile, but it should be the same as <CONTAINER_SERVICE_PORT> of command.

An nginx web server will launch. Enter http://localhost into browser to see the page.

How to deploy the image to Heroku manually

You should login Heroku CLI first (see Heroku Setting 3.).

Then, export Heroku API token to environment

$ export HEROKU_AUTH_TOKEN=$(heroku auth:token)

Execute deploy-to-heroku.sh

$ . deploy-to-heroku.sh

The image will deploy to Heroku manually.