nginx 配置反向代理

一、vue项目中，开发阶段可以自己配置代理，将localhost+端口映射成实际的 ip+端口，不过vue在实际打包后这个代理会失效，不会有这种映射关系存在，所以就会出现访问路径是 localhost+端口的情况，此时肯定是访问不了的，需要通过代理将监听localhost+端口 将监听到的转到 实际的 IP+端口。

二、Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。作用很多，今天就先说反向代理配置。

三、下载nginx，下载地址：链接：https://pan.baidu.com/s/1gIN2MblSsNSnqEMXv-BsEg    提取码：fg90    这是我个人的有空搞的一个软件包，里面有很多可以用得到的软件，其中有nginx，可自行选择下载。

四、下载好的包，找个目录解压解压后目录如下：

在该目录下打开cmd,输入命令：start nginx,之后打开浏览器，直接访问localhost，如果是nginx的欢迎界面，证明安装成功，步骤很简单。

4.1  反向代理配置

打开nginx中conf文件夹，之后编辑nginx.conf文件

现假设现在vue写的项目打包，包名为dist,放到：D:/cjdbh_web02/dist;  这个目录，然后要通过 www.cjdbh.com  来访问该项目，（这里要强调一下，如果通过  www.cjdbh.com  这种是狭义上的域名，也就是说只有自己可以用，需要将本地host文件中配置www.cjdbh.com，映射为127.0.0.1，如果不想配置，那就不用这种域名，直接写成localhost即可，我这里就用域名），然后将访问路径通过：http://192.168.102.124:8088/;  这种实际的IP+端口 或者域名来做代理。配置如下：

 server {
        listen       80;#如果这个地方80被占用了，就换任意其他的没被占用的即可
        server_name  www.cjdbh.com; #这个地方用localhost代替也行
		
		root   D:/cjdbh_web02/dist;  #这个地方是vue的包放的位置，注意root是全局的，其他地方不能再有了

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		 location /api/ {
			
			proxy_pass  http://192.168.102.124:8088/; # 这个是反向代理地址
			
				# 以下都是解决跨域需要添加的请求头信息
				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;
				add_header Access-Control-Allow-Origin *;
				add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
				add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";	
        }

4.2  配置好后，通过 nginx -s reload 

4.3，测试，通过访问 www.cjdbh.com  测试是否能够访问到项目，如果访问不到，最大可能是浏览器缓存原因，可以清楚缓存再测试测试，如果任然访问不到，那就关闭nginx，然后在重新启动，在清缓存，在访问，如果任然访问不同，那就是配置有问题，检测一下配置，nginx相关命令如下：

查看Nginx的版本号：nginx -V

启动Nginx：start nginx

快速停止或关闭Nginx：nginx -s stop

正常停止或关闭Nginx：nginx -s quit

配置文件修改重装载命令：nginx -s reload

关闭之后打开window的任务管理器，找到如下显示：

选中，然后停止运行，我这里有几个可能是我重启了几次，具体我也不清楚为何会有多个。