DevOps Study app: GitHub Container Image- Part 2

Table of Contents

Front-end + Back-end

We switch to main and pull –> then let’s create a new branch feat/add-docker-image-frontend.

Add a new package:

./release-please-config.json:

{
  "packages": {
    "src/backend": {
      "release-type": "python",
      "package-name": "study-tracker-backend",
      "component": "backend",
      "include-component-in-tag": true,
      "changelog-path": "CHANGELOG.md",
      "extra-files": [
        {
          "type": "toml",
          "path": "uv.lock",
          "jsonpath": "$.package[?(@.name.value=='study-tracker-backend')].version"
        }
      ]
    },
    "src/frontend": {
      "release-type": "python",
      "package-name": "study-tracker-frontend",
      "component": "frontend",
      "include-component-in-tag": true,
      "changelog-path": "CHANGELOG.md",
      "extra-files": [
        {
          "type": "toml",
          "path": "uv.lock",
          "jsonpath": "$.package[?(@.name.value=='study-tracker-frontend')].version"
        }
      ]
    }
  }
}

Edit the manifest

/.release-please-manifest.json

{
  "src/backend": "0.1.0",
  "src/frontend": "0.0.0"
}

Update the docker-build-push

./.github/workflows/docker-build-push.yaml

name: Build and Push Docker Images

on:
  push:
    tags:
      - "backend*"
      - "frontend*"

env:
  REGISTRY: ghcr.io

jobs:
  build-and-push-backend:
    name: Build and Push Backend
    runs-on: ubuntu-latest
    if: contains(github.ref, 'backend')
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Log in to the Container registry
        uses: docker/login-action@v3
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Set lowercase repo owner and extract tag
        id: vars
        run: |
          echo "REPO_OWNER_LC=${GITHUB_REPOSITORY_OWNER,,}" >> $GITHUB_ENV
          echo "TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT

      - name: Build and push Backend Docker image
        uses: docker/build-push-action@v5
        with:
          context: ./src/backend
          push: true
          tags: |
            ${{ env.REGISTRY }}/${{ env.REPO_OWNER_LC }}/study-app-api:${{ steps.vars.outputs.TAG }}
            ${{ env.REGISTRY }}/${{ env.REPO_OWNER_LC }}/study-app-api:latest
    outputs:
      tag: ${{ steps.vars.outputs.TAG }}
      app: backend

  build-and-push-frontend:
    name: Build and Push Frontend
    runs-on: ubuntu-latest
    if: contains(github.ref, 'frontend')
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Log in to the Container registry
        uses: docker/login-action@v3
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Set lowercase repo owner and extract tag
        id: vars
        run: |
          echo "REPO_OWNER_LC=${GITHUB_REPOSITORY_OWNER,,}" >> $GITHUB_ENV
          echo "TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT

      - name: Build and push Frontend Docker image
        uses: docker/build-push-action@v5
        with:
          context: ./src/frontend
          push: true
          tags: |
            ${{ env.REGISTRY }}/${{ env.REPO_OWNER_LC }}/study-app-web:${{ steps.vars.outputs.TAG }}
            ${{ env.REGISTRY }}/${{ env.REPO_OWNER_LC }}/study-app-web:latest
    outputs:
      tag: ${{ steps.vars.outputs.TAG }}
      app: frontend

Checking everything is good

Let’s cd src/frontend and then git status and uv lock. Now we going now uv sync and git status.

I added a comment on /src/frontend/main.py just to trigger the CI.

Let’s add, commit, push, squash and merge.

cicd-front