使用nginx同域名下部署多个vue项目并使用反向代理的方法

效果

目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由。

我期望实现下面的效果(假设 ip: localhost,port: 8080):

http://localhost:8080/ 进入最外层的 index.html
http://localhost:8080/project1 进入项目一
http://localhost:8080/project2 进入项目二

废话不多说,开始配置

Vue 的配置

本人使用的是 vue-cli2 搭建的项目,所以对应的需要修改一些 vue 的配置参数。

config 文件夹下的 index.js,因为是打包,所以我们需要在 build.assetsPublicPath 更改对应项目名,譬如

// project1
module.exports = {
 dev: {},
 build: {
  assetsPublicPath: '/project1/' // 注意前后的 ‘/'
 }
}

// project2
module.exports = {
 dev: {},
 build: {
  assetsPublicPath: '/project2/' // 注意前后的 ‘/'
 }
}

config 文件夹下的 prod.env.js 修改成这样:

// project1
module.exports = {
 NODE_ENV: '"production"',
 BASE_API: '"/api/pro1"' // 这里待会与 nginx 配置对应
}

// project2
module.exports = {
 NODE_ENV: '"production"',
 BASE_API: '"/api/pro2"' // 这里待会与 nginx 配置对应
}

[注意] 因为我在项目中使用到了 BASE_API 作为代理的前缀,如果你的不在这边,你需要找到你自己的代理配置

因为每个人的 vue-router 文件配置不一样,你需要找到你的 router 配置文件,内部修改为:

// 我采用了 history 模式,hash 模式我没有测试,感觉应该是一样的效果
// project1
export default new Router({
 base: '/project1/', // 注意更改你子项目名,这个对应你的 build.assetsPublicPath
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 routes: []
})

// project2
export default new Router({
 base: '/project2/', // 注意更改你子项目名,这个对应你的 build.assetsPublicPath
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 routes: []
})

[注意] 在 npm run build 可能会报错:.tap(*) 之类的,那是因为打包中的 html-webpack-plugin 版本出现了问题,可以执行下面的语句

# 这个版本就是你的 package.json 中的版本,只不过你需要重新再指定这个版本

$ npm i html-webpack-plugin@4.0.0-alpha -D

Nginx 的配置

首先我的目录是这样的,无关文件全部以 ... 展示

.
├─conf
│ ├─... # 其他文件
│ └─nginx.conf
│
├─html # 只看这里,其他暂时我没用到
│ ├─project1
│ │ └─static
│ │   ├─css
│ │   ├─fonts
│ │   └─js
│ │     ├─g
│ │     └─V
│ ├─project2
│ │  └─static
│ │    ├─css
│ │    ├─fonts
│ │    └─js
│ │      ├─g
│ │      └─V
│ ├─index.html
│ └─50x.html
└─... # 其他文件

[解释] 我的 nginx 目录就是原生的,内部包含了一个 html 文件夹,为了省事,我直接使用这个,当然你也可以指定其他的目录,但是目前还请和我一样的配置,后面可以自己定制化。

现在我们开始配置在 conf 文件夹下的 nginx.conf 文件

我是直接在原始文件上修改的,而修改的配置都是在 http 模块中,所以其他的不需要的代码我直接用 ... 代替。

# ...
# 反向代理
http {
  include mime.types;
  default_type application/octet-stream;

  #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  #         '$status $body_bytes_sent "$http_referer" '
  #         '"$http_user_agent" "$http_x_forwarded_for"';

  sendfile    on;
  keepalive_timeout 65;

  client_max_body_size 20M;
  client_body_buffer_size 10M;
  large_client_header_buffers 4 128k;

  # 这里可以做集群
  upstream p1_server {
    server localhost:8081;
  }

  # 这里可以做集群
  upstream p2_server {
    server localhost:8082;
  }

  server {
    listen 8080;
    server_name localhost;
    charset utf-8;

    proxy_connect_timeout 180;
    proxy_send_timeout 180;
    proxy_read_timeout 180;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarder-For $remote_addr;

    root html; # 这里指定刚刚我们的文件夹

    # 总的项目路由,我偷懒直接写在了同一个文件
    # 如果有很多可以在配置多个 conf 文件,使用 include 关联进来
    location / {
      try_files $uri $uri/ /index.html; # 这里可以理解指定到 html 文件夹下的 index.html
    }

    # project1
    # 这里就是刚刚我们在 vue 项目中 config/index.js 的配置 build.assetsPublicPath,
    # 也是 vue 项目中配置的 router 中的 base
    location ^~ /project1 {
      try_files $uri $uri/ /project1/index.html; # 这里可以理解指定到 html 文件夹下 project1 文件夹 的 index.html
    }

    # project2
    # 这里是项目二的配置
    location ^~ /project2 { #
      try_files $uri $uri/ /project2/index.html; # 这里可以理解指定到 html 文件夹下 project2 文件夹 的 index.html
    }

    # 这里是 project1 配置需要调用的接口
    location /api/pro1 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API
      proxy_redirect off;
      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_pass http://p1_server; # 此处的 p1_server 对应的上面的配置 upstream p1_server {},这里可以做集群,我用不到,就简单配置了
    }

     # 这里是 project1 配置需要调用的接口
    location /api/pro2 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API
      proxy_redirect off;
      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_pass http://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {},这里可以做集群,我用不到,就简单配置了
    }

    # ...
  }

  # ...
}

最后贴出我修改的 index.html 的代码

因为我是追加的,所以直接贴出我追加的代码,其他的采用 ...

...
<p><em>Thank you for using nginx.</em></p> <!-- 为了展示位置 -->

<!-- start: 追加-->
<hr>
<a href="/project1" rel="external nofollow" >项目一</a> | <a href="/project2" rel="external nofollow" >项目二</a>
<!-- end: 追加-->

</body> <!-- 为了展示位置 -->

最后的调试

所有的配置完成,我们就可以启动 nginx 了,这个不会的请自行解决了。

启动成功,我们在浏览器输入 http://localhost:8080 我们就可以看到,

点击项目一,我们可以看到链接变为 http://localhost:8080/project1

点击项目二,链接变为 http://localhost:8080/project2,完全符合我们的期望,那就成功了。

[强行解释一下玄学] 那天配置好了,一启动就报错,弄的我最后放弃了。但是第二天,准备在检查下,一启动竟然全好了,我都一脸懵逼啊! 如果你也遇到和我一样的问题,先放放,说不定隔天就好了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • nginx代理多次302的解决方法(nginx Follow 302)

    用proxy_intercept_errors和recursive_error_pages代理多次302 302是HTTP协议中的一个经常被使用状态码,是多种重定向方式的一种,其语义经常被解释为"Moved Temporarily".这里顺带提一下,现实中用到的302多为误用(与303,307混用),在HTTP/1.1中,它的语义为"Found". 302有时候很明显,有时候又比较隐蔽.最简单的情况,是当我们在浏览器中输入一个网址A,然后浏览器地址栏会自动跳到B,进

  • 基于Nginx 反向代理获取真实IP的问题详解

    一.前言 前文Nginx 解决WebApi跨域二次请求以及Vue单页面问题 当中虽然解决了跨域问题带来的二次请求,但也产生了一个新的问题,就是如果需要获取用户IP的时候,获取的IP地址总是本机地址. 二.原因 由于Nginx反向代理后,在应用中取得的IP都是反向代理服务器的IP,取得的域名也是反向代理配置的Url的域名. 三.解决方案 解决该问题,需要在Nginx反向代理配置中添加一些配置信息,目的将客户端的真实IP和域名传递到应用程序中.同时,也要修改获取IP地址的方法. 但是需要注意的是,通

  • nginx反向代理服务因配置文件错误导致访问资源时出现404

    最近测试手上的项目,出现访问服务器的资源出现404的错误,这个是不应该会出现的问题,因为在此之前经过测试是没问题,下面是详细情况: 1)公司的服务器都是做过nginx反向代理 2)访问路径是在tomcat中配置过虚拟路径 3)前几天服务器有做过磁盘恢复 当然如果你也遇到过这关问题,没解决的可以参考一下,如果解决了就看一下我的解决方案是否有问题,本人刚接触Nginx不深: 出现这个问题,我首先考虑应该是路径出现了问题,然后去修改tomcat中的配置文件server.xml中的虚拟路径:然后再测试,

  • nginx经过多层代理后获取真实来源ip过程详解

    问题 nginx取 $remote_addr 当做真实ip,而事实上,$http_X_Forwarded_For 才是用户真实ip,$remote_addr只是代理上一层的地址 解决方案: 在 http 模块 加 set_real_ip_from 172.17.10.125; #上一层代理IP地址 real_ip_header X-Forwarded-For; real_ip_recursive on; 添加之后启动nginx报错: nginx: [emerg] unknown directiv

  • 详解Nginx 虚拟主机配置的三种方式(基于IP)

    Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于端口) https://www.jb51.net/article/14977.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 1.基于IP的虚拟主机配置 如果同一台服务器有多个IP,可以使用基于IP的虚机主机配置,将不同的服务绑定在不同的IP上. 1.1

  • 详解在使用CDN加速时Nginx获取用户IP的配置方法

    关于CDN 内容分发网络(Content delivery network或Content distribution network,缩写:CDN)是指一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的服务器,更快.更可靠地将音乐.图片.视频.应用程序及其他文件发送给用户,来提供高性能.可扩展性及低成本的网络内容传递给用户. 内容分发网络的总承载量可以比单一骨干最大的带宽还要大.这使得内容分发网络可以承载的用户数量比起传统单一服务器多.也就是说,若把有100Gbps处理能力的服务器放在只

  • Python实现获取nginx服务器ip及流量统计信息功能示例

    本文实例讲述了Python实现获取nginx服务器ip及流量统计信息功能.分享给大家供大家参考,具体如下: #!/usr/bin/python #coding=utf8 log_file = "/usr/local/nginx/logs/access.log" with open(log_file) as f: contexts = f.readlines() # define ip dict### ip = {} # key为ip信息,value为ip数量(若重复则只增加数量) fl

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

  • nginx部署多个vue项目的方法示例

    上一篇已经介绍了然后配置web项目:今天由于公司需求,需要在同一域名端口下,部署两个项目:今天花了一上午终于弄好了,选择赶紧做一个笔记. 如何连接阿里云服务器就不在这里说了,请看我以前的文章. 首先需要的效果 http://47.97.244.83/login http://47.97.244.83/student/login 文件目录 两个项目并列在同一文件夹内. 准备好两个vue的项目 http://47.97.244.83/login:这个不用修改配置直接build就可以.关键是二级域名的

  • docker部署springboot和vue项目的实现步骤

    A. docker 部署 springboot项目 一.springboot项目编译打包 二.在项目根目录创建Dockerfile文件 FROM openjdk:8-jdk-alpine VOLUME /tmp ADD ./target/demo-0.0.1-SNAPSHOT.jar demo.jar RUN sh -c 'touch /demo.jar' ENTRYPOINT ["sh", "-c", "java $JAVA_OPTS -Djava.se

  • 在Nginx服务器中配置mod_proxy反向代理的方法

    反向代理做法可以为网站安全做更高一步,像一些银行肯定是使用了反代理就是你进入代理服务器也得不到任何数据,下面我来介绍nginx用mod_proxy实现反向代理配置方法. 由于项目需要实现一个域名代理的功能 比如: 复制代码 代码如下: a.com/a.html=>b.com/b.html 也就是用a.com代理了所用b.com网站的请求,经过朋友介绍用apache的反向代理可以实现其目的,哥们试了一下,果然很爽.配置起来也超级的方便. (注意下面只介绍反向代理,正向代理等我用到了再介绍嘿嘿) 1

  • PHP在同一域名下两个不同的项目做独立登录机制详解

    前言 目前有这样一个需求,在一个域名下 如:http://example.com 下,有两个项目,example.com/a/,example.com/b/,这两个项目是相互独立的程序,有不同的会员登录机制,但是我们知道,在同一个域名下,它的 session 会话是共享的,也就是你在a站登录后,b站也会出现你在a站的session信息,因为默认的 session_id 名字是 PHPSESSID,即当你第一访问a项目时,它会自动生成一个名为 PHPSESSID 的session_id,并在服务器

  • springboot整合Nginx实现负载均衡反向代理的方法详解

    目录 一.百度百科 二.Nginx作为web服务器 三.Nginx处理请求逻辑图 四.Nginx的优点 五.Nginx应用场景 1.反向代理 2.负载均衡 3.动静分离 六.Nginx的常用命令 1.启动 2.从容停止 3.快速停止 4.强制停止 5.重启 6.重启Nginx服务 七.Nginx配置文件 八.Nginx 配置实例-反向代理实例 1.实现效果 2.准备工作 3.访问过程的分析 4.具体配置 5.最终测试 九.Nginx 的原理 1.mater 和 worker 2.worker 如

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • vue项目部署到非根目录下的问题及解决

    目录 问题描述 解决方案 1.Vue配置 2.修改路由 vue项目部署在非根目录下的配置 版本 vue项目配置 nginx配置 问题描述 同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名根目录来访问,而外网却指向了一个子目录. eg. : vue-router: history模式 内网环境:192.168.1.1:8080/index.html 外网环境:domain.com/ttsd/index.html 由于开发出来的项目是要部署在客户方,且客户并不想单独拿一个域名(或子域)

  • 详解ASP.NET Core 反向代理部署知多少

    引言 最近在折腾统一认证中心,看到开源项目IdentityServer4.Admin集成了IdentityServer4和管理面板,就直接拿过来用了.在尝试Nginx部署时遇到了诸如虚拟目录映射,请求头超长.基础路径映射有误等问题,简单记录,以供后人参考. Nginx 配置路由转发 首先来看下IdentityServer4.Admin的项目结构: IdentityServer4.Admin / ├── Id4.Admin.Api # 用于提供访问Id4资源的WebApi项目 ├── Id4.Ad

  • nginx作grpc的反向代理踩坑总结

    背景 众所周知,nginx是一款高性能的web服务器,常用于负载均衡和反向代理.所谓的反向代理是和正向代理相对应,正向代理即我们常规意义上理解的"代理":例如正常情况下在国内是无法访问google的,如果我们需要访问,就需要通过一层代理去转发.这个正向代理代理的是服务端(也就是google),而反向代理则相反,代理的是客户端(也就是用户),用户的请求到达nginx后,nginx会代理用户的请求向实际的后端服务发起请求,并将结果返回给用户. (图片来自维基百科) 正向代理和反向代理实际上

随机推荐