Home > Software engineering >  Unable to run a react app inside docker container using nginx
Unable to run a react app inside docker container using nginx

Time:07-12

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?

CodePudding user response:

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