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

“
引言：对于常见的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/v1
kind: Ingress
metadata:annotations:vke.volcengine.com/description: ""creationTimestamp: "2024-06-27T07:41:41Z"generation: 2managedFields:manager: nginx-ingress-controlleroperation: Updatetime: "2024-06-27T07:42:15Z"name: xxx-ingress-httpsnamespace: xxx-test
spec:ingressClassName: nginxrules:- host: 访问域名http:paths:- backend:service:name: xxx-webport:number: 80path: /pathType: Prefixtls:- 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': ''}}}},