Score:0

Nginx in not recognizing nested routes(react-router) after the docker container build

va flag

I would like to deploy my project at this moment but i have gotten one issue after i ran the docker build I used the nginx server with docker build

In locally react-router is working fine and i had not gotten any issue while running in localhost in development and even with the normal build too

when i build the project with docker container with nginx server its working only to normal routes, when i navigate to the nested routes my component is not rendering at all that what component depend on nested matching

i think nginx is not recogizing the nested router in the root index.html in location object in default.conf

here is the default.conf file

server {
  listen 3000;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
  location /{
    try_files $uri $uri/ /index.html;
    expires -1; # Set it to different value depending on your standard requirements
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

here is the Dockerfile file

FROM node:14-alpine as react-build
# => Build container

WORKDIR /home/node/app

ENV NODE_ENV production

#ENV NODE_OPTIONS --openssl-legacy-provider

COPY package.json /home/node/app
RUN npm install

COPY . /home/node/app
RUN npm run build

# => Run container
FROM nginx:1.15.2-alpine
ENV NODE_ENV production
# Nginx config
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

# Static build
COPY --from=react-build /home/node/app/build /usr/share/nginx/html

# Default port exposure
EXPOSE 3000

# Copy .env file and shell script to container
WORKDIR /usr/share/nginx/html
COPY ./env.sh .
COPY .env .
COPY .env.local .

# Add bash
RUN apk add --no-cache bash

# Make our shell script executable
RUN chmod +x env.sh

#Stream Editor CR LF
RUN sed -i -e 's/\r$//' /usr/share/nginx/html/env.sh

# Start Nginx server
CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

i ask the router related question in stackoverflow whether the router implementation is correct or not, they said

"there is no issue in the router implementation seems like problem in server/handling location root index.html"

here is the stackoverflow related question https://stackoverflow.com/questions/74374786/why-nested-routesreact-router-are-not-working-with-nginix-container-docker-bui

please anyone help i have no idea whats happend with the nginx configuration

how can i propely access the nested routes in index.html root

thanks advance!

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.