一、简介
Nginx 动静分离：简单来说就是把动态跟静态请求分开，不能理解成只是单纯的把动态页面和 静态页面物理分离。严格意义上说应该是动态请求跟静态请求分开，可以理解成使用 Nginx 处理静态页面，Tomcat 处理动态页面。动静分离从目前实现角度来讲大致分为以下两种：
- 一种是纯粹把静态文件独立成单独的域名，放在独立的服务器上，也是目前主流推崇的方案。
- 另外一种方法就是动态跟静态文件混合在一起发布，通过 nginx 来分开。
Nginx动静分离
二、环境准备
1. vue项目准备
- 修改http.js的后端访问域名
//接口域名 export const http_ori = process.env.NODE_ENV === 'production' ? '' : 'http://192.168.43.243:8080'
- 打包（vscode）
cnpm run build
2. Springboot项目准备
- 将项目打包成war包
- 将ROOT.war上传到tomcat容器所对应的容器数据卷中
- 重启tomcat
docker restart tomcat
3. Nginx配置文件配置
- 创建nginx实例
[root@localhost ~]# docker run -d -p 81:80 --name nginx1 -v /opt/infosec/nginx1/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/infosec/nginx1/static:/etc/nginx/static nginx
- 将nginx配置文件上传并覆盖
/opt/infosec/nginx1/conf/nginx.conf - 在
/opt/infosec/nginx1/static创建web文件夹，将vue打包目录dist文件下的所有文件上传到web目录 - 修改nginx.conf配置文件
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"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; # 1. 可以通过配置upstream多个后端服务，实现一个前端对应多个后端服务 upstream javacfox.com {。 server 192.168.43.243:8080; #server 192.168.43.243:8081; } server { # 2. 配置监听端口 listen 80; # 3. 配置域名 server_name 192.168.43.243; # 4. 配置vue项目静态文件访问地址 location / { root /etc/nginx/static/web; # 对应主机容器数据卷web index index.html index.htm; } # 5. 配置后端springboot项目负载均衡和反向代理 location /api { root html; proxy_pass http://javacfox.com; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
- 重启nginx
docker restart nginx
三、测试
1. 访问静态页面
静态页面访问
2. 通过页面访问后端接口
访问后端接口
总结：从测试结果可以看出，该方法已经实现了前后端分离部署，并且可以同时配置多个后端服务器，实现了静态资源和动态资源的分离。
注意：一个server可以对应多个location，location的匹配机制和顺序都是有规则的，/api：我后端所有接口都以/api开头，所以可以用来做区分匹配；/：全匹配，当所有location都匹配不上才会进入/对应的匹配中来。
