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

 更新时间:2019年02月27日 14:40:47   作者:黑猫  
这篇文章主要介绍了使用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,完全符合我们的期望,那就成功了。

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

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

相关文章

  • Nginx进程杀不完的解决方法

    Nginx进程杀不完的解决方法

    这篇文章主要给大家介绍了Nginx进程杀不完的解决方法,文中通过图文结合的方式给大家介绍的非常详细,对大家的学习或工作有一定的帮助,,需要的朋友可以参考下
    2023-12-12
  • 关于nginx没有跳转到upstream地址的解决

    关于nginx没有跳转到upstream地址的解决

    这篇文章主要介绍了关于nginx没有跳转到upstream地址的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 基于nginx设置浏览器协商缓存过程详解

    基于nginx设置浏览器协商缓存过程详解

    这篇文章主要介绍了基于nginx设置浏览器协商缓存过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 腾讯云CentOS 6.6快速安装 Nginx服务器图文教程

    腾讯云CentOS 6.6快速安装 Nginx服务器图文教程

    本文通过图文并茂的形式给大家介绍了腾讯云CentOS 6.6快速安装 Nginx服务器的方法,介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • nginx配置反向代理时遇到的路径问题

    nginx配置反向代理时遇到的路径问题

    这篇文章主要介绍了nginx配置反向代理时遇到的路径问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 使用nginx解决前端js下载跨域问题

    使用nginx解决前端js下载跨域问题

    订单系统增加附件预览,下载的功能,但是这个附件是客户推单时推送过来的,文件连接是类似oss连接,但是是客户的域名,所以导致跨域问题,本文小编将给大家介绍如何用nginx解决前端js下载跨域问题,需要的朋友可以参考下
    2023-10-10
  • Nginx中反向代理+负载均衡+服务器宕机解决办法详解

    Nginx中反向代理+负载均衡+服务器宕机解决办法详解

    这篇文章主要介绍了Nginx中反向代理+负载均衡+服务器宕机解决办法详解,反向代理保证系统安全,不暴露服务器IP,利用nginx服务器,利用内网ip进行访问,避免出现攻击服务器的情况,需要的朋友可以参考下
    2024-01-01
  • 在Linux中查看Apache或Nginx服务状态的详细步骤

    在Linux中查看Apache或Nginx服务状态的详细步骤

    在Linux中,查看Apache或Nginx服务的状态通常涉及到使用系统管理工具或特定于这些Web服务器的命令,以下是如何查看Apache和Nginx服务状态的详细步骤,需要的朋友可以参考下
    2024-03-03
  • nginx配置报404问题排查解决

    nginx配置报404问题排查解决

    这篇文章主要给大家介绍了关于nginx配置报404问题排查解决的相关资料,当我们在访问网站时常常会遇到一些我们没能想到的问题或者其他错误,此时我们访问的是无法路由的页面,也就是404页面,需要的朋友可以参考下
    2023-08-08
  • nginx多https证书配置实现

    nginx多https证书配置实现

    本文主要介绍了nginx多https证书配置实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-04-04

最新评论