时间戳

首页 > 解决方案 > docker-compose 中的纱线问题

reactjs - docker-compose 中的纱线问题

问题描述

我有一个工作方式非常不同的 Docker Compose 环境。

这是设置：

docker-compose.prod.yaml

 front_end:
    image: front-end-build
    build:
      context: ./front_end
      dockerfile: front_end.build.dockerfile

  nginx:
    build:
      context: ./front_end
      dockerfile: front_end.prod.dockerfile
    ports:
      - 80:80
      - 5000:5000
    environment:
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    tty: true
    depends_on:
      - front_end

front_end.build.dockerfile

FROM node:13.12.0-alpine
COPY package.json ./
WORKDIR /srv
RUN yarn install
RUN yarn global add react-scripts
COPY . /srv
RUN yarn build

front_end.prod.dockerfile

FROM nginx
EXPOSE 80
COPY --from=front-end-build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d

命令：

docker-compose down && docker-compose -f docker-compose.prod.yml up --build --remove-orphans nginx

由于各种原因，它不起作用。

在出现各种错误之后，我从 a 开始docker system prune，它至少将问题“重置”到某个起始状态。

各种问题包括：

我们可能得到的最远距离是yarn build：

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack-dev-server": "3.11.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:

  /node_modules/webpack-dev-server (version: 3.10.3) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack-dev-server" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /node_modules/webpack-dev-server is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack-dev-server in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.

webpack-dev-server实际上并没有出现在我的 package.json 文件中的任何地方，所以我没有什么可以改变的，但除此之外我已经尝试了这 4 个步骤。然后下次我运行时，我得到“没有剩余空间”错误。

我还要说，几乎与此分开，有时，由于某种原因，它会经历所有步骤，除了没有输出什么yarn build，甚至没有“使用缓存”。当然，这会使 nginx 容器在尝试获取构建文件时失败。或者类似的东西，老实说已经有一段时间了。但是当我们继续使用 nginx 时会发生什么，它会说“构建 nginx”一段荒谬的时间，几分钟，甚至在它到达 nginx dockerfile 的第一步之前。

但是前端构建的问题是如此之大，以至于 nginx 的事情基本上是一个单独的问题。

有没有人经历过（并解决了！）任何类似于我正在经历的事情？

标签： reactjsdockerdocker-composeyarnpkg

解决方案

您在这里尝试的是使用 Docker 17.05 之前的旧样式进行多阶段构建。

Dockerfileprod依赖于front-end-build镜像，这就是为什么在镜像准备好之前你会得到“Building nginx”。

您现在可以将两个 dockerfile 压缩为一个。

Dockerfile

FROM node:13.12.0-alpine AS front-end-build
WORKDIR /srv
COPY package.json ./
RUN yarn install
RUN yarn global add react-scripts
COPY . /srv
RUN yarn build

FROM nginx
EXPOSE 80
COPY --from=front-end-build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d

码头工人-compose.yml

  nginx:
    build: front_end/
    ports:
      - 80:80
      - 5000:5000
    environment:
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    tty: true

关于奇怪的行为，请检查您是否正在将 package.json 复制到/package.json并在您将 WORKDIR 切换为/srv（为空）并运行之后立即复制yarn install.

尝试在 WORKDIR 之后移动 COPY 顺序：

WORKDIR /srv
COPY package.json ./

https://docs.docker.com/develop/develop-images/multistage-build/

推荐阅读