CODEWITHSUNDEEP
node.jsreactjsdockernginx
fullstackdev
fullstackdev

Reputation: 1

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

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

Upvotes: 0

Views: 518

Answers (1)

Sushant Magoo
Sushant Magoo

Reputation: 374

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;
  }
}

Upvotes: 0

Related Questions