containerized ReactJs application (from nginx image )does not serve all routes

Question

I am trying to deploy a ReactJS service on GKE. I used Nginx to build my react images (I used create-react-app, and react router).

This is my dockerfile

FROM node:8.9.3-alpine as build-deps2
RUN mkdir /irooltest WORKDIR /irooltest COPY . /irooltest
RUN npm install RUN npm run build

FROM nginx:1.12-alpine 
COPY --from=build-deps2 /irooltest/build /usr/share/nginx/html
EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

and this my docker compose file:

services:
  irooltest:
     image: chaimaennar/irooltest
     ports:
      - 8080:80
     networks:
            default:

networks:
   default:
      external:
        name: mynetwork

I tried to export my application to ports other than 80, but I was not able to ( I got that this is due to nginx which is my default configured to serve on port 80).

Another issue is when running my application it only shows the root page, any other (route that I defined with react router) shows:

404 Not Found nginx/1.12.2

When I see the source (in the inspection section in the browser) I see this:

-Top
  -localhost:8080
    -static
    -index.css
  -Webpack://

Under the webpack I am able to see all my folders (code).

These are my routes:

  <Route path="/home" render={(props) => <Layout auth={auth} {...props} />} /> 
  <Route path="/" render={(props) => <App auth={auth} {...props} />} /> 
  <Route path="/logo" render={(props) => <Logo />} /> 

  <Route path="/callback" render={(props) => {
    handleAuthentication(props);
    return <Callback {...props} /> }}/>

  <Route path="/profile" render={(props) => (<Profile auth={auth} {...props}/>
    )
} /> 

<Route path="/user" render={(props) => <UserForm auth={auth} {...props} />} />
</div>
</Router>

My question is:

Is that a normal behavior?

Should it be a special configuration for nginx to serve the routes?

François Maturel · Accepted Answer · 2018-07-18 09:40:08Z

5

It turns out that using react-router and nginx needs to have specific configuration because nginx doesn't really recognize the routes that I have specified with react router in the application code.

1. Add those lines to the Dockerfile to tell docker to not use conf.d default nginx configurations.

RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

2. Add a folder conf, conf.d and a file default.conf

 conf
   |
    conf.d
    default.conf

3. Add those lines in the default.conf file

server {
 listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Which they tell nginx to serve the index.html file

edited Jul 18, 2018 at 9:40

François Maturel

6,1806 gold badges47 silver badges51 bronze badges

answered Jul 18, 2018 at 8:07

toto

7092 gold badges9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brandon Loehle Over a year ago

Live saver. I would give you a thousand upvotes if I could

Collectives™ on Stack Overflow

containerized ReactJs application (from nginx image )does not serve all routes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related