Nginx部署文档：前端单页面应用

Nginx部署文档：前端单页面应用

目前公司前端Vue项目的部署文档

项目映射方式

web服务器上一般都会处理多个前端项目，不同的前端项目需要根据规则来区分映射，主要方式有以下几种：

  1. 根据域名来映射
  2. 根据端口来映射
  3. 根据base路径映射

部署步骤

上传前端静态文件

  1. 前端静态资源文件建议按照项目名，放在服务器上的/srv/www/webapps目录下（如果目录不存在则需先新建），比如abc项目对应的目录完整路径为/srv/www/webapps/abc
  2. 某些场景安装的nginx不是以root角色或者用容器方式运行时，会因无权限读取文件而报404，简单解决方式是执行chmod 777 -R /srv/www/webapps

前端静态资源文件：是前端项目执行打包之后生成的，一般都是生成在前端项目根目录下的dist目录 注意不要将其它前端配置文件/源代码文件上传到nginx/web服务器上

配置nginx

  1. 确保服务器上安装过nginx
  2. 在nginx配置目录/etc/nginx/conf.d下创建.conf后缀的配置文件，比如10-abc.conf（注：具体配置目录视操作系统而定）
  3. 编辑配置文件内容（具体参考下面的配置例子代码）
  4. 执行nginx -t命令测试配置文件确定没有问题
  5. 执行nginx -s reload命令重新加载配置，执行之后配置就已生效；不需要/不建议直接重启nginx

配置文件的命名建议用数字开头，比如10-common.conf, 20-ab.conf, 20-cd.conf；因为配置文件加载顺序是根据文件名排序来的，有时候部分配置的加载顺序需要优先于其它配置，直接用英文项目名命名具有不确定性

实际配置例子参考

1. 域名方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 假设demo-a.zjgeport.org和demo-b.zjgeport.org都已解析到nginx服务器

server {
  listen 80;
  server_name demo-a.zjgeport.org; # 浏览器端用`http://demo-a.zjgeport.org`这样的地址来访问
  access_log off;
  sendfile off;
  expires off;
  charset utf-8;

  root /srv/www/webapps/demo1;
  
  location / {
    try_files $uri /index.html;
  }
  
  location /api/ {
    proxy_pass http://192.168.1.11:8080/; # `/api/**`会代理转发到`http://192.168.1.11:8080/**`；另外需要注意端口号后面的`/`结尾，具体参考下面的指令说明
  }
}

server {
  listen 80;
  server_name demo-b.zjgeport.org; # 浏览器端用`http://demo-a.zjgeport.org`这样的地址来访问
  access_log off;
  sendfile off;
  expires off;
  charset utf-8;

  root /srv/www/webapps/demo2;
  
  location / {
    try_files $uri /index.html;
  }
  
  location /api/ {
    proxy_pass http://192.168.1.1:9090/; # `/api/**`会代理转发到`http://192.168.1.1:9090/**`；另外需要注意`/`结尾，具体参考下面的指令说明
    proxy_set_header Host svc1.zjgeport.com; # 这里假设`:9090`是其它反向代理服务，需指定`Host`请求头来区分不同服务
  }
}

2. 端口方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 假设nginx服务器ip是12.34.56.78

server {
  listen 10081; # 浏览器以`http://12.34.56.78:10081`访问
  access_log off;
  sendfile off;
  expires off;
  charset utf-8;
  root /srv/www/webapps/demo1;
  
  location / {
    try_files $uri /index.html;
  }
  
  location /api/ {
    proxy_pass http://192.168.1.11:8080/; # `/api/**`会代理转发到`http://192.168.1.11:8080/**`
  }
}

server {
  listen 10082; # 浏览器以`http://12.34.56.78:10082`访问
  access_log off;
  sendfile off;
  expires off;
  charset utf-8;

  root /srv/www/webapps/demo2;
  
  location / {
    try_files $uri /index.html;
  }
  
  location /api/ {
    proxy_pass http://192.168.1.1:9090/; # `/api/**`会代理转发到`http://192.168.1.1:9090/**`，注意
    proxy_set_header Host svc1.zjgeport.com; # 这里假设`:9090`是其它反向代理服务，需指定`Host`请求头来区分不同服务
  }
}

3. 路径方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
server {
  listen 80;
  access_log off;
  sendfile off;
  expires off;

  charset utf-8;

  root /srv/www;
  
  location /demo-a/ {
    alias /srv/www/webapps/demo1/;
    try_files $uri /demo-a/index.html;
  }

  location /demo-b/ {
    alias /srv/www/webapps/demo2/;
    try_files $uri /demo-b/index.html;
  }

  location /demo-c/ {
    alias /srv/www/webapps/demo3/;
    try_files $uri /demo-c/index.html;
  }
  
  location /demo-a/api/ {
    proxy_pass http://192.168.1.11:8080/; # 需要注意端口号后面`/`结尾，具体参考下面的指令说明
  }
  
  location /demo-b/api/ {
    proxy_pass http://192.168.1.12:8080/;
  }
  
  location /demo-c/api/ {
    proxy_pass http://192.168.1.13:8080/;
  }
}

关键nginx配置指令说明

  • root 用来指定URL/根路径对应的目录

效果例子

1
2
3
location /demo-a/ {
  root /srv/www/webapps/demo1; # 前端请求`/demo-a/test.js`，nginx尝试读取的文件路径是`/srv/www/webapps/demo1/demo-a/test.js`
}

由效果可以看出，大多数前端应用场景不适合在location {...}代码块中不会去设置；所以root指令一般只用在server {...}块中（用于配置全局的根目录）

  • alias 将URL映射到root目录以外的目录

效果例子

1
2
3
location /demo-a/ {
  alias /srv/www/webapps/demo1; # 前端请求`/demo-a/test.js`，nginx尝试读取的文件路径是`/srv/www/webapps/demo1/test.js`
}
  • try_files 逐个尝试指定的文件内容来响应请求

在单页面应用中所有路由路径都是虚的，前端如果直接刷新浏览器地址，web服务器实际上都需要返回index.html的内容 注意：try_files指令的值实际上配的不是文件路径，而是URI相对路径

  • proxy_pass 配置代理转发地址：主要用来处理转发/api/**接口请求到后端服务

用法是proxy_pass http://10.20.30.40:8080/;注意转发地址是否以/结尾有很大区别，举例来说：

1
2
3
4
5
6
7
location /abc/ {
  proxy_pass http://10.20.30.40:8080/; # 前端`/abc/123`实际请求到后端服务的路径是`/123`，`location /abc`前缀被去掉
}

location /def/ {
  proxy_pass http://10.20.30.40:8080; # 前端`/def/123`实际请求到后端服务的路径还是`/def/123`
}
  • proxy_set_header设置代理转发的HTTP请求头，一般会用来设置Host头

后端的其他负载均衡服务器需要用Host头来区分请求的不同服务；如果后端服务识别的Host值跟前端请求的url的域名不同时就需要手动用proxy_set_header Host abc.internal.com;这样的指令来指定

其他问题

有关端口号的注意项

  • http://协议标准端口号是80，https://的是443;
  • 如果url中不指定端口号，底下连接用的是协议约定的标准端口号，比如：http://abc.com/ 等于 http://abc.com:80
前端
#部署
Nginx部署文档：前端单页面应用
http://blog.jingxiang.ltd/2023/05/30/Nginx部署前端单页面应用/
作者
yemangran
发布于
2023年5月30日
许可协议