部署在k8s上的react应用程序的问题

我对使用创建的简单反应应用程序有疑问npx create-react-app react-app。一旦部署在 k8s 上，我得到了这个：

Uncaught SyntaxError: Unexpected token '<'

然而，如果我愿意kubectl port-forward到 pod 并在 localhost:3000 查看应用程序（容器的 pod 位于 3000，集群 ip 服务监听 3000 并转发到 3000），完全没有问题。

入口路由看起来很好，因为我可以访问集群内的其他服务，但不能访问应用程序。一些帮助将不胜感激。

部署yaml：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app-deployment
  # namespace: gitlab-managed-apps
spec:
  replicas: 1
  selector:
    matchLabels:
      component: react-app
  template:
    metadata:
      labels:
        component: react-app
    spec:
      imagePullSecrets:
      - name: simpleweb-token-namespace
      containers:
      - name: react-app
        image: registry.gitlab.com/mttlong/sample/react-app
        env:
        - name: "PORT"
          value: "3000"
        ports:
        - containerPort: 3000

集群ip服务：

apiVersion: v1
kind: Service
metadata:
  name: react-app-cluster-ip-service
spec:
  type: ClusterIP
  selector:
    component: react-app
  ports:
  - port: 3000
    targetPort: 3000

Dockerfile：

FROM node:10.15.3-alpine as builder
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx
EXPOSE 3000
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html

入口服务：

apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
  name: orion-ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$2

spec:
  rules:
    - host: horizon.zeezum.com
      http: 
        paths:
          - path: /
            backend:
              serviceName: react-app-cluster-ip-service
              servicePort: 3000
          - path: /api(/|$)(.*)
            backend:
              serviceName: simple-api-nodeport-service
              servicePort: 3050

我遇到了与您描述的相同的问题。我通过将前端的 Ingress 和 API 分开来解决这个问题。

在你的情况下，这看起来像这样：

前端入口服务（无重写目标）：

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: orion-ingress-frontend-service
  annotations:
    kubernetes.io/ingress.class: nginx
spec:
  rules:
    - host: horizon.zeezum.com
      http:
        paths:
          - path: /
            backend:
              serviceName: react-app-cluster-ip-service
              servicePort: 3000

后端入口服务（带有 /$2 重写目标）：

apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
    name: orion-ingress-backend-service
    annotations:
        kubernetes.io/ingress.class: nginx
        nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
    rules:
        - host: horizon.zeezum.com
            http: 
                paths:
                    - path: /api(/|$)(.*)
                        backend:
                            serviceName: simple-api-nodeport-service
                            servicePort: 3050

其余的配置应该都不错。