From e431d812148571650a0522b0c0f543a0af6cb56b Mon Sep 17 00:00:00 2001 From: Lorenc Dedaj Date: Sat, 6 Dec 2025 12:50:56 -0500 Subject: [PATCH 1/4] Trigger a frontend GCP deployment --- .dockerignore | 1 + .github/workflows/ci-docker.yml | 92 ++++++++++++++++++++++++++++++++- Dockerfile.frontend | 26 ++++++++++ README.md | 2 +- client/package.json | 2 +- 5 files changed, 120 insertions(+), 3 deletions(-) create mode 100644 Dockerfile.frontend diff --git a/.dockerignore b/.dockerignore index 7a7fc5a..a42f486 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,6 +1,7 @@ node_modules npm-debug.log Dockerfile +Dockerfile.frontend Dockerfile.jenkins docker-compose*.yml .git diff --git a/.github/workflows/ci-docker.yml b/.github/workflows/ci-docker.yml index 8db8963..9c4d46f 100644 --- a/.github/workflows/ci-docker.yml +++ b/.github/workflows/ci-docker.yml @@ -34,7 +34,7 @@ jobs: run: | cd server npm test --if-present - + # backend image docker-image: needs: build-test runs-on: ubuntu-latest @@ -72,6 +72,45 @@ jobs: docker push $IMAGE_ID:$VERSION docker push $IMAGE_ID:latest + # frontend image + frontend-docker-image: + needs: build-test + runs-on: ubuntu-latest + + permissions: + contents: read + packages: write + + env: + IMAGE_NAME: mcp-frontend + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Login to GitHub Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Build frontend Docker image + run: | + IMAGE_ID=ghcr.io/${{ github.repository_owner }}/${{ env.IMAGE_NAME }} + VERSION=${{ github.sha }} + + echo "FRONTEND_IMAGE_ID=$IMAGE_ID" >> $GITHUB_ENV + echo "FRONTEND_VERSION=$VERSION >> $GITHUB_ENV + + docker build -f Dockerfile.frontend -t $IMAGE_ID:VERSION -t $IMAGE_ID:latest . + + - name: + run: | + docker push $FRONTEND_IMAGE_ID:$FRONTEND_VERSION + docker push $FRONTEND_IMAGE_ID:latest + + # backend cloud deployment deploy-gcp: needs: docker-image runs-on: ubuntu-latest @@ -121,3 +160,54 @@ jobs: --platform managed \ --allow-unauthenticated \ --port 3000 + + # frontend cloud deployment + deploy-gcp-frontend: + needs: frontend-docker-image + runs-on: ubuntu-latest + permissions: + contents: read + packages: read + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Authenticate to Google Cloud + uses: google-github-actions/auth@v2 + with: + credentials_json: ${{ secrets.GCP_SERVICE_ACCOUNT_KEY }} + + - name: Set up gcloud + uses: google-github-actions/setup-gcloud@v2 + with: + project_id: ${{ secrets.GCP_PROJECT_ID }} + + - name: Configure Docker for Artifact Registry + run: | + gcloud auth configure-docker us-east1-docker.pkg.dev --quiet + + - name: Pull frontend image from GHCR + run: | + IMAGE_ID=ghcr.io/${{ github.repository_owner }}/mcp-frontend + VERSION=${{ github.sha }} + echo "FRONTEND_IMAGE_ID=$IMAGE_ID" >> $GITHUB_ENV + echo "FRONTEND_VERSION=$VERSION" >> $GITHUB_ENV + echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u "$GITHUB_ACTOR" --password-stdin + docker pull $IMAGE_ID:$VERSION + + - name: Tag & push frontend image to Artifact Registry + run: | + AR_FRONTEND_IMAGE=us-east1-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/mcp-frontend/mcp-frontend + docker tag ghcr.io/${{ github.repository_owner }}/mcp-frontend:${{ github.sha }} $AR_FRONTEND_IMAGE:${{ github.sha }} + docker push $AR_FRONTEND_IMAGE:${{ github.sha }} + echo "AR_FRONTEND_IMAGE=$AR_FRONTEND_IMAGE" >> $GITHUB_ENV + + - name: Deploy frontend to Cloud Run + run: | + gcloud run deploy mcp-frontend \ + --image $AR_FRONTEND_IMAGE:${{ github.sha }} \ + --region ${{ secrets.GCP_REGION }} \ + --platform managed \ + --allow-unauthenticated \ + --port 80 diff --git a/Dockerfile.frontend b/Dockerfile.frontend new file mode 100644 index 0000000..ffd8ea8 --- /dev/null +++ b/Dockerfile.frontend @@ -0,0 +1,26 @@ +# Stage 1: Build the frontend +FROM node:20-alpine AS build + +WORKDIR /app + +# Copy only package manifests first for better caching +COPY client/package*.json ./ +RUN npm ci + +# Copy the rest of the frontend source +COPY client ./ + +# Build the production static bundle (Vite/React default is "dist") +RUN npm run build + +# Stage 2: Serve with nginx +FROM nginx:alpine + +# Copy built assets from the previous stage +COPY --from=build /app/dist /usr/share/nginx/html + +# Expose HTTP port +EXPOSE 80 + +# Start nginx in foreground +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/README.md b/README.md index dc80739..aa73a53 100644 --- a/README.md +++ b/README.md @@ -198,7 +198,7 @@ Adding this line to test the workflows Another test2 test3 test 4 - + // "build": "tsc -b && vite build", Test ``` diff --git a/client/package.json b/client/package.json index 7cbde17..0784f3a 100644 --- a/client/package.json +++ b/client/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc -b && vite build", + "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, From 40994e2f579f4e84dea4fa2ef20c2dd9e7b1287a Mon Sep 17 00:00:00 2001 From: Lorenc Dedaj Date: Sat, 6 Dec 2025 13:01:02 -0500 Subject: [PATCH 2/4] Fix yaml typo and repdeploy front end to GCP --- .github/workflows/ci-docker.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci-docker.yml b/.github/workflows/ci-docker.yml index 9c4d46f..ac7527b 100644 --- a/.github/workflows/ci-docker.yml +++ b/.github/workflows/ci-docker.yml @@ -35,7 +35,7 @@ jobs: cd server npm test --if-present # backend image - docker-image: + backend-docker-image: needs: build-test runs-on: ubuntu-latest @@ -101,7 +101,7 @@ jobs: VERSION=${{ github.sha }} echo "FRONTEND_IMAGE_ID=$IMAGE_ID" >> $GITHUB_ENV - echo "FRONTEND_VERSION=$VERSION >> $GITHUB_ENV + echo "FRONTEND_VERSION=$VERSION" >> $GITHUB_ENV docker build -f Dockerfile.frontend -t $IMAGE_ID:VERSION -t $IMAGE_ID:latest . @@ -111,7 +111,7 @@ jobs: docker push $FRONTEND_IMAGE_ID:latest # backend cloud deployment - deploy-gcp: + deploy-gcp-backend: needs: docker-image runs-on: ubuntu-latest permissions: From c98d2f5ead7f3b59ffc5b7f6ca37cebfcfcce35a Mon Sep 17 00:00:00 2001 From: Lorenc Dedaj Date: Sat, 6 Dec 2025 13:02:42 -0500 Subject: [PATCH 3/4] Fix yaml typo and repdeploy front end to GCP --- .github/workflows/ci-docker.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci-docker.yml b/.github/workflows/ci-docker.yml index ac7527b..86a399e 100644 --- a/.github/workflows/ci-docker.yml +++ b/.github/workflows/ci-docker.yml @@ -35,7 +35,7 @@ jobs: cd server npm test --if-present # backend image - backend-docker-image: + docker-image: needs: build-test runs-on: ubuntu-latest @@ -111,7 +111,7 @@ jobs: docker push $FRONTEND_IMAGE_ID:latest # backend cloud deployment - deploy-gcp-backend: + deploy-gcp: needs: docker-image runs-on: ubuntu-latest permissions: From 7f1df3cf3bdd2e4a2ef4a1bdbf43867dacbd4887 Mon Sep 17 00:00:00 2001 From: Lorenc Dedaj Date: Sat, 6 Dec 2025 13:21:16 -0500 Subject: [PATCH 4/4] Fix frontend-docker-image job identation --- .github/workflows/ci-docker.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/ci-docker.yml b/.github/workflows/ci-docker.yml index 86a399e..c48bd7d 100644 --- a/.github/workflows/ci-docker.yml +++ b/.github/workflows/ci-docker.yml @@ -34,7 +34,7 @@ jobs: run: | cd server npm test --if-present - # backend image + #backend image docker-image: needs: build-test runs-on: ubuntu-latest @@ -72,7 +72,7 @@ jobs: docker push $IMAGE_ID:$VERSION docker push $IMAGE_ID:latest - # frontend image + #frontend image frontend-docker-image: needs: build-test runs-on: ubuntu-latest @@ -103,14 +103,14 @@ jobs: echo "FRONTEND_IMAGE_ID=$IMAGE_ID" >> $GITHUB_ENV echo "FRONTEND_VERSION=$VERSION" >> $GITHUB_ENV - docker build -f Dockerfile.frontend -t $IMAGE_ID:VERSION -t $IMAGE_ID:latest . + docker build -f Dockerfile.frontend -t $IMAGE_ID:$VERSION -t $IMAGE_ID:latest . - - name: + - name: Push frontend Docker image run: | docker push $FRONTEND_IMAGE_ID:$FRONTEND_VERSION docker push $FRONTEND_IMAGE_ID:latest - # backend cloud deployment + #backend cloud deployment deploy-gcp: needs: docker-image runs-on: ubuntu-latest