Below is my Dockerfile
FROM node:16 as build-stage
WORKDIR /app
COPY package*.json /app/
ARG PROJECT_NAME=react-ui
RUN npm install --force
COPY ./ /app/
RUN npm run build
FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=build-stage /app/build/ .
EXPOSE 8080
ENTRYPOINT ["nginx", "-g", "daemon off;"]
Step --> COPY ./ /app/ is taking too long, currently almost 50 mins and running. How do I fix this?
I tried building without the below step and it takes 4 mins average
RUN npm run build
but what I understand is we need to include npm run build too, right? This is my first time dockerizing a React Frontend App. Your help would be really appreciated, thank you
I suspect it is copying node_modules folder as well, although I have included that in .dockerignore. So my solution to this was to specify directly which folder and contents I need to copy rather than copying everything using COPY ./ /app/
Related
This is my admin react Dockerfile;
FROM node:16-alpine AS builder
WORKDIR /usr/src/app
COPY package*.json ./
COPY package-lock*.json ./
RUN npm install --force
COPY . .
RUN npm run build
## second stage
FROM nginx:1.22.0-alpine
COPY --from=builder /usr/src/app/build/ /usr/share/nginx/admin
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 3030:3030
CMD ["nginx","-g","daemon off;"]
This my main react app:
## first stage
FROM node:16-alpine AS builder
WORKDIR /usr/src/app
COPY package*.json ./
COPY package-lock*.json ./
RUN npm install --force
COPY . .
RUN npm run build
## second stage
FROM nginx:1.22.0-alpine
COPY --from=builder /usr/src/app/build/ /usr/share/nginx/main
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80:80
EXPOSE 443:443
CMD ["nginx","-g","daemon off;"]
So i have one main react app and one that is admin, i am trying to
copy their build to the same nginx but i can not find way around this.
With this way am i creating two nginx server image? I have no idea i
am a newbie at this. Thanks in advance for any help :)
I am using https://www.npmjs.com/package/#wojtekmaj/react-datetimerange-picker as my datetimerange picker. Unfortunately I ran into a problem, where the styles for this component do not load in production build (even though it works perfectly well locally) of the application and also it adds a second scrollbar on the right.
I am using docker for building. Here is the Dockerfile:
### STAGE 1: Build ###
FROM node:14.16.0 AS build
WORKDIR /usr/src/app
COPY package*.json ./
COPY yarn.lock .
# COPY package.json ./
# COPY package-lock.json ./
RUN npm install
COPY . .
RUN npm run-script build
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
# COPY nginx.conf /etc/nginx/nginx_cors.conf
WORKDIR /usr/share/nginx/html
RUN echo $uri
COPY --from=build /usr/src/app/build/ .
Here is how it looks locally
And here is the production one
I don`t really know what the issue is here, any help appreciated.
I have a React App and I need to run it in docker. Inside this container I need to build 3 instance with the same code, but with different environments by replacing .env.production with my .env.production2 and .env.production3 file. I have a problem with dockerfile: if I'm not use RUN npm install after changing WORKDIR - build stops with error:
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
So right now it works only with this dockerfile:
FROM node:12 as build-box
COPY . /app/expert
COPY . /app/expert-control-chat
COPY . /app/expert-control-support
WORKDIR /app/expert
ARG NPMTOKEN
ENV NPMTOKEN=$NPMTOKEN
RUN npm config set _auth $NPMTOKEN
RUN npm install
# Build
FROM build-box as publish
WORKDIR /app/expert
RUN npm run build
WORKDIR /
RUN rm -rf /app/expert-control-chat/.env.production
COPY .env.production.chat-control /app/expert-control-chat/.env.production
WORKDIR /app/expert-control-chat
RUN npm install
RUN npm run build
WORKDIR /
RUN rm -rf /app/expert-control-support/.env.production
COPY .env.production.chat-support /app/expert-control-support/.env.production
WORKDIR /app/expert-control-support
RUN npm install
RUN npm run build
FROM nginx as runtime
RUN rm -rf /etc/nginx/conf.d
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /app/expert
COPY --from=publish /app/expert/build ./
WORKDIR /app/expert-control-chat
COPY --from=publish /app/expert-control-chat/build ./
WORKDIR /app/expert-control-support
COPY --from=publish /app/expert-control-support/build ./
# Start
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]
Can you tell me the correct way to make a build?
I think that there is another way to build it, but I can't get that.
I'm having some issues with a multi-stage Dockerfile for an ejected create-react-app. The Dockerfile is listed below:
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
COPY . /usr/src/app
RUN npm run build
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
The Dockerfile runs successfully until it gets to step 10 (COPY) where it throws the following error:
COPY failed: stat /var/lib/docker/overlay2/2fc8af4cb8db9777246cae48721d8a93917c73e415a02680f1e3a73c8780b903/merged/usr/src/app/build: no such file or directory
I've googled away but can't find a clear answer. Has anyone experienced anything similar?
When you build the application it's building in another cointainer/layer. You i'll need to build the application before and copy the build folder to /usr/src/app.
So, this is fine:
FROM node:9.6.1 as builder
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json .
COPY public public
COPY src src
RUN npm install --silent
RUN npm run build
COPY build .
RUN rm -rf src
RUN rm -rf build
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app /usr/share/nginx/html
EXPOSE 80
I'm removing the src and build folders since that's not necessary and can expose an critical part of your application.
Hence, no doubt about the security of dockerizing an application.
It's hard to tell from that, but my best guess would be that "RUN npm install --silent" is failing, possibly because it can't download one of your packages due to either a network issue or some other reason, therefore your build is then failing and not producing the build folder.
I had the same error using volumes Just because project (and Also dockerfile obviously) was outside Users/[currentuser] folder.. It Easy in "program files". Moving project from program files folder ti Users/[currentuser] It worked. I don't know if it's the same case. Try It and let me know
Possibly because COPY . /usr/src/app should be done inside top level directory so that build is created inside /usr/src/app. Do one thing. Put this command 'COPY . /usr/src/app' at the top(before WORKDIR /usr/src/app) and post the output here so I can help you better.
A cleaner way to do this would be like the following:
FROM node:9.6.1 as builder
WORKDIR /build
ENV PATH /build/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
COPY . /build/app
RUN npm run build
FROM nginx:1.13.9-alpine
COPY --from=builder /build /usr/share/nginx/html
EXPOSE 80
I have a React application that I dockerized as a multi-stage build. First it builds the application to the /app/build directory and then nginx tries to copy that to serve it.
FROM node:alpine as build
WORKDIR /app
ADD package.json /app
RUN npm install
ADD . /app
CMD ["npm", "run", "build"]
FROM nginx:alpine
COPY --from=build /app/build/ /usr/share/nginx/html
However when I try to build the image, the second stage can't seem to copy /app/build from the previous stage.
$ docker build -t foo .
...
Step 8/8 : COPY --fromm=build /app/build /usr/share/nginx/html
COPY failed: stat /var/lib/docker/overlay2/cf1f4930e894ad5b1d404943fb81e45cdd06b8a39abe434a342f5f90f4a1f58f/merged/app/build: no such file or directory
What is wrong and how do I fix it?
The problem was the final step in the first stage where
CMD ["npm", "run", "build"]
should be
RUN npm run build
See difference between CMD and RUN.