nginx配置代理

现在主流前端框架，如vue、react开发完成后需要部署到服务器上供用户访问，然而打包之后生成的是静态页面，需要放到服务器上用nginx配置转发才可以访问，下面将介绍windows上nginx的配置（linux的配置一样，只是安装方式不同）：

1、首先，下载nginx。

2、下载之后进行解压缩，找到nginx/conf/nginx.conf文件 

3、配置nginx.conf如下：

# 假设当前服务器地址为192.10.1.11
# 在浏览器里访问 http://192.10.1.11:9998, 加载的页面是demoWeb里的index.html页面

# 待选服务器列表
upstream myproject{
  server 10.212.1.12:9001;
}
server {
  listen       9998;
  server_name  localhost;
  location / {
    root   html/demoWeb;
    index  index.html index.htm;
  }

  # 访问的http://192.10.1.11:9998/api/** 之后的请求都会被准发到另一个服务器http://10.212.1.12:9001/** 去处理
  location /api/ {
    proxy_pass   http://myproject/;
  }
  
  # 访问的http://192.10.1.11:9998/abc/** 之后的请求都会被准发到另一个服务器http://10.212.1.12:9001/abc/** 去处理
  location ~/abc {
    proxy_pass   http://myproject;
  }

  # 访问的http://192.10.1.11:9998/abc/** 之后的请求都会被准发到另一个服务器http://10.212.1.12:9001/** 去处理
  location ~/abc {
    proxy_pass   http://myproject/;
  }
    #######下方配置省略#######
}

4、启动nginx，双击nginx.exe运行（当看到一个一闪而过的提示框时，即为启动成功）：

5、修改nginx配置文件后，需要重新启动nginx：

      在windows上需要先关掉nginx的进程，再重新启动（可不进行，电脑关机重启自动关闭）：

     同时按住键盘上的windows键+R键，在弹出的框中输入：cmd，并点击确定，如下图：

 

在弹出框中，输入并且回车：

taskkill /fi "imagename eq nginx.exe" /f

如下图即为成功关闭：

 

备注：

1）、listen：9998  ，项目访问的端口号，随意设置，只要不重复

2）、server_name   ，默认localhost

3）、location / root    ，访问的静态页面地址（我的项目放置在demoWeb文件夹下，故是html/demoWeb。如果你是直接放在根目录html文件夹下，则此处应为html）

4）、location / index  ，默认是index.html index.htm

5）、location /api/  ，项目中访问的服务地址，因为访问的服务地址与nginx部署的地址不一样，所以这里需要单独配置。

3、配置好nginx后，需要重启服务，访问http:/ /（nginx部署的ip地址+端口号）