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;"]

这是我的docker撰写文件：

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

networks:
   default:
      external:
        name: mynetwork

我试图将我的应用程序导出到80以外的端口，但是我无法（我将其归因于nginx，这是我默认配置为在80端口上使用的端口）。

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

未找到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 router指定的路由。 / p>

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

容器化的ReactJs应用程序（来自nginx图像）并非服务于所有路线

1 个答案: