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

Question

我已经被这个问题困扰了几天了。我正在尝试修改一个django REST + react (创建-反应-应用程序)应用程序。react应用程序使用craco进行构建，因为我使用的是尾风。我遵循这个指南，将Tailwind与React应用程序集成在一起，当我在本地运行纱线开始时，它就可以工作了。

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

问题是，当我使用docker-运行它时，它会抛出/bin/sh: craco: not 错误。我甚至尝试在前端Dockerfile中添加RUN same @craco/craco -g，在RUN same之后添加@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

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

尝试删除停靠-撰写文件中的此部分。这样，您就不会覆盖图像中的内容，而craco也将可用。

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

需要注意的一件事是，当您使用同时构建和运行您的映像时，卷只在运行阶段而不是在构建期间被映射。

Answer 2

@汉斯·基利安答案解决了这个问题，但是当您编辑时，您的代码更改没有反映出来。

使用匿名卷(‘/app/前沿/节点_模块’)，运行时主机目录的挂载不会覆盖node_modules目录

通过更改卷部分，可以解决问题并保持快速开发反馈循环。

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

您可以阅读更多的这里

我也有同样的问题，通过以上的方法解决了。