feat: #39 setup build and publish image (#48)

* feat: Setup docker build and publish on ghcr

* feat: Setup docker build and publish on ghcr

* feat: Created workflow file to build and publish docker image on docker

* feat: Created workflow file to build and publish docker image on docker

* feat: Created workflow file to build and publish docker image on docker

* feat: Created workflow file to build and publish docker image on docker

* feat: Created workflow file to build and publish docker image on docker

* feat: Created workflow file to build and publish docker image on docker

* feat: Created workflow file to build and publish docker image on docker

* feat: Created workflow file to build and publish docker image on docker

* fix: Updated workflow files to handle the Change String Case

* feat: Created a workflow file that builds and pushes docker images for the translator app

* fix: Updated the Change String Case in th workflow files

* fix: Updated the Change String Case in th workflow files

* fix: Updated the Change String Case in th workflow files

* feat: Documented the process used to build and upload docker images to ghcr using github action

* feat: Documented the process used to build and upload docker images to ghcr using github action

* fix: changed string conversion using change string case

* fix: changed string conversion using change string case

* fix: handled the permissions

* fix: handled the permissions on the frontend and translator

* fix: handled the permissions on the translator

* fix: handled the permissions on the translator

* fix: handled image url for frontend

* fix: handled image url for frontend

* fix: update  env with  image names

* fix: handled image url for frontend

* fix: modified version of the setup-buildx-action

* feat: Documented the process used to build and upload docker images to ghcr using github action

* fix: Updated tags in the frontend

* feat: update rust.yml

* feat: update rust.yml to fix CI/CD

* fix: Updated the building and uploading docker images' docs

* fix: Updated tags in the frontend and backend files

* fix: ci/cd update and rename rust.yml to build-translator.yml

* fix: ci/cd - update and rename maven.yml to build-service.yml

* fix: typo error in job's name

* fix: renamed the node.yml to build-frontend.yaml and modified the build and push step

* fix: delete .github/workflows/node.yml

---------

Co-authored-by: Stephane SEGNING LAMBOU <[email protected]>

.github/workflows/build-frontend.yml

@@ -0,0 +1,71 @@
+name: Build NodeJS
+
+on:
+  push:
+    branches:
+      - '**'
+    tags-ignore:
+      - 'v*'
+  pull_request:
+    branches:
+      - '**'
+
+env:
+  REGISTRY: ghcr.io
+  # IMAGE_URL: "ghcr.io/my-org/my-image:1.0.0"
+  IMAGE_NAME: ${{ github.repository }}-frontend
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Npm install
+        run: cd power-pay-frontend && npm ci
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to the Docker registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build Frontend
+        run: cd power-pay-frontend && npm run build
+
+      - id: string
+        uses: AsZc/change-string-case-action@v6
+        with:
+          string: ${{ env.IMAGE_NAME }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ steps.string.outputs.lowercase }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        if: github.event_name != 'pull_request'
+        with:
+          context: ./power-pay-frontend
+          file: ./power-pay-frontend/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/build-service.yml

@@ -0,0 +1,70 @@
+name: Build Backend
+
+on:
+  push:
+    branches:
+      - '**'
+    tags-ignore:
+      - 'v*'
+  pull_request:
+    branches:
+      - '**'
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}-backend
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-java@v4
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build Backend
+        run: cd power-pay-backend && mvn package
+
+      - id: string
+        uses: ASzc/change-string-case-action@v6
+        with:
+          string: ${{ env.IMAGE_NAME}}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ steps.string.outputs.lowercase }}
+
+      - name: Build and push image
+        uses: docker/build-push-action@v5
+        if: github.event_name != 'pull_request'
+        with:
+          context: ./power-pay-backend
+          file: ./power-pay-backend/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+

.github/workflows/rust.yml → .github/workflows/build-translator.yml

@@ -1,4 +1,4 @@
-name: Build Translator v2
+name: Build Translator
 
 on:
   push:
@@ -15,7 +15,6 @@ env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}-translator
 
-
 jobs:
   build:
 
@@ -58,6 +57,7 @@ jobs:
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v5
+        if: github.event_name != 'pull_request'
         with:
           context: ./power-pay-translator
           push: true

docs/Setup-build-and-push-docker-images.md

@@ -0,0 +1,37 @@
+# Building and Uploading Docker Images to ghcr.io using Github Action
+This document outlines the steps to build a Docker image and upload it to ghcr.io using a Github Action. The process involves building the frontend, backend and using a translator service to communicate with them.
+
+## About Github Actions
+Github Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and publish docker images on the ghcr.io, test every pull request to your directory. For a deeper understanding you can see [Learn Github Actions](https://docs.github.com/en/actions/learn-github-actions)
+
+## Prerequisites
+- A Github repository for each sub-project with a Dockerfile.
+- A personal access token (PAT) with write:packages scope. You can create a PAT by following these steps: [Github Docs ](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
+
+### Step 1.
+- Create new files named:
+ .github/workflows/maven.yml, 
+ .github/workflows/node.yml, and 
+ .github/workflows/rust.yml 
+ in the main project directory for the backend, frontend and translator respectively.
+
+ ### Step 2.
+ - In the above created files, define the Github Action workflow for each.
+
+ ### Step 3.
+- Save the various .yml files.
+
+### Step 4.
+- Commit and push the changes to your repository.
+
+### Step 5.
+- Github Action will automatically trigger the workflow defined in the above files whenever pushed to the mentioned branch.
+
+### Step 6.
+- The workflow will build the frontend, backend and translator Docker images using their respective Dockerfiles and push them to ghcr.io using the provided credentials.
+
+### Step 7.
+- You can access the Docker images on ghcr.io at ghcr.io/<owner>/<repository>/<image>:<tag>, where <owner> is your GitHub username or organization, <repository> is the name of your repository, <image> is the name of the Docker image(frontend, backend or translator) and <tag> is the SHA of the commit.
+
+### Step 8.
+- Make sure to update your deployment or other relevant scripts to use the newly built Docker images from ghcr.io.