【问题标题】:Nginx cannot find static react app files when being exposed on kubernetes ingressNginx 在 Kubernetes 入口上暴露时找不到静态反应应用程序文件
【发布时间】:2021-08-31 09:17:18
【问题描述】:

我正在尝试通过 nginx 服务器提供我的 react 应用程序到 kubernetes 集群。正如您在下面的 Dockerfile 中看到的那样,我正在构建我的应用程序,然后将构建工件复制到我的 nginx 服务器上的 /usr/share/nginx/html/ 路径中。

# Stage 1 - build container
FROM node:12-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY yarn.lock ./
COPY package.json ./
RUN yarn install
COPY . ./
ENV GENERATE_SOURCEMAP=false SASS_PATH=node_modules:src
ARG env
RUN yarn run build:${env}

# Stage 2 - productive environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
RUN apk update  
RUN apk upgrade 
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

我正在使用以下 nginx 配置。据我了解,这应该指示 nginx 服务器使用指定的根路径搜索资源。

server {
  listen 80;
  root   /usr/share/nginx/html;
  error_page   500 502 503 504  /50x.html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

我可以看到这在本地运行 docker 容器时有效(所有反应应用程序资源都被加载),但是当我将它部署到我的 kubernetes 集群并通过入口控制器公开它时,我收到以下构建错误工件:

GET https://*host*/static/css/main.0e41ac5f.chunk.css net::ERR_ABORTED 404

这很有趣,因为当我 ssh 进入容器时,我可以看到所有请求的文件仍然存在于正确的目录 (/usr/share/nginx/html/static/)。

我已经尝试将 package.json 中的 homepage 值设置为 ".",但这并没有改变任何东西。

我的入口配置如下所示:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: search-dev
  annotations:
    kubernetes.io/ingress.class: "public-iks-k8s-nginx"
spec:
  tls:
    hosts:
      - host
    secretName: secret
  rules:
  - host: host
      http:
        paths:
        - path: /
          pathType: Exact
          backend:
            service:
              name: search-frontend-dev
              port:
                number: 80

我也试过设置这个注解:

nginx.ingress.kubernetes.io/rewrite-target: /

但不幸的是,这也不起作用。

不胜感激。

【问题讨论】:

    标签: reactjs nginx kubernetes kubernetes-ingress


    【解决方案1】:

    对于所有遇到类似问题的人,请将 pathType 设置为 Prefix。否则,只有对“/”的请求才会被路由到您的服务。对“/static/...”的请求根本没有路由到服务,因此没有路由到我的 nginx 服务器。

    【讨论】:

    • 您确定所有文件都存在于您的 nginx 服务器上的正确目录中吗?您可以通过 ssh 进入集群上运行的容器来检查这一点。
    猜你喜欢
    • 1970-01-01
    • 2021-08-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-24
    • 1970-01-01
    • 2021-05-11
    • 2018-10-08
    相关资源
    最近更新 更多