Problems with yarn in docker-compose - reactjs

Question

I have a Docker Compose environment that has been working very differently.
Here is the setup:
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
command:
docker-compose down && docker-compose -f docker-compose.prod.yml up --build --remove-orphans nginx
It doesn't work, for various reasons on various runs.
After various errors, I'm starting with a docker system prune, which at least "resets" the problems to some starting state.
Various problems include:
yarn install says info There appears to be trouble with your network connection. Retrying... but then proceeds to continue, spitting out various deprecation/incompatibility warnings, and finally getting to "Done".
Following this, it usually takes maybe 60+ seconds to even show "Removing intermediate container" and move on to the next step in the dockerfile.
Sometimes the network error will be all I get, and then yarn install will fail which halts the whole process.
yarn install might not show that network error, but show its various warnings between "Resolving packages" and "Fetching packages", which doesn't seem to make sense although this might be normal.
yarn install might, at any point in this process (including after install is done, during install, or even during yarn build), report that we're out of space: error An unexpected error occurred: "ENOSPC: no space left on device, mkdir '/node_modules/fast-glob/package/out/providers/filters'". or something similar.
The farthest we might get is, in 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 does not actually appear anywhere in my package.json file so there's nothing for me to change there, but otherwise I've tried those 4 steps. And then the next time I run I get the "no space left" error.
I'll also say, almost separately from this, that there have been times when, for some reason, it will go through all the steps, except with no output whatsover for yarn build, not even "Using cache". And this, of course, will have the nginx container fail as it tries to get the build files. Or something like that, honestly it's been a while. But what does happen when we move on to nginx, is that it will say "Building nginx" for an absurd amount of time, several minutes, before it even gets to the first step in the nginx dockerfile.
But the problem with the front end build is so big that that nginx thing is basically a separate issue.
Has anyone experienced (and solved!) anything similar to what I'm experiencing?

Answer 1

What you're attempting here is a multistage build using the old style before Docker 17.05.
The prod Dockerfile depends on the front-end-build image, that's why you get "Building nginx" until the image is ready.
You can condense both dockerfiles into one now.
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
Regarding the weird behaviour, check that you're copying the package.json to /package.json and right after you switch the WORKDIR to /srv (which is empty) and run yarn install.
Try moving the COPY order after the WORKDIR:
WORKDIR /srv
COPY package.json ./
https://docs.docker.com/develop/develop-images/multistage-build/