资讯专栏INFORMATION COLUMN

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

saucxs / 3900人阅读

摘要:花了天时间,趁着我还没有忘记,先记录下来效果目前有个项目,还有一个自带的,我添加了对应的链接代码稍后粘贴出来,为了统一管理子项目的路由。

花了 3 天时间,趁着我还没有忘记,先记录下来
效果

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

我期望实现下面的效果(假设 ip: localhostport: 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 的代码

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

...

Thank you for using nginx.


项目一 | 项目二
最后的调试

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

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

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

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

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

原文地址

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

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

相关文章

  • 阿里云服务器部署 nodejs + mongodb + nginx 反向代理 + https配置 s

    摘要:感谢老师,老师的慕课网教程购买阿里云服务器及域名终端连接阿里云服务器环境输入密码购买时的密码如果出现这个问题的解决方案解决方法查看硬盘挂在情况如果有数据盘的情况下查看硬盘使用情况通过设置快捷登录权限,可以增加几个拥有权限的用户下查 感谢 Scott 老师,Scott老师的慕课网教程 https://coding.imooc.com/clas... 1. 购买阿里云服务器及域名 2. ...

    张春雷 评论0 收藏0
  • 阿里云服务器部署 nodejs + mongodb + nginx 反向代理 + https配置 s

    摘要:感谢老师,老师的慕课网教程购买阿里云服务器及域名终端连接阿里云服务器环境输入密码购买时的密码如果出现这个问题的解决方案解决方法查看硬盘挂在情况如果有数据盘的情况下查看硬盘使用情况通过设置快捷登录权限,可以增加几个拥有权限的用户下查 感谢 Scott 老师,Scott老师的慕课网教程 https://coding.imooc.com/clas... 1. 购买阿里云服务器及域名 2. ...

    jerryloveemily 评论0 收藏0
  • Angular 容器部署

    摘要:很多人反应很难访问,所以转移到阿里云服务器上,因此做了一次完整的容器部署。在容器化过程中,我们并未配置任何等,只是保留服务所需的配置项而已,而这一部分我们可以放在反向代理层完成。 很多人反应很难访问 Github Page,所以 ng-alain.com 转移到阿里云服务器上,因此做了一次完整的 Angular 容器部署。 以下我会阐述 ng-alain 整个过程,其中包括 Docke...

    tracy 评论0 收藏0
  • Angular 容器部署

    摘要:很多人反应很难访问,所以转移到阿里云服务器上,因此做了一次完整的容器部署。在容器化过程中,我们并未配置任何等,只是保留服务所需的配置项而已,而这一部分我们可以放在反向代理层完成。 很多人反应很难访问 Github Page,所以 ng-alain.com 转移到阿里云服务器上,因此做了一次完整的 Angular 容器部署。 以下我会阐述 ng-alain 整个过程,其中包括 Docke...

    alighters 评论0 收藏0

发表评论

0条评论

saucxs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<