Dockerfile中React应用环境变量配置异常问题求助

在Minikube上部署React前端应用时，遇到Dockerfile中配置的环境变量未按预期生效的问题，部署后请求发送到了错误端口，请求协助排查修复。相关配置如下：

前端Dockerfile #

FROM node:18-alpine as build

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ARG REACT_APP_BACKEND_HOST
ENV REACT_APP_BACKEND_HOST=$REACT_APP_BACKEND_HOST
RUN npm run build

FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

前端Kubernetes部署配置 #

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-frontend
  labels:
    app: client-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: client-frontend
  template:
    metadata:
      labels:
        app: client-frontend
    spec:
      containers:
      - name: client
        image: daniel135dang/client:latest
        ports:
        - containerPort: 3000
        envFrom:
          - configMapRef:
              name: app-config
---
apiVersion: v1
kind: Service
metadata:
  name: client-frontend-service
spec:
  type: LoadBalancer
  selector:
    app: client-frontend
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000

后端Rest服务Kubernetes部署配置 #

apiVersion: apps/v1
kind: Deployment
metadata:
  name: rest-backend
  labels:
    app: rest-backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: rest-backend
  template:
    metadata:
      labels:
        app: rest-backend
    spec:
      containers:
      - name: rest-backend
        image: daniel135dang/rest:latest
        ports:
        - containerPort: 5000
        env:
          - name: PORT
            value: "5000"
            
          - name: APP_NAME
            value: "rest"

          - name: HOST
            value: "rest-service"

          - name: RABBITMQ_HOST
            value: "amqp://rabbitmq:5672"

          - name: RABBITMQ_FILE_LOCATION_EXCHANGE
            value: "uploaded_file_location"

          - name: RABBITMQ_OUTPUT_LOCATION_EXCHANGE
            value: "output_location"

          - name: POSTGRES_HOST
            valueFrom:
              configMapKeyRef:
                name: services-config
                key: POSTGRES_HOST

          - name: POSTGRES_USER
            valueFrom:
              configMapKeyRef:
                name: services-config
                key: POSTGRES_USER

          - name: POSTGRES_PASSWORD
            valueFrom:
              configMapKeyRef:
                name: services-config
                key: POSTGRES_PASSWORD

          - name: POSTGRES_DB
            valueFrom:
              configMapKeyRef:
                name: services-config
                key: POSTGRES_DB
          
          - name: ROOT_DIR
            valueFrom:
              configMapKeyRef:
                name: services-config
                key: ROOT_DIR

          - name: REACT_APP_SERVICE_LIST
            valueFrom:
              configMapKeyRef:
                name: app-config
                key: REACT_APP_SERVICE_LIST

          - name: GUIDELINES_LIST
            value: "chapter_title,format_check,page_count"

          - name: GOOGLE_CLOUD_STORAGE_BUCKET
            valueFrom:
              configMapKeyRef:
                name: services-config
                key: GOOGLE_CLOUD_STORAGE_BUCKET
              
          - name: GOOGLE_APPLICATION_CREDENTIALS
            valueFrom:
              configMapKeyRef:
                name: services-config
                key: GOOGLE_APPLICATION_CREDENTIALS
---
apiVersion: v1
kind: Service
metadata:
  name: rest-service
spec:
  selector:
    app: rest-backend
  ports:
    - protocol: TCP
      port: 5000
      targetPort: 5000

app-config ConfigMap配置 #

apiVersion: v1
kind: ConfigMap
metadata:
  name: app-config
data:
  REACT_APP_SERVICE_LIST: "word_frequency,chapter_title,format_check,chapter_summarization,page_count,table_of_content,citation,table_figure_detection"
  REACT_APP_BACKEND_HOST: "http://rest-service:5000"

问题现象 #

• 请求发送到了错误端口
• 客户端端口信息显示当前使用的端口不符合预期

内容的提问来源于stack exchange，提问作者Nhật Huy