Docker Compose运行Monorepo TS React应用时@shared模块找不到的求助

1. 给Docker Compose添加共享目录挂载 #

在docker-compose.yml中，为frontend和backend服务分别挂载项目根目录下的shared文件夹，实现本地修改与容器内文件的实时同步，同时让容器能访问到共享类型文件：

services:
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
      - ./shared:/app/shared  # 将本地shared目录挂载到容器内frontend的对应路径
    # 其他配置（端口、环境变量等）...
  backend:
    build: ./backend
    volumes:
      - ./backend:/app
      - ./shared:/app/shared  # 将本地shared目录挂载到容器内backend的对应路径
    # 其他配置...

注意：容器内的挂载路径要和tsconfig.json中../shared的相对路径逻辑匹配——比如frontend容器内代码目录是/app，那么../shared对应容器内的/app/shared，和挂载路径一致即可。

2. 适配模块解析工具的路径配置 #

仅靠tsconfig.json的路径映射不足以让构建/运行工具识别，需补充对应配置：

• 前端（Webpack）：在webpack.config.js中添加别名映射，匹配tsconfig的路径规则：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@shared': path.resolve(__dirname, '../shared'),
    },
  },
};

• 前端（Vite）：在vite.config.ts中配置别名：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@shared': path.resolve(__dirname, '../shared'),
    },
  },
});

• 后端（ts-node）：安装tsconfig-paths依赖，修改启动命令让ts-node能解析路径映射：

// backend/package.json
"scripts": {
  "start": "ts-node -r tsconfig-paths/register src/index.ts"
}

3. 验证容器内目录结构 #

如果仍报错，进入容器确认共享目录是否挂载成功：

# 进入frontend容器（替换为实际容器名）
docker exec -it frontend-container sh
# 查看shared目录是否存在
ls /app/shared

若目录不存在，检查docker-compose.yml的挂载路径是否与本地项目结构匹配，避免路径拼写错误。

内容的提问来源于stack exchange，提问作者drink more coffee