iview + Nginx 发布部署

iView项目基于Nginx打包发布流程

最新推荐文章于 2021-05-01 18:16:24 发布

原创最新推荐文章于 2021-05-01 18:16:24 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Nginx #iview #webpack #打包发布

iview 同时被 2 个专栏收录

2 篇文章

订阅专栏

Nginx

2 篇文章

订阅专栏

如今项目多为前后端分离，可将静态页面和后端服务一起打包放于Tomcat。推荐使用Nginx提供Web服务，其处理静态文件并发能力强且资源占用低。以iView为例，介绍发布流程，包括修改webpack配置、接口路径，打包后放于Nginx指定目录，配置Nginx并启动。

现在开发的项目大部分都是前后端分离，既然选择了前后端分离，我们就应该抛弃传统，将静态页面和后端服务一起打包，放在Tomcat里面。提供Web服务功能的软件有很多，个人还是比较推荐Nginx，官方 Nginx 处理静态文件并发 5w/s，并且内存和 cpu 占用率低（为 Apache 的 1/5-1/10）。下面我们就以 iview 为案例讲述一下发布流程。

1，在 iview 框架中找到 build 文件夹下面的 webpack.prod.config.js 文件，打开文件找到发布路径 publicPath 改成 ‘../dist/’。

2，如果需要访问后台接口，需要在 src/libs/utils.js 里面将 ajaxUrl 的生产路径改成类似 ‘./Z3_server/’ 这种形式，中间的名称可以替换。

3，通过 npm run build 就可以完成打包，将打包好的 dist 文件夹放在 Nginx 根目录下面的 html 文件夹里面如下图：

4，配置 Nginx ，找到 nginx.conf 文件，修改如下：

#配合webpack打包
	server {
		listen       8090;
		server_name  localhost;
		charset utf-8;
        // 发布包的目录
		root   html/dist;
		index  index.html;
		proxy_set_header	Host			$http_host;
		proxy_set_header	X-Real-IP		$remote_addr;
		proxy_set_header	X-Forwarded-For	$proxy_add_x_forwarded_for;
		location ^~ /Z3_server/ {
				// 请求后端接口地址
				proxy_pass    http://XXX.XX.XX.XXX:8888/Z3/;
		}
		location ^~ / {
                // 防止问题文件/CSS路径跨域
				add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
				add_header 'Access-Control-Allow-Credentials' 'true';
				add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
				add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
				try_files $uri $uri/ @router;
				index index.html;
		}
		
		location @router {
			   rewrite ^.*$ /index.html last;
		}
	}

5，最后启动运行 Nginx 就可以啦。