Docker构建时提示vite未找到的问题求助

问题现象 #

运行Docker容器时出现以下错误：

[+] Running 1/1
 ⠿ Container client-client-1  Recreated                                                                0.2s
Attaching to client-client-1
client-client-1  |
client-client-1  | > client@0.0.0 dev
client-client-1  | > vite
client-client-1  |
client-client-1  | sh: 1: vite: not found
client-client-1 exited with code 127

相关配置文件 #

Dockerfile

FROM node

WORKDIR /usr/src/app

COPY ./package.json .

RUN npm i

COPY . .


CMD ["npm", "run", "dev"]

docker-compose.yml

version: '3.9'

services:
  client:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/usr/src/app

package.json

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "dependencies": {
    "eslint": "^8.36.0",
    "eslint-config-airbnb": "^19.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "@typescript-eslint/parser": "^5.54.1",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.35.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jsdom": "^21.1.0",
    "prettier": "^2.8.4",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

原因 #

核心问题是本地目录挂载覆盖了容器内的node_modules：docker-compose中- .:/usr/src/app将本地项目目录完整挂载到容器内，若本地未安装依赖（或node_modules被.gitignore排除未同步），容器内通过npm i安装的依赖会被覆盖，导致找不到vite命令。

解决办法 #

方法1：保留容器内node_modules（推荐） #

修改docker-compose.yml，添加排除node_modules的挂载规则，确保容器内安装的依赖不被本地目录覆盖：

version: '3.9'

services:
  client:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules  # 保留容器内的node_modules目录

方法2：用npx调用vite #

修改package.json的dev脚本，通过npx直接调用本地安装的vite：

"scripts": {
  "dev": "npx vite",
  "build": "tsc && npx vite build",
  "preview": "npx vite preview",
  // 其他脚本不变
}

方法3：全局安装vite（不推荐） #

在Dockerfile中添加全局安装vite的命令，此方法会增加镜像体积，仅作备选：

FROM node

WORKDIR /usr/src/app

COPY ./package.json .

RUN npm i && npm install -g vite

COPY . .

CMD ["npm", "run", "dev"]

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