Docker 无法构建 - 创建 React App + Tailwind /bin/sh: craco: not found

Question

我已经被这个问题困扰了几天了。我正在尝试对 django REST API + react (create-react-app) 应用程序进行 dockerize。由于我使用的是 tailwindcss，因此反应应用程序使用 craco 进行构建。我按照本指南将 Tailwind 与 React 应用程序集成，当我在本地运行 yarn start 时它正在工作。

指南：https://tailwindcss.com/docs/guides/create-react-app

问题是当我使用 docker-compose 运行它时，它会抛出 /bin/sh: craco: not found 错误。我什至尝试在前端 Dockerfile 中的 RUN yarn 之后添加 RUN yarn add @craco/craco -g ，但它显示相同的错误。

运行docker-compose up --build时出错：

...
Step 8/9 : COPY . /app/frontend/
 ---> 19e0247cde64
Step 9/9 : EXPOSE 3000
 ---> Running in 43f7d970d460
Removing intermediate container 43f7d970d460
 ---> a20ae2148d4b

Successfully built a20ae2148d4b
Successfully tagged react_frontend:latest
Creating react_frontend_container ... done
Attaching to react_frontend_container
yarn run v1.22.15
$ craco start
frontend_1  | /bin/sh: craco: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
react_frontend_container exited with code 127

前端 Dockerfile：

FROM node:16-alpine

WORKDIR /app/frontend

COPY package.json .
COPY yarn.lock .

RUN yarn

COPY . /app/frontend/
EXPOSE 3000

docker-compose.yml:

version: '3.8'

services:
  ... (postgres db and django api services)

  frontend:
    build: ./frontend
    command: ["yarn", "start"]
    stdin_open: true # docker run -i
    tty: true        # docker run -t
    volumes:
      - ./frontend:/app/frontend
      - node-modules:/app/frontend/node_modules
    container_name: react_frontend_container
    ports:
      - "3000:3000"

volumes:
  node-modules:

package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  }
}

Answer 1

问题是您将主机目录和卷映射到映像中包含节点模块和应用程序文件的目录。

尝试在 docker-compose 文件中删除此部分。这样您就不会覆盖图像中的内容，并且 craco 将可用。

volumes:
  - ./frontend:/app/frontend
  - node-modules:/app/frontend/node_modules

使用 docker-compose 构建和运行映像时需要注意的一点是，卷仅在运行阶段而不是在构建期间映射。