feat: add CI/CD workflow for frontend and update version handling

GavanHub · GavanHub · commit def7bb364fb9 · 2025-06-30T18:13:18.000+08:00
diff --git a/.github/workflows/frontend-ci-cd.yml b/.github/workflows/frontend-ci-cd.yml
@@ -0,0 +1,97 @@
+name: Frontend CI/CD
+
+on:
+  push:
+    paths:
+      - 'ui/**'
+      - '.github/workflows/frontend-ci-cd.yml'
+    branches:
+      - main
+  pull_request:
+    paths:
+      - 'ui/**'
+      - '.github/workflows/frontend-ci-cd.yml'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./ui
+    outputs:
+      version: ${{ steps.get_version.outputs.VERSION }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build frontend
+        run:
+          echo "VITE_APP_VERSION=${{ steps.get_version.outputs.VERSION }}" >> .env.production
+          pnpm run build
+
+      - name: 'Tar files'
+        run: tar -cvf dist.tar dist
+
+  package:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: frontend-build
+
+      - name: Extract files
+        run: |
+          tar -xvf dist.tar
+
+      - name: Check file structure
+        run: |
+          echo "Current directory: $(pwd)"
+          echo "Listing dist directory:"
+          ls -la dist
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Aliyun Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: chaitin-registry.cn-hangzhou.cr.aliyuncs.com
+          username: ${{ secrets.CT_ALIYUN_USER }}
+          password: ${{ secrets.CT_ALIYUN_PASS }}
+
+      - name: Package and push
+        uses: docker/build-push-action@v5
+        with:
+          context: ./ui
+          file: ./ui/Dockerfile
+          push: true
+          platforms: linux/amd64, linux/arm64
+          tags: chaitin-registry.cn-hangzhou.cr.aliyuncs.com/chaitin/monkey-code-frontend:v${{ needs.build.outputs.version }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/ui/src/components/sidebar/version.tsx b/ui/src/components/sidebar/version.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 import packageJson from '../../../package.json';
 
 const Version = () => {
-  const curVersion = packageJson.version;
+  const curVersion = import.meta.env.VITE_APP_VERSION || packageJson.version;
   const [latestVersion, setLatestVersion] = useState<string | undefined>(
     undefined
   );
