本地？線上？分佈式系統前後端架構、部署、聯調指南，突破技術詳情 - 後端,分佈式系統,nginx,網關,gateway 月半大熊貓博客

“
引言：對於常見的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: 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;

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