Unable to run a react app inside docker container using nginx - reactjs

Question

I'm trying to run a react app inside a docker container using DOCKER-multistage.
The server is written on deno and I tried to add nginx server to dispatch the requests from the frontend to the server.
Dockerfile:
FROM ubuntu:20.04
# install curl
RUN apt-get update && apt-get install -y curl unzip sudo nginx
# install node.js v16.x
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get install -y nodejs
# install postgresql
ARG DEBIAN_FRONTEND=noninteractive
RUN apt-get update && apt-get install -y \
curl vim wget \
build-essential \
libpq-dev &&\
apt-get update && apt-get install -y tzdata nodejs yarn postgresql postgresql-contrib
# install deno v1.21.3
RUN curl -fsSL https://deno.land/install.sh | sh -s v1.21.3
ENV DENO_INSTALL="/root/.deno"
ENV PATH="${DENO_INSTALL}/bin:${PATH}"
# Install denon
RUN deno install -qAf --unstable https://raw.githubusercontent.com/nnmrts/denon/patch-4/denon.ts
# The working directory of the project
WORKDIR /app
# Copy the app package and package-lock.json file
COPY frontend/build/ /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
# Copy the backend directory
RUN mkdir backend
COPY backend/deps.ts ./backend/deps.ts
RUN cd ./backend && deno cache --unstable deps.ts
ADD backend ./backend
EXPOSE 3000
COPY ./script.sh script.sh
CMD ./script.sh
script.sh:
#!/bin/bash
# create the database in postgres
service postgresql start && su - postgres -c "psql -U postgres -d postgres -c \"alter user postgres with password 'postgres';\"" \
&& su - postgres -c "psql postgres -c \"create database db;\""
# start nginx
sudo service nginx start
# Populate database tables
cd backend && deno run --unstable --allow-env --allow-net database/seeds.ts && denon start &
# Wait for any process to exit
wait -n
# Exit with status of process that exited first
exit $?
nginx.conf:
server {
listen 3000;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html;
proxy_pass http://localhost:5000/;
}
}
I build the image :
docker build . -t server-app
And I create a new container:
docker run -p 3000:3000 server-app
Everything is working and the deno server is listening on the 5000 port but when I run the app on localhost:3000/ I got this error:
The connection was reset
The connection to the server was reset while the page was loading.
The site could be temporarily unavailable or too busy. Try again in a few moments.
If you are unable to load any pages, check your computer’s network connection.
If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.
What's wrong with the config I have done?

Answer 1

I fixed the issue by updating the nginx.conf:
server {
listen 3000;
server_name localhost;
root /usr/share/nginx/html;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api {
rewrite ^/api/?(.*) /$1 break;
proxy_pass http://localhost:5000;
}
}