前言
我们知道通过docker搭建nginx服务,那么如何在一个nginx服务部署多个项目。
本文会从几个方面进行实践说明:
- 基于域名配置
- 基于端口配置
- 基于location配置
- 清楚打包工具publicPath的实际作用
- 前端如何开启oss加速访问
1. 基于域名配置
域名配置是基于DNS解析的一种方式,可以通过不同的域名访问不同的项目。
具体步骤如下:
- 需要购买并配置好域名解析。
- 例如,主域名解析到对应的服务器,可以配置泛解析,这样对应的二级域名都指向服务器。
- 编写nginx.conf配置文件
- 对于每个二级域名,在nginx配置文件中为其指定一个
server
块。在这个块中,设置listen
指令监听80端口(通常是80或443),使用server_name
指令指定域名。之后,通过location
块指定项目的根目录和索引文件。
- 对于每个二级域名,在nginx配置文件中为其指定一个
例如:
server {
listen 80;
server_name h5.snowball.top;
location / {
root /usr/share/nginx/html/h5;
index index.html;
try_files $uri $uri/ /index.html;
}
}
server {
listen 80;
server_name back.snowball.top;
location / {
root /usr/share/nginx/html/back;
index index.html;
try_files $uri $uri/ /index.html;
}
}
这样就可以通过域名进行访问,不需要修改项目任何配置。如果项目过多,配置在同一个配置文件不易管理。
通常nginx配置文件对于每个域名都是通过单独文件控制:
nginx为我们提供了include
,只需要在nginx.conf中添加:
include /etc/nginx/conf.d/*.conf;
表明conf.d下的所有以后缀conf的文件都会引入。那么我们对于每个项目都可以单独配置,方便管理。
/nginx/conf/conf.d:
h5.conf:
server {
listen 80;
server_name h5.snowball.top;
location / {
root /usr/share/nginx/html/h5;
index index.html;
try_files $uri $uri/ /index.html;
}
}
back.conf
server {
server {
listen 80;
server_name back.snowball.top;
location / {
root /usr/share/nginx/html/back;
index index.html;
try_files $uri $uri/ /index.html;
}
}
注意:这里每个location设置为root,后面基于location使用alias
nginx重启完成后:
这种方式的优点是只需开放80或443端口即可。用户可直接通过二级域名访问不同的项目,符合访问习惯,便于记忆和管理。一般企业使用这种方式。
2. 基于端口配置
端口配置是通过监听不同的端口来区分不同的项目。每个项目在一个单独的端口上运行,通过不同的端口号进行访问。
具体步骤如下:
- 编写nginx配置文件
- 在nginx的配置文件中,为每个项目创建不同的
server
块,并为每个块设置不同的listen
端口。每个端口指定的项目配置location
。
- 在nginx的配置文件中,为每个项目创建不同的
例如:
h5.conf:
server {
listen 8888;
server_name localhost;
location / {
root /usr/share/nginx/html/h5;
index index.html;
try_files $uri $uri/ /index.html;
}
}
back.conf
server {
server {
listen 9999;
server_name localhost;
location / {
root /usr/share/nginx/html/back;
index index.html;
try_files $uri $uri/ /index.html;
}
}
重启nginx后:
这种方式需开放多个端口,不建议使用。
3. 基于location配置
实现nginx部署多个项目,如果不想修改配置,直接通过读取服务器的文件。
- 后台项目对应,www.snowball.top/back/xxx
- h5项目对应,www.snowball.top/h5/xxx
nginx默认访问的根目录是html,在html文件下新建back和h5文件夹,直接访问域名/h5|back
不需要通过配置也可以访问到文件。
3.1 了解publicPath的作用
在看实现之前,我们先看这个前置的问题。为什么有时候设置了./
或者/dist
就能访问,而/
不可以。
案例:本地打包后的文件,通过live server启动
- 设置为
/
绝对路径
打包后的引入路径为:
<script type="module" crossorigin src="/static/js/index-CYTZDwzX.js"></script>
<link rel="stylesheet" crossorigin href="/static/css/index-DcyTkVWs.css">
如果直接在项目下的dist启动文件,会出现
这是因为启动的服务器根目录项目的入口,如vite.config.ts这些文件是可以访问到的,dist文件下的文件,并不在根目录下。同理,服务器也是相同,你的资源文件不是根目录下。
- 设置为
./
相对路径
打包后的引入路径为:
<script type="module" crossorigin src="./static/js/index-CYTZDwzX.js"></script>
<link rel="stylesheet" crossorigin href="./static/css/index-DcyTkVWs.css">
此时寻找的路径就是以dist为目录,相对路径可以找到对应的文件
3.2 修改前端项目配置
具体实现步骤:
- 修改项目路由base,需要与服务器进行对应。注意如果是hash模式,nginx配置不需要修改,如果是history模式,需要加上tryfiles
const router = createRouter({
history: createWebHistory('/back/'),
routes
})
- 打包配置文件publicPath需要设置
/back/
或者./
,这里不同打包工具配置自行查找。
设置完成后打包文件输出如下:
注意将打包工具的public设置为'./',因为这里的路径不是根路径。
重启nginx后访问:
这里配置的是history模式,刷新页面
所以需要在配置文件添加try_files $uri $uri/ /index.html;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
}
location /h5/ {
alias /usr/share/nginx/html/h5/;
try_files $uri $uri/ /index.html;
}
location /back/ {
alias /usr/share/nginx/html/back/;
try_files $uri $uri/ /back/index.html;
}
}
3.3 配置错误说明
如果不设置为/h5/index.html
如果alias不添加后缀/
4. 前端如何开启oss加速访问
以基于域名配置为例:
具体步骤:
- 需要一个oss,创建bucket,开启传输加速访问域名,可以设置自己的域名。
- 项目修改publicPath设置为加速域名,进行打包。
- 打包文件
- 此时需要将index.html文件上传到服务器的
/h5
文件夹下,打包后的static
文件上传oss即可。 - 上传oss后,可以通过加速的域名访问
重启nginx后进行访问:
首页通过服务器拉取:
js和css资源通过加速域名加载:
需要将服务器的index.html设置为不走缓存,如果进行缓存,会出现打包上传还是旧的资源情况。
总结
最后总结一下:使用Nginx服务部署多个项目,我们通过三种方法配置:
-
基于域名配置:通过不同的二级域名来访问不同的项目。
-
基于端口配置:通过监听不同的端口来区分项目。
-
基于location配置:通过路径的方式来区分访问不同的项目资源。这种方法可以不修改项目的配置文件,直接通过服务器的文件系统结构来访问不同项目,但需要调整项目构建时的
publicPath
以及Nginx的适当配置。
总的来说,基于域名配置是最简单方便的。
如有错误,请指正O^O!
相关系列文章: