vue代理模式 nginx配置

前言

前端使用vue.js開發,後端使用tornado框架提供restful API, vue.js使用代理;如 當前端js請求http://192.168.9.62:9000/api/orders時候後端經過nginx配置去請求http://192.168.9.62:9000/v1/orders

需求

nginx須要將前端js請求http://192.168.9.62:9000/api/orders 轉發 http://192.168.9.62:9000/v1/orders

nginx配置

upstream svrs {
        # 負載均衡的servers
        server 127.0.0.1:8001;
        server 127.0.0.1:8002;
        server 127.0.0.1:8003;
        server 127.0.0.1:8004;
        server 127.0.0.1:8005;
        server 127.0.0.1:8006;
        server 127.0.0.1:8007;
        server 127.0.0.1:8008;
        server 127.0.0.1:8009;
        server 127.0.0.1:8010;
}

server {
    listen         9000;
    server_name     _;


    location /v1 {
            # 直接訪問 http://192.168.9.62:9000/v1/orders 的配置
            proxy_pass_header Server;
            proxy_redirect off;
            proxy_set_header   Host             $http_host;
            proxy_set_header   x-forwarded-for  $remote_addr;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_read_timeout 120;
            proxy_pass http://svrs;
        }

    location /api {
           # 訪問http://192.168.9.62:9000/api/orders 的配置
           # 重寫 api/ --> v1/ 
           rewrite  ^.+api/?(.*)$ /v1/$1 break;
           # 後端的API服務器
           proxy_pass   http://svrs; 
    }


    location / {
        # 前端打包的靜態文件
        root /home/xx/xx_web;
        index index.html;
    }
}