Kubernetes部署React+NodeJS+MySQL应用时Nginx代理配置失效问题

现存配置问题 #

• 反向代理路径传递错误
  location /insert和location /get的proxy_pass没有加结尾斜杠，也没有做路径重写，请求会把/insert、/get前缀直接传递给后端NodeJS服务，如果你后端接口没有对应前缀的路由，就会返回404。比如你请求/insert/user，实际传到后端的路径是/insert/user，而非预期的/user。
• 未实现GET/POST请求拆分需求
  当前配置不管请求方法是什么，只要路径匹配/insert和/get都转发到同一个server-service，没有做请求方法判断，也没有对应两个后端的upstream配置，不符合你要拆分GET、POST请求到不同后端的要求。
• 缺失Nginx Service
  你只部署了Nginx的Deployment，没有创建对应的Service对外暴露访问入口，无法访问到Nginx代理，自然看起来配置不生效。
• 前端请求路径未适配
  删除package.json的代理配置之后，前端的接口请求需要改成对应/get、/insert前缀的路径，否则请求会直接404。
• 小错误：前端Service配置转义异常
  前端Service配置里的protocol: "TCP"是转义错误，直接写protocol: TCP即可，不需要引号。
• upstream命名和K8s Service重名容易引发DNS解析混淆，建议修改为不同名称。

调整方案 #

首先提前部署好两个后端Service：处理GET请求的server-get-service、处理POST请求的server-post-service，如果暂时还没拆分后端，也可以先都指向原来的server-service，后续拆分后再替换即可。

1. 调整Nginx default.conf配置 #

upstream backend_get {
     server server-get-service:3001;
}
upstream backend_post {
     server server-post-service:3001;
}
upstream frontend_react {
  server react-service:3000;
}

server {
    listen       80;
   
    location / {
         proxy_pass http://frontend_react;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
    }

    location /get/ {
        proxy_pass http://backend_get/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    location /insert/ {
        if ($request_method != POST) {
            return 405;
        }
        proxy_pass http://backend_post/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

2. 新增Nginx Service配置 #

创建nginx-service.yaml并部署，可根据需求修改Service类型：

apiVersion: v1
kind: Service
metadata:
  name: nginx-service
spec:
  selector:
    app: nginx
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  # 本地测试可改为NodePort，生产环境可改为LoadBalancer或对接Ingress
  type: ClusterIP

3. 调整前端请求路径 #

所有GET请求前加/get前缀，所有POST请求前加/insert前缀，比如原GET请求/api/user改为/get/api/user，原POST请求/api/user改为/insert/api/user。

4. 重新构建Nginx镜像并更新Deployment #

确认配置无误后重新构建ngapp镜像，滚动更新Nginx Deployment即可。

验证步骤 #

1. 访问Nginx Service地址，可正常打开React前端页面
2. GET请求/get/xxx可正常返回数据
3. POST请求/insert/xxx可正常写入数据
4. 非对应请求方法访问接口返回405，符合预期

内容的提问来源于stack exchange，提问作者Fainol