如何在Docker容器中为Django集成Svelte/SvelteKit及排障

1. 调整项目目录结构 #

把Svelte/SvelteKit项目放到Django项目的同级目录，示例结构：

project-root/
├── django-app/
│   ├── manage.py
│   ├── your_django_app/
│   └── static/
├── svelte-app/
│   ├── src/
│   ├── package.json
│   └── vite.config.js
├── Dockerfile
└── docker-compose.yml

2. 修改Dockerfile，同时支持Python和Node环境 #

在镜像中同时安装Python和Node.js，完成Django依赖安装、Svelte依赖安装与构建：

# 基于Python slim镜像，后续安装Node
FROM python:3.11-slim

# 安装Node.js（按需选择版本，这里用20.x）
RUN apt-get update && apt-get install -y curl \
    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
    && apt-get install -y nodejs \
    && rm -rf /var/lib/apt/lists/*

# 设置工作目录
WORKDIR /app

# 安装Django依赖
COPY django-app/requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# 复制Django项目文件
COPY django-app/ .

# 处理Svelte：安装依赖并构建
COPY svelte-app/package*.json ./svelte-app/
WORKDIR /app/svelte-app
RUN npm install
RUN npm run build  # SvelteKit用npm run build，默认输出到build目录

# 将构建后的静态文件复制到Django静态目录
RUN cp -r build/* ../static/svelte/

# 回到Django根目录，启动服务
WORKDIR /app
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

3. 更新docker-compose.yml（开发环境） #

如果需要实时修改代码，挂载本地目录到容器，同时保留容器内的node_modules避免覆盖：

version: '3.8'

services:
  web:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - ./django-app:/app  # 挂载Django源码
      - ./svelte-app:/app/svelte-app  # 挂载Svelte源码
      - /app/svelte-app/node_modules  # 防止本地挂载覆盖容器内的node_modules
      - ./django-app/static/svelte:/app/static/svelte  # 同步构建后的静态文件
    environment:
      - DEBUG=1

4. 配置Django访问Svelte静态文件 #

在Django的settings.py中确保静态文件目录配置正确：

import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

之后在Django模板中直接引用Svelte的构建产物即可，比如：

<script src="{% static 'svelte/index.js' %}"></script>
<link rel="stylesheet" href="{% static 'svelte/index.css' %}">

常见原因与解决方案 #

1. 容器内未安装Node依赖 #

如果Dockerfile跳过了npm install步骤，容器内没有vite依赖。修正Dockerfile：

FROM node:20-slim

WORKDIR /app

# 先复制package文件，利用Docker缓存
COPY package*.json ./
RUN npm install  # 安装所有依赖包括vite

# 再复制项目源码
COPY . .

# 用npm scripts运行，避免直接调用vite（局部安装时路径问题）
CMD ["npm", "run", "dev"]

2. 卷挂载覆盖了node_modules #

开发环境中如果挂载了本地目录到容器，本地的node_modules（或缺失）会覆盖容器内的依赖。解决方法：
在docker-compose.yml中添加匿名卷保留容器内的node_modules：

services:
  svelte:
    build: ./svelte-app
    ports:
      - "5173:5173"
    volumes:
      - ./svelte-app:/app
      - /app/node_modules  # 关键：避免挂载覆盖容器内的node_modules

3. 直接调用vite而非通过npm scripts #

如果vite是局部安装（未全局安装），直接运行vite会找不到可执行文件。确保package.json的scripts配置正确：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

容器内运行npm run dev而非直接vite。

4. 镜像兼容性问题 #

如果使用alpine镜像，可能缺少vite运行所需的系统依赖。换成node:20-slim或官方node镜像即可。

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