修改docker-compose.dev

.dockerignore

@@ -0,0 +1,70 @@
+**/.idea/
+.idea/**
+**/*.pyc
+__pycache__/
+build/
+*.egg-info/
+.python-version
+.pytest_cache/
+dist/
+eggs/
+lib/
+lib64/
+.DS_Store
+docs/_build/
+*.env
+**/local_settings.py
+static/
+
+node_modules
+dist
+dist-ssr
+dist.zip
+dist.tar
+dist.war
+.nitro
+.output
+*-dist.zip
+*-dist.tar
+*-dist.war
+coverage
+*.local
+**/.vitepress/cache
+.cache
+.turbo
+.temp
+dev-dist
+.stylelintcache
+yarn.lock
+package-lock.json
+.VSCodeCounter
+**/backend-mock/data
+
+# local env files
+.env.local
+.env.*.local
+.eslintcache
+
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+vite.config.mts.*
+vite.config.mjs.*
+vite.config.js.*
+vite.config.ts.*
+
+# Editor directories and files
+.idea
+# .vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.history
+celerybeat-schedule.db
+**/node_modules

.gitignore

@@ -17,7 +17,6 @@ docs/_build/
 static/
 
 node_modules
-.DS_Store
 dist
 dist-ssr
 dist.zip
@@ -68,3 +67,5 @@ vite.config.ts.*
 *.sw?
 .history
 celerybeat-schedule.db
+**/.pnpm-store
+data/mysql

backend/Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1
-FROM python:3.12.2
+FROM python:3.12.2 AS dev
 
 WORKDIR /app
 
@@ -16,6 +16,7 @@ COPY requirements.txt .
 RUN pip install -r requirements.txt
 
 COPY . .
+CMD ["sh", "-c", "sleep 10 && python manage.py runserver 0.0.0.0:8000"]
 
 # 默认命令，开发和生产通过 docker-compose 覆盖
-CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"] 
+#CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

backend/backend/__init__.py

@@ -1,4 +1,3 @@
-
 from .celery import app as celery_app
 
 __all__ = ('celery_app',)

backend/backend/settings.py

@@ -94,7 +94,8 @@ DATABASES = {
         'NAME': 'django_vue',
         'USER': 'root',
         'PASSWORD': '',
-        'HOST': 'localhost',
+        'HOST': os.getenv('DATABASE_HOST', 'localhost'),
+        # 'HOST': 'localhost',
     }
 }
 

docker-compose.dev.yml

@@ -1,7 +1,29 @@
 services:
+  mysql:
+    image: mysql:8
+    environment:
+      MYSQL_ROOT_PASSWORD: my-secret-pw
+      MYSQL_DATABASE: django_vue
+    ports:
+      - "43306:3306"
+    volumes:
+      - ./sql/django_vue.sql:/docker-entrypoint-initdb.d/django_vue.sql
+      - ./data/mysql:/var/lib/mysql   # <-- 加这一行
+    networks:
+      - dj_admin_network
+    env_file:
+      - ./docker/.env.dev
+    healthcheck:
+      test: [ "CMD", "mysqladmin", "ping", "-h", "localhost", "-pmy-secret-pw" ]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+
   backend:
     build:
       context: ./backend
+      target: dev
     volumes:
       - ./backend:/app
     ports:
@@ -17,24 +39,6 @@ services:
       mysql:
         condition: service_healthy
 
-  mysql:
-    image: mysql:8
-    environment:
-      MYSQL_ROOT_PASSWORD: my-secret-pw
-      MYSQL_DATABASE: django_vue
-    ports:
-      - "43306:3306"
-    volumes:
-      - ./sql/django_vue.sql:/docker-entrypoint-initdb.d/django_vue.sql
-    networks:
-      - dj_admin_network
-    env_file:
-      - ./docker/.env.dev
-    healthcheck:
-      test: [ "CMD", "mysqladmin", "ping", "-h", "localhost", "-pmy-secret-pw" ]
-      interval: 5s
-      timeout: 5s
-      retries: 10
 
   web:
     build:
@@ -42,14 +46,13 @@ services:
       target: dev
     volumes:
       - ./web:/app
-      - /app/node_modules
     ports:
       - "5678:5678"
-    command: pnpm run dev:antd
     networks:
       - dj_admin_network
     env_file:
       - ./docker/.env.dev
+      - ./docker/.env.docker
 
 networks:
   dj_admin_network:

docker/.env.dev

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://localhost:8000

docker/.env.docker

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://backend:8000

web/.dockerignore

@@ -1,4 +1,4 @@
-node_modules
+**/node_modules
 .git
 .gitignore
 *.md

web/Dockerfile

@@ -1,27 +1,4 @@
 # syntax=docker/dockerfile:1
-
-####################
-# 构建阶段
-####################
-FROM node:22.17.0 AS build
-
-WORKDIR /app
-
-# 先拷贝依赖文件
-COPY package.json ./
-
-# 启用 corepack + 设置 registry
-RUN corepack enable \
-    && corepack prepare pnpm@latest --activate \
-    && pnpm config set registry https://registry.npmjs.org/ \
-    && pnpm install
-
-# 再拷贝源码
-COPY . .
-
-# 编译
-RUN pnpm run build:antd
-
 ####################
 # 生产阶段
 ####################
@@ -41,24 +18,27 @@ FROM node:22.17.0 AS dev
 
 WORKDIR /app
 
+ENV PNPM_SKIP_PROMPT=true
+
 # 拷贝项目
 COPY . .
 
-# 如果有私有 registry
+COPY /apps/web-antd/.env.docker /apps/web-antd/.env.local
-COPY .npmrc .npmrc
 
 # 安装 pnpm（官方推荐 corepack，更好）
-RUN corepack enable \
+RUN corepack enable && corepack prepare pnpm@latest --activate
- && corepack prepare pnpm@latest --activate
 
 # 安装依赖（一定要在 monorepo 根目录，保证 workspace 有效）
-RUN pnpm i
+RUN pnpm store prune && rm -rf $(pnpm store path) && \
+    rm -rf node_modules .npmrc package-lock.json pnpm-lock.yaml .pnpm-store .turbo && \
+    find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
+
+RUN yes | pnpm recursive install
 
 # 设置前端工作目录（根据实际情况修改）
-WORKDIR /app/apps/web-antd
-
 # 暴露前端 dev server 端口
 EXPOSE 5678
+#CMD ["tail", "-f", "/dev/null"]
 
 # 默认启动 dev server
-CMD ["pnpm", "run", "dev:antd"]
+CMD ["npm", "run", "dev:antd"]

web/apps/web-antd/.env.development

@@ -4,7 +4,8 @@ VITE_PORT=5678
 VITE_BASE=/
 
 # 接口地址
-VITE_GLOB_API_URL=http://127.0.0.1:8000/api
+VITE_GLOB_API_URL=/api
+VITE_BACKEND_URL=http://localhost:8000
 
 # 是否开启 Nitro Mock服务，true 为开启，false 为关闭
 VITE_NITRO_MOCK=false

web/apps/web-antd/.env.docker

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://backend:8000

web/apps/web-antd/vite.config.mts

@@ -1,17 +1,20 @@
 import { defineConfig } from '@vben/vite-config';
 
-export default defineConfig(async () => {
+import { loadEnv } from 'vite';
+
+export default defineConfig(async ({ mode }) => {
+  // eslint-disable-next-line n/prefer-global/process
+  const env = loadEnv(mode, process.cwd(), '');
   return {
     application: {},
     vite: {
       server: {
+        host: '0.0.0.0', // 保证 docker 内外都能访问
+        port: 5678,
         proxy: {
           '/api': {
+            target: env.VITE_BACKEND_URL,
             changeOrigin: true,
-            rewrite: (path) => path.replace(/^\/api/, ''),
-            // mock代理目标地址
-            target: 'http://localhost:5320/api',
-            ws: true,
           },
         },
       },