How to make two build inside one CircleCI configuration?

Question

In my git repository, I have docker-compose.yml and two folders frontend and backend, each of which contains its Dockerfile.

docker-compose.yml:

version: "3.5"

services:
  Django:
    build:
      context: backend
    ...

  react:
    build:
      context: frontend
    depends_on:
      - django

How do I configure to build both of them into images and push them together to the docker hub after spotting new commit in the master branch?

Answer 1

If you are building on circleci, you dont have to build from docker compose. You can just add steps to the circleci config (.circleci/config.yml) to build and push your images. The file can look something like that:

version: 2

jobs:

 build:
   docker:
    - image: docker:19.03.5

   working_directory: [YOUR REPO WORKING DIR]

   steps:
    - checkout
    - setup_remote_docker

    - run:
       name: build frontend
       command: docker build -t [FE DOCKER REPO NAME]:tag -f [FE DOCKERFILE PATH] .

    - run:
       name: build backend
       command: docker build -t [BE DOCKER REPO NAME]:tag -f [BE DOCKERFILE PATH] .

    - run:
       name: push frontend
       command: |
         docker login -u $DOCKER_USER -p $DOCKER_PASS
         docker push [FE DOCKER REPO NAME]:tag

    - run:
       name: push backend
       command: |
         docker login -u $DOCKER_USER -p $DOCKER_PASS
         docker push [BE DOCKER REPO NAME]:tag

Note that you'll have to add DOCKER_USER and DOCKER_PASS environment variables to your circleci build settings

Answer 2

In two words you should build images for the services you want & push them to the docker hub.

You can do it using commands like

    ...env configuration in your CI...
    - DOCKER_ACC=my_account_name
    - DOCKER_REPO_DJANGO=django-app
    - DOCKER_REPO_REACT=django-app

    ... post tests commands ...
    - echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
    - docker build -t $DOCKER_ACC/$DOCKER_REPO_DJANGO:latest -f ./path/to/Dockerfile.django .
    - docker push $DOCKER_ACC/$DOCKER_REPO_DJANGO:latest

    - docker build -t $DOCKER_ACC/$DOCKER_REPO_REACT:latest -f ./path/to/Dockerfile.django .
    - docker push $DOCKER_ACC/$DOCKER_REPO_REACT:latest

Where latest you can replace with your branch name, commit tag or etc and build multiple image versions for your app.

Everything depends on you, that's pretty flexible. But you have to do 2 steps - build images & push them. Built images tags should be equal to your github images urls.

Read more at articles like these ones:

• http://docs.shippable.com/ci/tutorial/build-push-image-to-docker-hub/
• https://circleci.com/blog/build-cicd-piplines-using-docker/