本地？线上？分布式系统前后端架构、部署、联调指南，突破技术
“引言：对于常见的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: 2managedFields: manager: nginx-ingress-controller operation: Update time: "2024-06-27T07:42:15Z"name: xxx-ingress-httpsnamespace: xxx-testspec:ingressClassName: nginxrules:- host: 访问域名 http: paths: - backend: service: name: xxx-web port: number: 80 path: / 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.logmain; 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/; indexindex.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': '' } } } },
页:
[1]