本地？线上？分布式系统前后端架构、部署、联调指南，突破技术

"

引言：对于常见的BS架构系统，程序员如何进行本地或者线上环

境联调，这有助于提高个人工作效率，站在更高的角度审视系统，

从此以后再无惧Bug，让你早干完活，早摸鱼🐟，早下班。

对于Java初学者，或者是三年工作经验的"新手"

，希望此文对你有所裨益！

-- 诗经有云，有匪君子，如切如磋，如琢如磨。

前端启动之后，访问后端服务，需要通过代理指向目标服务器，本文基于Vue+SpringCloud Gateway+K8s(kubernetes)+Nginx讲解如下三种场景：

本地前端对接本地后端：先启动后端，浏览器访问本地前端环境localhost:port+/api，本地前端再通过配置vue.config.js代理访问本地后端服务并重写/api规则
线上前端对接线上后端：浏览器访问线上k8s域名（ingress）+/api，线上k8s域名（ingress）/api再转发到线上前端服务，线上前端服务内置nginx通过nginx.conf来代理并重写/api规则访问线上后端服务
本地前端对接线上后端：先启动后端，浏览器访问本地前端环境localhost:port，本地前端再通过配置vue.config.js代理访问线上域名+/api

以上如果是分布式场景，则通过vue.config.js代理或者nginx.conf来代理之后，后端统一入口指的是后端网关服务GateWay，请求格式统一是 host[:port]+/api+/service-name

第一层壳/api由vue.config.js代理或者nginx.conf代理去掉
第二层壳由后端网关服务GateWay去掉
最终由后端网关服务GateWay转发到具体的微服务

本地环境对接本地后端vue.config.js

vue.config.js

配置代理目标服务器地址，target: 'http://localhost:8034',
配置/api前缀重写规则，去壳/api，pathRewrite: {'^/api': ''}

vue.config.js全量配置如下，重点是proxy配置：

js 复制代码

    devServer: {
        disableHostCheck: true,
        hot: true,
        port: devPort,
        open: false,
        noInfo: false,
        overlay: {
            warnings: true,
            errors: true
        },
        after: require('./mock/mock-server.js'),
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        proxy: {
            '/api': { 
                target: 'http://localhost:8034',
                // target: 'https://后台域名/api',
                ws: true,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },

线上环境对接线上后端ingress+nginx

k8s的ingress配置如下：

配置代理目标服务器地址，并转发给打包后的前端线上服务

js 复制代码

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    vke.volcengine.com/description: ""
  creationTimestamp: "2024-06-27T07:41:41Z"
  generation: 2
  managedFields:
    manager: nginx-ingress-controller
    operation: Update
    time: "2024-06-27T07:42:15Z"
  name: xxx-ingress-https
  namespace: xxx-test
spec:
  ingressClassName: nginx
  rules:
  - host: 访问域名
    http:
      paths:
      - backend:
          service:
            name: xxx-web
            port:
              number: 80
        path: /
        pathType: Prefix
  tls:
  - secretName: ingress-cert

首先请求通过域名来到ingress，然后通过ingress转发给前端服务xxx-web（k8s服务）

前端服务xxx-web是前端打包之后，以nginx为基础的docker镜像服务，其nginx.conf配置（k8s配置项configmap）,关键信息如下

转发给线上后端的网关gateway服务：proxy_pass http://xxx-gateway:8034;
配置/api前缀重写规则，rewrite ^/api/(.*)$ /$1 break;

js 复制代码

server {
    listen 80;
    server_name  _;
    client_max_body_size 300m;

    #access_log  /var/log/nginx/host.access.log  main;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-prototype-Version,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;
    server_tokens off;
    real_ip_header   X-Forwarded-For;
    real_ip_recursive on;


    location / {
        root   /etc/nginx/html/;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    } 
    location ^~/api/actuator {
    deny all;
    }
    location ^~/api { 
      proxy_set_header Host $host; 
      proxy_set_header X-Real-IP $remote_addr; 
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
      proxy_buffering off; 
      add_header Cache-Control no-store; 
      rewrite ^/api/(.*)$ /$1 break; 
      proxy_pass http://service-gateway:8034; 
      }


  
}

本地环境对接线上后端vue.config.js

这种情况是为了本地前端联调线上的后端测试环境，原理与本地环境对接本地后端，都只是很简单的正向代理vue.config.js

区别是vue.config.js里的target地址要改成线上的域名地址+/api

vue.config.js简化版配置如下

配置代理目标服务器地址，target: 'https://后台域名/api',
配置/api前缀重写规则，去壳/api，pathRewrite: {'^/api': ''}

js 复制代码

    devServer: {
        disableHostCheck: true,
        hot: true,
        port: devPort,
        open: false,
        noInfo: false,
        overlay: {
            warnings: true,
            errors: true
        },
        after: require('./mock/mock-server.js'),
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        proxy: {
            '/api': { 
                //target: 'http://localhost:8034',
                target: 'https://后台域名/api',
                ws: true,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },