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

hsmHoDc · 2025-2-26 22:45:24

“
引言：对于常见的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配置：
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配置如下：

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

apiVersion: networking.k8s.io/v1kind: Ingressmetadata: 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-testspec: 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;

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': ''}

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': '' } } } },