Docker 构建失败 - 创建 React App + Tailwind /bin/sh: craco: 未找到

Question

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

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

问题是当我运行使用 docker-compose 时它抛出 /bin/sh: craco: not found 错误。我什至尝试在前端 Dockerfile 中的 运行 yarn 之后添加 运行 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 构建和运行您的映像时需要注意的一件事是，卷仅在运行阶段映射，而不是在构建期间。

Docker 构建失败 - 创建 React App + Tailwind /bin/sh: craco: 未找到

Docker fails to build - Create React App + Tailwind /bin/sh: craco: not found

docker

reactjs

docker-compose

tailwind-css

craco