I'm using following Dockerfile for ReactJS application:
FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run build
RUN npm install -g serve
RUN rm -rf node_modules
EXPOSE 3000
CMD ["serve", "-s", "build"]
I'm installing node_modules, but I'm deleting node_modules after I run the npm run build. But still image size in GBs. May I know the reason please?
use the alpine version.
the size only 38 MB (the "standard" is 332 MB)
https://hub.docker.com/layers/node/library/node/current-alpine3.14/images/sha256-2829f9b05a85038bd04412c45e5929f0005c64f8ae444e65ba4e02635f904871?context=explore
Related
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/
I am trying to dockerize a simple react js app. It takes so long time when running npm install. It's been 1 hour it's still running. Is it just because the memory of my hardware too low? It's 1gb.
Below is my dockerfile
FROM node:lts-alpine
ENV NODE_ENV=production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install --production verbose
COPY . .
EXPOSE 3000
RUN chown -R node /usr/src/app
USER node
CMD ["npm", "start"]
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 am deploying a react app to Heroku via TravisCI. The fact that I'm using Heroku doesn't really affect what I'm about to ask, I'm pretty sure, it's just there for context. Travis successfully deploys the app until I add a testing step (the script section) in .travis.yml:
language: generic
sudo: required
services:
- docker
before_install:
- docker build -t myapp:prod -f Dockerfile.prod .
script:
- docker run -e CI=true myapp:prod npm run test
after_success:
- docker build -t myapp:prod -f Dockerfile.prod .
- echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_ID" --password-stdin
- docker push myapp:prod
deploy:
provider: heroku
app: myapp
skip_cleanup: true
api_key:
secure: <my_key>
However, my Dockerfile.prod is a multi-stage node + nginx where the nginx stage doesn't keep any node or npm stuff:
# build environment
FROM node:13.12.0-alpine as builder
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
# some CI stuff I guess
RUN npm ci
RUN npm install react-scripts#3.4.1 -g --silent
COPY . ./
RUN npm run build
# production environment
FROM nginx:stable-alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
# If using React Router
COPY --from=builder /app/build /usr/share/nginx/html
# For Heroku
CMD sed -i -e 's/$PORT/'"$PORT"'/g' /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'
Therefore, it is my understanding that .travis.yml tries to run that npm run test command inside my nginx container and can't execute npm commands (no node installed, right?). So guided by SO answers such as this one I started adding commands into that nginx stage such as
COPY package.json ./
COPY package-lock.json ./
RUN apk add --update npm
but I realized I might be approaching this the wrong way. Should I perhaps be adding npm through Travis? That is, should I include in .travis.yml in the scripts section something like docker run -e CI=true myapp:prod apk add --update npm and whatever else is necessary? This would result in a smaller nginx image no? However, would I run into problems with package.json from the node stage in Dockerfile.prod or anything like that?
In summary, to use TravisCI to test a dockerized react app served with nginx, at what point should I install npm into my image? Does it happen as part of script in .travis.yml or does it happen in Dockerfile.prod? If it is recommened to npm run tests inside Dockerfile.prod, would I do that in the first stage (node) or the second (nginx)?
Thanks
EDIT: Not sure if this can be considered solved, but a user on Reddit recommended to simply RUN npm run test right before the RUN npm run build.
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