CI CD Pipeline with Docker and Github Actions with Heroku

A CI/CD pipeline automates your software delivery process. The pipeline builds code, runs tests (CI), and safely deploys a new version of the application (CD).

Automated pipelines remove manual errors, provide standardized feedback loops to developers, and enable fast product iterations.

Steps to setup pipeline using Docker and Github Actions(CI)/Heroku(CD):

Tutorial based on typescript React application placed on github:

Prepare heroku

1. Create account on Heroku
2. On a dashboard click New -> Create new app -> write some meaningful name for your app and choose region (e.g. dokazovi-fe)
3. Go to the Account Settings -> API Key -> Reveal -> copy API key
4. Go to your repo on github and click Settings tab -> Secrets -> New repository secret -> write secret name HEROKU_API_KEY and paste copied key into value field.
5. Create another secret called HEROKU_EMAIL and paste an email of your heroku account.

Setup docker

1. Create a Dockerfile in the root directory of your project with next content:

CMD sed -i -e 's/$PORT/'"$PORT"'/g' /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'

Important command for deploy because heroku set a dynamic port to your free dokazovi-fe app

2. Create docker-compose.yml file in the root directory of your project:

ports: - '3000' - here usually needs to set both ports e.g. 3000:3000 but again because of the dynamic port setting on heroku we have setup only one.

Setup Github Action

1. Create ci-cd.yml config file and place in the root directory / workflow directory and fill it with the next content:

• This action will trigger when you make a push to the release branch, you may change this using different triggers from official docs event triggers
• line 28 run your Dockerfile created above to make a image of your project
• lines 33-35 use already prepared secrets - created in Prepare heroku part and our docker-compose.yml file to deploy on heroku
• heroku_apps: '[{"imagename":"dokazovi_fe","appname":"dokazovi-fe","apptype":"web"}]'
  • Important line where you have to set correct imagename written in line 28
  • Correct appname written when you create an app on heroku dashboard in our case it is dokazovi-fe
  • Set apptype to "web"

After all steps make some changes in your project, commit and push to the release branch - it will trigger an action in Actions tab of your repo:

Action will install dependencies, run linter, run build, run tests (CI part) and deploy your project to the heroku (CD part).