如何在单一Docker Compose环境中配置Django与Vite应用并实现通信？

问题背景 #

现有集成Vite前端的Django项目，本地通过django_vite连接正常，但Docker Compose部署时遇到以下问题：

• 执行docker-compose up --build时出现failed to solve: failed to read dockerfile: open Dockerfile: no such file or directory错误
• 即使Django服务启动，Vite前端无法在容器中正常运行
• 目标：Django运行在8000端口，Vite运行在3000端口，通过同一Compose命令启动

项目目录结构 #

For_Testing_Purpose-1/
django_project
 ┣ __pycache__
 ┣ asgi.py
 ┣ settings.py
 ┣ urls.py
 ┣ wsgi.py
 ┗ __init__.py
homepage
 ┣ migrations
 ┣ __pycache__
 ┣ admin.py
 ┣ apps.py
 ┣ models.py
 ┣ tests.py
 ┣ urls.py
 ┣ views.py
 ┗ __init__.py
templates
 ┗ home.html
webapp
 ┣ dist
 ┃ ┣ .vite
 ┃ ┃ ┗ manifest.json
 ┃ ┣ assets
 ┃ ┃ ┗ tailwind-4t-_kGsy.css
 ┃ ┗ vite.svg
 ┣ node_modules
 ┣ public
 ┃ ┗ vite.svg
 ┣ src
 ┃ ┗ style.css
 ┣ .gitignore
 ┣ index.html
 ┣ package-lock.json
 ┣ package.json
 ┗ vite.config.ts
.dockerignore
db.sqlite3
docker-compose.yml
Dockerfile
manage.py
requirements.txt

现有配置问题 #

当前Dockerfile仅配置Django后端，未包含Vite前端的Node环境；docker-compose.yml未定义Vite服务，导致前端无法容器化启动。

解决方案 #

1. 为Vite前端创建独立Dockerfile #

在webapp目录下新建Dockerfile：

# 使用Node.js官方镜像
FROM node:20-alpine

# 设置工作目录
WORKDIR /app

# 复制package文件
COPY package*.json ./

# 安装依赖
RUN npm ci

# 复制项目文件
COPY . .

# 暴露Vite开发端口
EXPOSE 3000

# 启动Vite开发服务
CMD ["npm", "run", "dev"]

2. 修改Docker Compose配置 #

更新根目录下的docker-compose.yml，添加Vite前端服务并完善网络配置：

services:
  web:
    build: .
    command: python /code/manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db
    networks:
      - app-network

  vite:
    build: ./webapp
    volumes:
      - ./webapp:/app
      # 避免本地node_modules覆盖容器内依赖
      - /app/node_modules
    ports:
      - "3000:3000"
    networks:
      - app-network
    environment:
      - NODE_ENV=development

  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    environment:
      - POSTGRES_HOST_AUTH_METHOD=trust
    networks:
      - app-network

volumes:
  postgres_data:

networks:
  app-network:
    driver: bridge

3. 调整Vite配置 #

修改webapp/vite.config.ts，允许外部访问并配置API代理：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
    // 前端调用Django API时的代理配置
    proxy: {
      '/api': {
        target: 'http://web:8000',
        changeOrigin: true
      }
    }
  }
})

4. Django配置调整 #

在django_project/settings.py中配置django_vite指向容器内的Vite服务：

# 容器部署时使用此配置，本地开发可切换为http://localhost:3000
DJANGO_VITE_DEV_SERVER_URL = "http://vite:3000"

5. 修正Dockerfile找不到问题 #

执行docker-compose up --build时，确保当前工作目录为For_Testing_Purpose-1/（即包含docker-compose.yml和根Dockerfile的目录）

内容的提问来源于stack exchange，提问作者Haaland