如何在Docker中自动运行React Vite项目的npm run dev命令

我通过docker-compose在WSL 2环境中运行一个搭配Flask API的Vite React应用，但目前必须手动执行以下命令才能在浏览器中访问React应用：

docker exec -it vite_react sh
npm i && npm run dev

请问应将这些命令放置在何处，才能让它们在docker-compose启动过程中自动执行？

以下是我的配置文件：

docker-compose.yml #

version: "3.8"
services:
  vite_react:
    image: node:alpine
    container_name: vite_react
    entrypoint: /bin/sh
    ports:
      - 3000:3000
    working_dir: /srv/app
    volumes:
      - type: bind
        source: ./ML-Flask-React
        target: /srv/app
    tty: true

  flask_app:
    build: ./ML-Flask-API
    container_name: flask_app
    ports:
      - 5000:5000
    depends_on:
      - redis

  redis:
    image: redis:alpine

Flask的Dockerfile #

FROM python:3

WORKDIR /app

RUN pip install --upgrade pip
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt

COPY . .

CMD [ "python", "app.py" ]

注：React应用没有单独的Dockerfile。

方案一：直接修改docker-compose.yml（快速实现） #

当前vite_react服务设置了entrypoint: /bin/sh和tty: true，只会启动一个交互式shell但不执行任何命令。你可以替换这两个配置，直接指定启动命令：

修改后的vite_react服务配置：

vite_react:
    image: node:alpine
    container_name: vite_react
    ports:
      - 3000:3000
    working_dir: /srv/app
    volumes:
      - type: bind
        source: ./ML-Flask-React
        target: /srv/app
    command: sh -c "npm i && npm run dev -- --host 0.0.0.0"

关键说明：

• --host 0.0.0.0必须加上：Vite开发服务器默认只监听localhost，容器内需要绑定所有网络接口才能让外部（WSL2宿主浏览器）访问。
• sh -c用来执行多条串联命令。

方案二：添加React应用的Dockerfile（更规范高效） #

直接挂载本地目录虽然方便开发，但每次启动都执行npm i效率低。给React应用添加Dockerfile可以利用镜像缓存优化：

1. 在ML-Flask-React目录下创建Dockerfile：

FROM node:alpine

WORKDIR /srv/app

# 先复制package文件，利用Docker缓存，仅在依赖变更时重新安装
COPY package*.json ./
RUN npm install

# 复制项目代码
COPY . .

# 启动开发服务器，监听所有接口
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

2. 修改docker-compose.yml中的vite_react服务：

vite_react:
    build: ./ML-Flask-React
    container_name: vite_react
    ports:
      - 3000:3000
    volumes:
      - type: bind
        source: ./ML-Flask-React
        target: /srv/app

优势：

• 第一次构建后，npm install只会在package.json或package-lock.json变更时重新执行，启动速度更快。
• 配置更符合Docker最佳实践。

额外注意事项 #

• WSL2环境中，若出现文件权限问题，可在vite_react服务中添加user: node（使用容器内的node用户运行命令，避免宿主目录权限冲突）。
• 确保Vite配置文件中开发服务器端口为3000，与docker-compose的端口映射一致。

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