怎么用nginx部署多个前端项目

摘要

如果你有很多个项目需要线上部署，那么如何部署多个前端项目呢？很多人会想到用nginx来部署前端项目。那么实际我们该如何部署？这个文章交你如何部署。

前提环境

nginx(Nginx 是一款高性能的 HTTP 和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 服务器。它由 Igor Sysoev 开发，最初是为俄罗斯的一个大型网站 Rambler.ru 设计的。Nginx 以其稳定性、丰富的功能集、示例配置文件和低系统资源消耗而闻名)

配置文件说明

安装完nginx后，打开nginx所在目录，打开conf文件夹下的nginx.conf。我们能看见以下文件

其中，server里的listen是监听的端口号，location / 代表当用户访问服务器IP+端口号（listen）+/访问的页面，root是访问页面的根目录，index是访问页面的首页。我们安装完nginx后，在浏览器输入localhost:80/可以看见

这个就是nginx默认的访问页。

部署方式

1、根目录部署

这种方式指的是ip+端口号+/就能访问到网页，即只需修改nginx目录中的html里的文件换成你的前端打包的dist文件夹（记得更改名称为html）即可

2、非根目录部署

非根目录部署指的是ip+端口号+/你的项目名称，然后能访问到你的前端项目。
例如local host:80/qq 访问qq项目，localhost:80/vx访问微信项目。下面我们来实际操作一下。
首先，我准备了两个前端vite项目为例。
在项目中，我们都会用到路由，非根目录部署时，我们要改造路由，参考下面的路由创建(主要是添加路由后缀-----/qq/) qq(你的项目名称或简称)

    const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory("/qq/"),
    routes, // `routes: routes` 的缩写
    })

打包路径修改项目打包路径
我这边以vite项目为例（两个前端项目都改）
vite.config.ts文件
export default defineConfig({
plugins: [vue()],
base: “/test1/”
})
vite.config.ts文件
export default defineConfig({
plugins: [vue()],
base: “/test2/”
})

修改完之后，我们会发现我们再次打开项目时，访问地址变为

然后打包项目，也就是build命令。得到dist文件。我们得到两个前端项目的打包文件dist,分别给他们重命名为test1,test2。因为我要部署到云服务器，所以我打成tar包，上传云服务器后解压。
1、我们进入nginx的html目录，将我们的两个前端打包文件放入，并解压

2、修改nginx.conf(添加配置)

        location /test1{
            root html;
            index index.html index.htm;
        }
        location /test2{
            root html;
            index index.html index.htm;
        }

3、重修加载nginx配置

    重新加载配置命令（linux)！！！进入nginx目录执行
     ./sbin/nginx -s reload

4、效果

总结

这就是在nginx部署多个前端项目的流程了，可能讲的不是很具体，不清楚的可以在评论区问我。