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
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 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 am trying to run a next js app locally inside a docker file. When I run the container, everything works as expected with the exception of my image files failing to render on the page. Inspection via the developer tools indicates a failed network request for those images (no 4XX code is indicated). The failed request looks as follows:
When I build npm run build and run the app locally npm run start, I see this same request successfully run. Same success story when I run in development mode npm run dev.
Here is the section of code utilizing the next Image module. import Image from "next/image";
<Image
src="/images/computerStation.png"
alt=""
height={300}
width={600}
/>
And my public directory tree:
root
│
└───public
│
└───images
│
└───computerStation.png
Given my local build/dev-env success, my thought is that I am doing something wrong with my docker file. I pretty much just ripped this off from the Next js docs and tweaked it to run with npm instead of yarn. See Dockerfile below:
# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install --frozen-lockfile
# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build
# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next
USER nextjs
EXPOSE 3000
# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
RUN npx next telemetry disable
CMD ["node_modules/.bin/next", "start"]
Any help on this would be greatly appreciated. Thanks!
You need to check your docker Node version, which should be
FROM node:14-alpine AS deps
FROM node:14-alpine AS builder
FROM node:14-alpine AS runner
Next.js has some problems, in Node 16 (node:alpine).
I have an Angular application with the following Dockerfile
FROM node:8
ENV APP_HOME /app
RUN mkdir -pv $APP_HOME
WORKDIR $APP_HOME
ENV NODE_ENV production
ENV NPM_CONFIG_LOGLEVEL warn
ENV CUSTOM_REGISTRY https://registry.npmjs.org/
RUN npm config set strict-ssl false
RUN npm config set registry $CUSTOM_REGISTRY
COPY . $APP_HOME
RUN npm install -g #angular/cli
RUN npm install
As you can see, in the copy command, we copy the current directory to the working directory of the container, however, after I SSH into the container to check if all the files were copied, I see that files which have two . in them are not copied.
Some examples are -
.angular-cli.json
.travis.yml
How can I move these files over to the container, the .angular-cli.json is specially critical for me to make the application run.
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.