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 :)
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 have a next.js app that contains a pdf file in pdfs/example.pdf. However when I run my docker image I get a 404 error in the pdf viewer on the webpage.
below is my dockerfile:
# Get NPM packages
FROM node:14-alpine AS dependencies
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --only=production
# Rebuild the source code only when needed
FROM node:14-alpine AS builder
WORKDIR /app
COPY . .
COPY ./pdfs/ ./pdfs/
COPY --from=dependencies /app/node_modules ./node_modules
RUN npm run build
# Production image, copy all the files and run next
FROM node:14-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/pdfs/ ./pdfs/
USER nextjs
EXPOSE 3000
CMD ["npm","run","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 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.