I've been trying to setup a configuration where an Ingress on GCP is linking to two different backends
(so [public-ip]/backend1 for service1 and [public-ip]/backend2 for service2) but it doesn't seem to be working. The react app i'm deploying has this as nginx.conf configuration (shamelessly stolen from internet, I suspect this is what's not working properly)
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
It seems that for some reason it finds the index.html properly but not the javascript and css files that are generated with npm run build.
This is my Dockerfile
FROM node:alpine as build
WORKDIR /app
COPY . /app
ENV PATH /app/node_modules/.bin:$PATH
RUN yarn
RUN yarn build
FROM nginx:alpine
# copy the build folder from react to the root of nginx
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Related
Getting following error when deploying React app with service worker on nginx server with docker, the error cause service worker to be status: redundant
Here is my docker config
ARG ENV
WORKDIR '/app'
COPY . .
RUN ls -la
RUN yarn install
RUN yarn build:$ENV
FROM nginx:alpine
RUN apk add --no-cache bash
RUN apk add --no-cache ca-certificates
EXPOSE 80
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html
and nginx default.conf
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /healthz {
access_log off;
return 200 "healthy\n";
}
error_page 404 /index.html;
location = /index.html {
root /usr/share/nginx/html;
internal;
}
}
App runs fine when running ./build version locally with servo but only one deployment it shows above error and service worker no longer works.
::: UPDATE :::
It seems to be a SSL issue. I changed the nginx.conf to port 80 and it works.
I am trying to solve the problem of the 404 errors in React when a user clicks refresh.
The application runs in Docker in Kubernetes on Azure.
I have tried changing the nginx.conf file and pulling it into the container.
Even though the Docker builds, it seems like the container is still running the default nginx.conf.
nginx.conf
server {
listen 443 ssl;
location / {
root /var/www;
index index.html index.htm;
try_files $uri $uri/ /index.html?$args;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /var/www;
}
}
Docker file
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 install
RUN npm install react-scripts#3.4.1 -g
COPY . ./
RUN npm run build
# production environment
FROM nginx:alpine
# copy the build folder from react to the root of nginx (www)
COPY --from=build /app/build /var/www
# --------- only for those using react router ----------
# if you are using react router
# you need to overwrite the default nginx configurations
# remove default nginx configuration file
RUN rm /etc/nginx/conf.d/default.conf
# replace with custom one
COPY /nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 443
CMD ["nginx", "-g", "daemon off;"]
Project Structure
hi I am having a problem to deploy my React app ( create react app) using docker and nginx
the image is created with success : using the following script :
docker build -t front --network=host .
howver when I try to run the container : docker run -p 3000:80 front
it is not working and I got the following message :
10-listen-on-ipv6-by-default.sh: /etc/nginx/conf.d/default.conf differs from the packages version, exiting
my docker file :
FROM node:12.19.0-alpine3.12 as build
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
#ARG REACT_APP_BACKENDURL
#ENV REACT_APP_BACKENDURL $REACT_APP_BACKENDURL
# install and cache app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm ci
RUN npm install react-scripts#3.2.0 -g --silent
COPY . ./
RUN npm run build
# add app
#COPY . /app
# generate build
#RUN npm run build
############
### test ###
############
# base image
FROM nginx:1.19.0-alpine
# copy artifact build from the 'build environment'
COPY --from=build /app/build /usr/share/nginx/html
#nginx config with react router
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# expose port 80
EXPOSE 80
#COPY .env /usr/share/nginx/html
# run nginx
CMD ["nginx", "-g", "daemon off;"]
my nginx.conf :
server {
listen 3000;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
any ideas what I did wrong,, also I am looking for best practices to deploy REACT APP with docker
You should separate dockefile above into 2 dockerfile,
One for front image , one for nginx.
Then create both images. And 2 containers are belong to those images.
Expose dockerfile nodejs : 3000
And add to nginx configuration file: proxy_pass ip_address_nodejs_container:3000
I have some problem with create-react-app and docker configuration with nginx, this is my first time when i trying to dockerize react app. I tried many different settings and almost always i get 404 after build.
This is my docker file:
FROM node:alpine as build
WORKDIR /app
COPY package*.json /app/
RUN yarn install
COPY . .
RUN yarn run build
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx.html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Right now my nginx file looks like that, but as i said, i tried many different settings
server {
listen 80;
location / {
root /var/www;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
And this is what i see after build
I dont know if this is important but for routing i using react-navi.
Any ideas?
It looks like your Nginx configuration is looking at /var/www but you're copying your files to /usr/share/nginx.html. Shouldn't the copy command look like this?
COPY --from=build /app/build /var/www
I am trying to configure multiple Docker containers for a website with Nginx.
I have docker-compose working to spin up each container but I'm having trouble getting the React app to hit the Gunicorn WSGI server for the Flask API's when using Nginx.
Any idea why this might happen? It works fine without Nginx in the picture. Do I need an Nginx conf for the flask app also? Or is it a case of routing requests to the Gunicorn WSGI server from Nginx?
React frontend (container)
# build environment
FROM node:12.2.0-alpine as build
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
RUN npm install react-scripts#3.0.1 -g --silent
COPY . /usr/src/app
RUN npm run build
# production environment
FROM nginx:1.16.0-alpine
COPY --from=build /usr/src/app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Nginx.conf
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Docker-compose
version: '3.7'
services:
middleware:
build:
context: ./middleware
dockerfile: Dockerfile.prod
command: gunicorn --bind 0.0.0.0:5000 main:app
ports:
- 5000:5000
env_file:
- ./.env.prod
frontend:
container_name: frontend
build:
context: ./frontend/app
dockerfile: Dockerfile.prod
ports:
- '80:80'
Yes, you need to proxy the traffic in Nginx to the WSGI app, something like
server {
listen 80;
server_name your_domain www.your_domain;
location / {
include uwsgi_params;
uwsgi_pass unix:/home/sammy/myproject/myproject.sock;
}
}
read more here
Update
In this particular case, you will need to proxy to Gunicorn which is in a separate container, visible under the name middleware.
Because of that the uwsgi_pass directive should refer to that container:
server {
listen 80;
server_name your_domain www.your_domain;
location / {
include uwsgi_params;
uwsgi_pass http://middleware:5000;
}
}
Please mind, that if you're using Gunicorn -it recommends using proxy_pass, not uwsgi_pass.