Проблемы с yarn в docker-compose

#reactjs #docker #docker-compose #yarnpkg

#reactjs #docker #docker-compose #yarnpkg

Вопрос:

У меня есть среда 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 amp;amp; docker-compose -f docker-compose.prod.yml up --build --remove-orphans nginx
  

Это не работает по разным причинам при разных запусках.

После различных ошибок я начинаю с docker system prune , который, по крайней мере, «сбрасывает» проблемы в некоторое начальное состояние.

Различные проблемы включают:

  • yarn install говорит info There appears to be trouble with your network connection. Retrying... , но затем продолжает, выплевывая различные предупреждения об устаревании / несовместимости и, наконец, переходя к «Готово».
    • После этого обычно требуется более 60 секунд, чтобы даже показать «Удаление промежуточного контейнера» и перейти к следующему шагу в dockerfile.
  • Иногда я получаю только сетевую ошибку, и тогда установка yarn завершается неудачно, что останавливает весь процесс.
  • yarn install может не отображаться эта сетевая ошибка, но отображаются различные предупреждения между «Разрешением пакетов» и «Выборкой пакетов», что, похоже, не имеет смысла, хотя это может быть нормально.
  • yarn install может в любой момент этого процесса (в том числе после завершения установки, во время установки или даже во время yarn build ) сообщить, что у нас не хватает места: error An unexpected error occurred: "ENOSPC: no space left on device, mkdir '/node_modules/fast-glob/package/out/providers/filters'". или что-то подобное.

Самое большее, что мы могли бы получить, это в 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, по сути, является отдельной проблемой.

Кто-нибудь испытывал (и решал!) Что-нибудь похожее на то, что я испытываю?

Ответ №1:

То, что вы пытаетесь здесь, — это многоступенчатая сборка с использованием старого стиля до Docker 17.05.

prod Файл Dockerfile зависит от 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
  

docker-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:

 WORKDIR /srv
COPY package.json ./
  

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

Комментарии:

1. Спасибо, это отличные ответы. Однако на самом деле я хочу иметь их в виде отдельных контейнеров. На самом деле я хочу пропустить все элементы сборки интерфейса, что я сделаю, закомментировав зависимость nginx от fe-сборки в yaml и прокомментировав COPY --from строку в nginx dockerfile. Мысли? Это просто плохая идея, учитывая то, что вы упомянули?

2. Но если вы это сделаете, то все, что вы получите, это контейнер vanilla nginx без вашего кода приложения.

3. Это то, что я хочу в этих случаях. Иногда мне нужен nginx для размещения моего серверной части flask, но я запускаю интерфейс react на локальном сервере разработки, поэтому я не хочу тратить время на создание всего интерфейса

4. В этом случае назначьте каждому контейнеру отдельную ответственность и используйте соответственно один контейнер для серверной части Flask, а другой для интерфейса и запустите те, которые вам нужны в данный момент. Используя переменные среды вы можете добиться слабой связи между контейнерами и подключить работающий контейнер к локальному серверу.