经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 数据库/运维 » Nginx » 查看文章
使用nginx同域名下部署多个vue项目并使用反向代理的方法
来源:jb51  时间:2019/2/28 9:24:53  对本文有异议

效果

目前有 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 更改对应项目名,譬如

  1. // project1
  2. module.exports = {
  3. dev: {},
  4. build: {
  5. assetsPublicPath: '/project1/' // 注意前后的 ‘/'
  6. }
  7. }
  8.  
  9. // project2
  10. module.exports = {
  11. dev: {},
  12. build: {
  13. assetsPublicPath: '/project2/' // 注意前后的 ‘/'
  14. }
  15. }
  16.  

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

  1. // project1
  2. module.exports = {
  3. NODE_ENV: '"production"',
  4. BASE_API: '"/api/pro1"' // 这里待会与 nginx 配置对应
  5. }
  6.  
  7. // project2
  8. module.exports = {
  9. NODE_ENV: '"production"',
  10. BASE_API: '"/api/pro2"' // 这里待会与 nginx 配置对应
  11. }
  12.  

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

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

  1. // 我采用了 history 模式,hash 模式我没有测试,感觉应该是一样的效果
  2. // project1
  3. export default new Router({
  4. base: '/project1/', // 注意更改你子项目名,这个对应你的 build.assetsPublicPath
  5. mode: 'history',
  6. scrollBehavior: () => ({ y: 0 }),
  7. routes: []
  8. })
  9.  
  10. // project2
  11. export default new Router({
  12. base: '/project2/', // 注意更改你子项目名,这个对应你的 build.assetsPublicPath
  13. mode: 'history',
  14. scrollBehavior: () => ({ y: 0 }),
  15. routes: []
  16. })
  17.  

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

  1. # 这个版本就是你的 package.json 中的版本,只不过你需要重新再指定这个版本
  2.  
  3. $ npm i html-webpack-plugin@4.0.0-alpha -D

Nginx 的配置

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

  1. .
  2. ├─conf
  3. ├─... # 其他文件
  4. └─nginx.conf
  5. ├─html # 只看这里,其他暂时我没用到
  6. ├─project1
  7. └─static
  8. ├─css
  9. ├─fonts
  10. └─js
  11. ├─g
  12. └─V
  13. ├─project2
  14. └─static
  15. ├─css
  16. ├─fonts
  17. └─js
  18. ├─g
  19. └─V
  20. ├─index.html
  21. └─50x.html
  22. └─... # 其他文件

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

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

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

  1. # ...
  2. # 反向代理
  3. http {
  4. include mime.types;
  5. default_type application/octet-stream;
  6.  
  7. #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  8. # '$status $body_bytes_sent "$http_referer" '
  9. # '"$http_user_agent" "$http_x_forwarded_for"';
  10.  
  11. sendfile on;
  12. keepalive_timeout 65;
  13.  
  14. client_max_body_size 20M;
  15. client_body_buffer_size 10M;
  16. large_client_header_buffers 4 128k;
  17. # 这里可以做集群
  18. upstream p1_server {
  19. server localhost:8081;
  20. }
  21.  
  22. # 这里可以做集群
  23. upstream p2_server {
  24. server localhost:8082;
  25. }
  26.  
  27. server {
  28. listen 8080;
  29. server_name localhost;
  30. charset utf-8;
  31.  
  32. proxy_connect_timeout 180;
  33. proxy_send_timeout 180;
  34. proxy_read_timeout 180;
  35. proxy_set_header Host $host;
  36. proxy_set_header X-Forwarder-For $remote_addr;
  37.  
  38. root html; # 这里指定刚刚我们的文件夹
  39. # 总的项目路由,我偷懒直接写在了同一个文件
  40. # 如果有很多可以在配置多个 conf 文件,使用 include 关联进来
  41. location / {
  42. try_files $uri $uri/ /index.html; # 这里可以理解指定到 html 文件夹下的 index.html
  43. }
  44. # project1
  45. # 这里就是刚刚我们在 vue 项目中 config/index.js 的配置 build.assetsPublicPath,
  46. # 也是 vue 项目中配置的 router 中的 base
  47. location ^~ /project1 {
  48. try_files $uri $uri/ /project1/index.html; # 这里可以理解指定到 html 文件夹下 project1 文件夹 的 index.html
  49. }
  50. # project2
  51. # 这里是项目二的配置
  52. location ^~ /project2 { #
  53. try_files $uri $uri/ /project2/index.html; # 这里可以理解指定到 html 文件夹下 project2 文件夹 的 index.html
  54. }
  55. # 这里是 project1 配置需要调用的接口
  56. location /api/pro1 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API
  57. proxy_redirect off;
  58. proxy_set_header Host $host;
  59. proxy_set_header X-Real-IP $remote_addr;
  60. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  61. proxy_pass http://p1_server; # 此处的 p1_server 对应的上面的配置 upstream p1_server {},这里可以做集群,我用不到,就简单配置了
  62. }
  63. # 这里是 project1 配置需要调用的接口
  64. location /api/pro2 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API
  65. proxy_redirect off;
  66. proxy_set_header Host $host;
  67. proxy_set_header X-Real-IP $remote_addr;
  68. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  69. proxy_pass http://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {},这里可以做集群,我用不到,就简单配置了
  70. }
  71.  
  72. # ...
  73. }
  74.  
  75. # ...
  76. }
  77.  

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

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

  1. ...
  2. <p><em>Thank you for using nginx.</em></p> <!-- 为了展示位置 -->
  3.  
  4. <!-- start: 追加-->
  5. <hr>
  6. <a href="/project1" rel="external nofollow" >项目一</a> | <a href="/project2" rel="external nofollow" >项目二</a>
  7. <!-- end: 追加-->
  8.  
  9. </body> <!-- 为了展示位置 -->
  10.  

最后的调试

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

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

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

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

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号