how to setup nginx config to make from react js to communicate with node js in docker

Question

I am trying to dockerize my personal application. Usually in local we mention the server(http://server:4000) in the package.json file of react. But in production when we build the react app , we don't use pacakge.json. We have to config the nginx server to redirect the api calls to my node js server.

Here is my nginx config and my containers.

Containers: CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 10b8d0bf6b2e abc/client:latest "/docker-entrypoint.…" 43 minutes ago Up 27 minutes 0.0.0.0:8001->80/tcp, :::8001->80/tcp client ed73637b394d abc/api:latest "node index.js" 5 days ago Up 39 minutes 0.0.0.0:4000->4000/tcp, :::4000->4000/tcp node 6ead7807604a mongo "docker-entrypoint.s…" 6 days ago Up 42 minutes 0.0.0.0:27017->27017/tcp, :::27017->27017/tcp db

Nginx config: upstream api { server node: 4000; } server { listen 80; listen[::]: 80; location / { root / var / www / html; index index.html index.htm; try_files $uri / index.html; proxy_pass http: //api; proxy_set_header Host $http_host; } error_page 404 / 404. html; error_page 403 / 403. html; # To allow POST on static pages error_page 405 = 200 $uri; } — fullstackdev
– fullstackdev, Commented Jul 21, 2021 at 11:51

Sushant Magoo · Accepted Answer · 2021-07-21 11:57:30Z

0

For prod I use this for Dockerfile and keep build generated from React project behind Nginx

FROM node:12-alpine as builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx
EXPOSE 80
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html

/nginx/default.conf file, nginx dir. should be at same level of package.json

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

answered Jul 21, 2021 at 11:57

Sushant Magoo

3745 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to setup nginx config to make from react js to communicate with node js in docker

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related