I have created react app user create-react-app
I build project with using npm run build and serve it using Nginx with help of docker
When i am accessing application and inspecting the application it's showing css path in app/src/node_module also showing the css path of application/src/css_path
what i am doing wrong here , please help.
Thank you!
docker file:
FROM node as builder
RUN mkdir /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/
COPY . /app
RUN npm run build
FROM nginx:1.15.8
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
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/
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 :)
So I have this Dockerfile, which builds a React app, and then serves it. It is working just fine. However, as soon as I add a shell script to be executed within CMD, the image builds, but hangs indefinetely when run.
I followed this tutorial: adding env variables to nginx docker
# Stage 0, build-stage, based on Node.js to build the frontend
FROM node:alpine as build
MAINTAINER Kuba Wasilewski <jakub.wasilewski#sprint.pl>
WORKDIR /app
COPY package*.json /app/
RUN apk add --update python make g++\
&& rm -rf "/var/cache/apk/*"
RUN npm install
COPY . /app/
RUN npm run build
# Stage 1, run-phase, based on NGINX to provide SSL configuration and serve static files
FROM nginx:alpine
MAINTAINER Kuba Wasilewski <jakub.wasilewski#sprint.pl>
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/default.conf /etc/nginx/conf.d
COPY nginx/server.cert /etc/nginx
COPY nginx/server.key /etc/nginx
EXPOSE 443
# working CMD
# CMD ["nginx", "-g", "daemon off;"]
# changes Ive applied
WORKDIR /usr/share/nginx/html
COPY nginx/env.sh .
COPY nginx/.env .
RUN apk add --no-cache bash
RUN chmod +x env.sh
CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
If anyone else encounters this issue, the actual solution is COPY build/myscript.sh /docker-entrypoint.d/myscript.sh and add RUN chmod +x /docker-entrypoint.d/myscript.sh in the Dockerfile.
You can leave CMD [ "nginx", "-g", "daemon off;"] at the end.
This will work because nginx:alpine will run the scripts in /docker-entrypoint.d/ before starting nginx. If you try using sh or bash with nginx inside then it will hang.
For a react app with .env:
REACT_APP_ENV_VAR_1=A
REACT_APP_ENV_VAR_2=B
Customizing an environnement variable through docker-compose.yml doesn't alter its default value:
services:
front:
image: "react-app-image"
environment:
- REACT_APP_ENV_VAR_2=C
.env variable could be used in the react app:
let env_var_2 = process.env.REACT_APP_ENV_VAR_2;
Is there a way to directly access docker-compose ENV from react app or to map .env entries with docker ENV ?
Front Dockerfile for building react app image
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci --silent
RUN npm install react-scripts#3.4.1 -g --silent
COPY . ./
RUN npm run build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
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.