在k8s上部署的React应用程序存在问题 [英] Problems with a react application deployed on k8s

问题描述

我对使用npx create-react-app react-app创建的简单React应用程序有疑问.部署到k8s上后，我得到了:

I have a problem with a simple react app that was created using npx create-react-app react-app. Once deployed on k8s, I got this:

Uncaught SyntaxError: Unexpected token '<'

但是，如果我要kubectl port-forward到Pod并在localhost:3000上查看应用程序(容器的Pod为3000，则群集ip服务侦听3000并转发到3000)完全没有问题.

However, if I would to kubectl port-forward to the pod and view the app at localhost:3000 (container's pod is at 3000, cluster ip service listening on 3000 and forwarding to 3000) no problem at all.

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

The ingress routing looks to be fine as I can get to other services to work within the cluster but not to the app. Some help would be greatly appreciated.

部署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:

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

推荐答案

删除nginx.ingress.kubernetes.io/rewrite-target: /$2这一行，它应该可以工作

Remove nginx.ingress.kubernetes.io/rewrite-target: /$2 this line and it should work

这篇关于在k8s上部署的React应用程序存在问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！