反向代理：Nginx&webpack-dev-server

云服务器,nginx代理webpack-dev-server。就是把接收到的请求交给webpack-dev-server去处理。

假如在云服务器上，wbpack-dev-server的端口是8086，nginx的端口是80，云服务器的地址是127.0.0.8。

那么我请求127.0.0.8则是被nginx处理了，因为请求默认是80端口，所以我请求的实际上是127.0.0.8:80。

然后通过nginx重定向到webpack-dev-server上。

nginx.config

server{
	listen 80;
	server_name localhost;
	index index.html;
    
	location / {
		proxy_pass http://localhost:8086;
	}

	location ~ .*\.html$ {
		root /product/web/dist/;
        index index.html;
	}
}

需要注意的是，sever_name后面的字段需要替换成你的域名或者云服务器的ip地址。

这个时候肯定有人问了，为什么还要通过nginx来代理？这不多此一举嘛...

可以 问得好 看下面👇

现在介绍一种方式，直接访问云服务器上的webpack服务。

在webpack.config.js配置中，修改一下啊webpack-dev-server的配置

devServer: {
	host:'0.0.0.0',
	disableHostCheck: true,
}

主要是添加host和disableHostCheck的两个配置。没有的话就添加，devServer跟entey,output平级。

重新启动服务，然后访问云服务器地址+webpack-dev-server端口号就可以访问了。