MERN app - nginx with docker : failing to connect to backend - nginx

Question

Now I'm trying to deploy my MERN app on VPS.
I'd like to connect the client to the frontend and let the frontend communicate with the backend inside of the server. Because I think it's unnecessary to expose the backend on the public port since it'll be api server only for this site.
I've tried to mimic those files for Nginx settings and docker settings in so many ways and still doesn't work, and now I'm very frustrated. Because I really can't figure out the reason it doesn't let me connect to the backend docker.
1. On the top, 2 folders; frontend / backend
├── Backend
│ ├── Dockerfile
│
├── Frontend
│ │
│ └── Dockerfile
│ │
│ └── frontend.conf
│
└── docker-compose.yml
2. Frontend - 2 staged Dockerfile : stage 1 - react build, stage 2 - nginx with the build (and add .conf file to nginx)
/Frontend/Dockerfile
#
# Stage 1: React production build
#
FROM node:16.18.0 as frontend
WORKDIR /frontend
COPY package*.json ./
RUN yarn
COPY . .
ENV NODE_ENV=production
RUN yarn build
# CMD ["yarn","start:prod"]
EXPOSE 5500
#
# Stage 2: Nginx as a proxy & static file server
#
FROM nginx
WORKDIR /usr/share/nginx/html
RUN apt-get update && apt-get install -y certbot python3-certbot-nginx
RUN rm -rf /usr/share/nginx/html/*
COPY --from=frontend /peacemomo_frontend/build .
COPY --from=frontend /frontend/frontend.conf /etc/nginx/conf.d/
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]
frontend.conf
upstream server {
server host.docker.internal:5050;
}
server {
listen 80 default_server;
listen [::]:80;
# listen 443 default_server;
# listen [::]:443 default_server;
# actual domain comes here - all set and able to open the static files.
server_name example.com www.example.com;
server_tokens off;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://server;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header Authorization "";
proxy_hide_header Authorization;
}
}
**
3. Backend - simple Dockerfile from node
**
# FROM node:15.4.0
FROM node:16.18.0
WORKDIR /backend
COPY package.json ./
RUN yarn
RUN yarn remove sharp
RUN yarn add sharp
COPY . .
EXPOSE 5050
CMD ["yarn", "run", "start:prod"]
4. docker-compose.yml at the top to create docker containers with a network "nw_test".
docker-compose.yml
version: "3.9"
services:
frontend:
image: frontend
container_name: frontend
build:
context: ./frontend
dockerfile: Dockerfile
extra_hosts:
- "host.docker.internal:host-gateway"
ports:
- 80:80
- 443:443
restart: unless-stopped
env_file:
- ./frontend/.env.production
volumes:
- ./frontend:/frontend
- /frontend/node_modules
depends_on:
- backend
backend:
image: backend
container_name: backend
build:
context: ./backend
dockerfile: Dockerfile
extra_hosts:
- "host.docker.internal:host-gateway"
ports:
- "5050"
restart: unless-stopped
env_file:
- ./backend/config/.env.production
volumes:
- ./backend:/backend
- /backend/node_modules
networks:
default:
name: nw_test
**Result:
After docker compose up, approaching to the domain,
index.html of frontend works.
Fail to connect to backend.
: the client request www.example.com/api/... => it attempts to connect upstream xxx.xxx.xx.x:5050 (it's the container local ip address) but failes with 504
**
[logs in the server]
[error] 6#6: *20 upstream timed out (110: Connection timed out) while connecting to upstream, client: ..., server: example.com, request: "GET /api/users/auth HTTP/1.1", upstream: "http://172.17.0.1:5050/api/users/auth", host: "example.com", referrer: "http://example.com/"
client |
"GET /api/users/auth HTTP/1.1" 504 562 "http://example.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-"