前端部署(静态资源部署)
1.部署环境架构说明
1.1 部署组件说明
前端部署服务器: Nginx
后端部署服务器: Tomcat(内嵌)
1.2 环境说明
由于我们的服务器数量有限,我们以这三台服务器,具体的软件规划如下:
服务器 | 软件 | 名称 |
192.168.200.128 | 主业务工程、Redis(缓存中间件) | 服务器A |
192.168.200.129 | 采集数据工程、Mysql、RabbitMQ | 服务器B |
192.168.200.130 | Nginx、xxl-job-admin | 服务器C |
说明:虚拟机部署过程中受限于个人计算机硬件配置,我们也可将软件部署到单台节点上,模拟分布式部署方式。
2.前端部署
前端部署的核心流程:
- 前端工程打包成静态资源;
- 静态资源部署到nginx下;
- 基于nginx配置反向代理,解决前端跨域问题;
2.1 前端资源打包
在stock_front_admin工程运行打包指令:
npm run build
运行完毕后,在stock_front_admin工程下会产生一个dist目录:
注意事项:
在打包过程中若出现错误:Module build failed (from ./node_modules/image-webpack-loader/index.js)
解决方式:
先卸载
npm uninstall image-webpack-loader
然后使用
cnpm install image-webpack-loader --save-dev
2.2 Nginx部署静态资源
1). 在第二章节已经安装好Nginx容器,接下来将打包好的dist目录上传到Nginx的html目录下即可
nginx下的html目录已挂载到了**/usr/local/nginx/html** 目录下,所以直接将dist目录上传到该目录即可!
2). 修改Nginx/conf下的配置文件nginx.conf
容器中的静态资源的配置可在nginx.conf文件中配置:
配置信息如下:
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /usr/local/nginx/html/dist;
index index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/local/nginx/html;
}
}
2.3 配置反向代理
前端工程部署完成之后,我们可以正常的访问到系统的登录页面,点击登录按钮,可以看到服务端发起的请求,请求信息如下:
当前前端资源存在的问题:
- 通过远程的80端口无法直接获取api开头的接口数据,需要跨域访问8091端口才能获取;
- 基于nginx的反向代理可天然解决跨域问题;
- 后台的接口约定都是以api前缀开头,所以我们在配置反向代理时,可为api开头的路径使用反向代理
最终配置如下:
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /usr/local/nginx/html/dist;
index index.html;
}
location ^~ /api/ {
proxy_pass http://192.168.200.1:8099; # 虚拟机ip/后台端口
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/local/nginx/html;
}
}
说明:配置中 ^~ /api/表示匹配一切以api开头的请求路径
修改配置文件后一定要重启nginx!!!
命令:nginx -s reload
2.4 nginx部署测试
访问:http://192.168.200.128
请求信息如下:
3.常遇bug
问题:前端页面403
解决方案: