[frontend] feat: add quick dev frontend (#521)

Author: desAweis

README.md

@@ -73,7 +73,27 @@ bash docker/dev-app-builder.sh
 浏览器打开 http://localhost:8001 测试
 
 ## 前端快速开发测试
-TODO
+本章节给出快速启动之后，本地快速开发测试前端的方法。
+
+### 1. 编译代码
+1. 全量编译前端（1 minutes 10 seconds）
+编写代码，在项目根目录下，执行以下命令编译：
+```shell
+cd frontend
+npm install --legacy-peer-deps --force --registry=https://registry.npmmirror.com
+npm run build:prod
+```
+
+### 2. 一键部署修改
+在项目根目录下，执行以下命令快速部署（18 seconds）：
+```shell
+cd ..
+bash docker/dev-frontend.sh
+```
+
+### 3. 测试
+浏览器打开 http://localhost:8001 测试
+
 
 ## 源码编译启动
 

docker/dev-app-builder.sh

@@ -55,16 +55,6 @@ echo "=== Cleaning up temporary container ==="
 docker stop app-builder-tmp
 docker rm app-builder-tmp
 
-echo "=== Updating docker-compose configuration ==="
-# Create docker-compose configuration for development
-cp docker-compose.yml docker-compose.dev.yml
-if [[ "$(uname -s)" == "Darwin" ]]; then
-    sed -i '.bak' "s/app-builder:\${VERSION}/app-builder:dev-latest/g" docker-compose.dev.yml
-    rm -f docker-compose.dev.yml.bak
-else
-    sed -i "s/app-builder:\${VERSION}/app-builder:dev-latest/g" docker-compose.dev.yml
-fi
-
 echo "=== Restarting services ==="
 docker-compose -f docker-compose.dev.yml -p app-platform up -d app-builder
 

docker/dev-frontend.sh

@@ -0,0 +1,61 @@
+#!/bin/bash
+set -eu
+
+export WORKSPACE=$(cd "$(dirname "$(readlink -f "$0")")" && pwd)
+BUILD_DIR="${WORKSPACE}/../frontend/build/"
+
+cd ${WORKSPACE}
+source .env
+
+# Generate development version tag
+BASE_VERSION=${VERSION}
+TIMESTAMP=$(date +%Y%m%d-%H%M%S)
+GIT_COMMIT=$(git rev-parse --short HEAD 2>/dev/null || echo "unknown")
+DEV_VERSION="${BASE_VERSION}-dev-${TIMESTAMP}-${GIT_COMMIT}"
+
+echo "=== Version Information ==="
+echo "Base Version: ${BASE_VERSION}"
+echo "Development Version: ${DEV_VERSION}"
+echo "Git Commit: ${GIT_COMMIT}"
+
+# Check local build artifacts
+if [ ! -d "$BUILD_DIR" ] || [ -z "$(ls -A "$BUILD_DIR" 2>/dev/null)" ]; then
+    echo "Error: plugins directory is empty or does not exist: $BUILD_DIR"
+    exit 1
+fi
+
+echo "=== Stopping web service ==="
+docker-compose stop web
+
+echo "=== Creating development version image ==="
+# Use stable version as base
+docker run -d --name web-tmp --entrypoint sleep ${REPO}/jade-web:${BASE_VERSION} infinity
+
+# Copy files
+echo "Copying frontend files..."
+docker exec  web-tmp rm -rf //usr//share//nginx//html
+docker exec web-tmp mkdir -p //usr//share//nginx//html
+docker cp "$BUILD_DIR"/. web-tmp:/usr/share/nginx/html/
+
+# Commit as development version
+echo "Committing development version image: ${DEV_VERSION}"
+docker commit --change='ENTRYPOINT ["/init.sh"]' web-tmp ${REPO}/jade-web:${DEV_VERSION}
+
+# Create development tag (for docker-compose convenience)
+docker tag ${REPO}/jade-web:${DEV_VERSION} ${REPO}/jade-web:dev-latest
+
+echo "=== Cleaning up temporary container ==="
+docker stop web-tmp
+docker rm web-tmp
+
+echo "=== Restarting services ==="
+docker-compose -f docker-compose.dev.yml -p app-platform up -d web
+
+echo ""
+echo "=== Completed! ==="
+echo "Development version deployed: ${DEV_VERSION}"
+echo "Current tag in use: dev-latest"
+echo "Service URL: http://localhost:8001"
+echo ""
+echo "=== Version Management Commands ==="
+echo "View all versions: docker images ${REPO}/jade-web"

docker/docker-compose.dev.yml

@@ -174,7 +174,7 @@ services:
   web:
     container_name: web
     hostname: web
-    image: ${REPO}/jade-web:${VERSION}
+    image: ${REPO}/jade-web:dev-latest
     depends_on:
       app-builder:
         condition: service_healthy