项目前端部署(静态资源部署)

前端部署(静态资源部署)

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

解决方案: