vue代理模式 nginx配置

jaysun 发布于2019-07-31 10:09 / 1125人阅读

摘要：前言前端使用开发后端使用框架提供使用代理如当前端请求时候后端通过配置去请求需求需要将前端请求转发配置负载均衡的直接访问的配置访问的配置重写后端的服务器前端打包的静态文件

前言

前端使用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;
    }
}

云服务器 GPU云服务器 nginx代理 nginx反向代理 nginx代理https nginx代理nodejs

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/43348.html

Nginx 反向代理的进本配置以及Vue-router history模式配置

摘要：找到根目录下文件配置代理的服务器地址前面的部分将被替换成的地址模式需要配置否则错误找到根目录下 /etc/nginx/nginx.conf 文件 http { log_format main $remote_addr - $remote_user [$time_local] $request $status $body_by...

hightopo 2019-07-25 14:04 评论0 收藏0
vue代理模式 nginx配置

摘要：前言前端使用开发后端使用框架提供使用代理如当前端请求时候后端通过配置去请求需求需要将前端请求转发配置负载均衡的直接访问的配置访问的配置重写后端的服务器前端打包的静态文件前言前端使用vue.js开发,后端使用tornado框架提供restful API, vue.js使用代理;如当前端js请求http://192.168.9.62:9000/api/orders时候后端通过ngin...

whataa 2019-07-25 14:41 评论0 收藏0
使用 nginx 同域名下部署多个 vue 项目，并使用反向代理

摘要：花了天时间，趁着我还没有忘记，先记录下来效果目前有个项目，还有一个自带的，我添加了对应的链接代码稍后粘贴出来，为了统一管理子项目的路由。花了 3 天时间，趁着我还没有忘记，先记录下来效果目前有 2 个项目（project1, project2），还有一个 nginx 自带的 index.html，我添加了对应的链接代码（稍后粘贴出来），为了统一管理子项目的路由。我期望实现下面的...

saucxs 2019-07-25 14:39 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍 awesome-vue Vue.js 相关很棒的...

Arno 2019-08-26 13:49 评论0 收藏0