1

::: UPDATE :::

It seems to be a SSL issue. I changed the nginx.conf to port 80 and it works.

I am trying to solve the problem of the 404 errors in React when a user clicks refresh.

The application runs in Docker in Kubernetes on Azure.

I have tried changing the nginx.conf file and pulling it into the container.

Even though the Docker builds, it seems like the container is still running the default nginx.conf.

nginx.conf

server {

  listen 443 ssl;

  location / {
    root   /var/www;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html?$args;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /var/www;
  }

}

Docker file

FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install
RUN npm install react-scripts@3.4.1 -g
COPY . ./
RUN npm run build

# production environment
FROM nginx:alpine
# copy the build folder from react to the root of nginx (www)
COPY --from=build /app/build /var/www
# --------- only for those using react router ----------
# if you are using react router 
# you need to overwrite the default nginx configurations
# remove default nginx configuration file
RUN rm /etc/nginx/conf.d/default.conf
# replace with custom one
COPY /nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 443
CMD ["nginx", "-g", "daemon off;"]

Project Structure

Project Structure

Joel Lawler
  • 859
  • 1
  • 6
  • 7
  • Not really but thanks. I would like to get the nginx.conf working. it will handle this issue if it is configured correctly. – Joel Lawler May 14 '21 at 14:57
  • As explained in the above [answer](https://stackoverflow.com/a/62050700/2873538), I think that redirecting back to index.html on 404 error will fix your issue. See [this answer](https://stackoverflow.com/a/67312778/2873538) for nginx config. – Ajeet Shah May 14 '21 at 14:59
  • 1
    I tried your solution @AjeetShah and it still is getting 404. It seems like the issue is here: # remove default nginx configuration file RUN rm /etc/nginx/conf.d/default.conf # replace with custom one COPY /nginx/nginx.conf /etc/nginx/conf.d/default.conf No matter how I change the nginx,conf file, it has the same behavior. It seems like the container is still using the default nginx.conf file and not the one that I am sending. – Joel Lawler May 14 '21 at 15:18

0 Answers0