容器化的ReactJs应用程序（来自nginx图像）不能为所有路径提供服务

Question

我正在尝试在GKE上部署ReactJS服务。我使用Nginx来构建我的反应图像（我使用了create-react-app，并对路由器进行了反应）。

这是我的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;"]

这个我的码头组成文件：

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

networks:
   default:
      external:
        name: mynetwork

我试图将我的应用程序导出到80以外的端口，但我无法（我知道这是由于nginx，我的默认配置为在端口80上提供服务）。

另一个问题是，当运行我的应用程序时，它只显示根页面，任何其他（我用react路由器定义的路由）显示：

404未找到nginx / 1.12.2

当我看到源代码（在浏览器的检查部分）时，我看到了这个：

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

在webpack下我能看到我的所有文件夹（代码）。

这些是我的路线：

  <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>

我的问题是：

这是正常的行为吗？

它应该是nginx为路由提供服务的特殊配置吗？

Answer 1

事实证明，使用react-router和nginx需要具有特定的配置，因为nginx并不真正识别我在应用程序代码中使用react路由器指定的路由。

1.将这些行添加到Dockerfile，告诉docker不要使用conf.d默认的nginx配置。

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

2.添加文件夹conf，conf.d和文件default.conf

 conf
   |
    conf.d
    default.conf

3.在default.conf文件中添加这些行

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

他们告诉nginx提供index.html文件