机缘巧合

接触Nginx是因为一个机缘巧合，在公司做的一个项目的前端部分基于Vue的，后端部分基于Express框架。

因为前端项目是依靠Webpack的热替换，这样可以加快开发的效率。但是在异步请求的时候，出现了跨域请求问题。

比如vue项目的url是localhost:3000，而我的Express服务器是localhost:8080，只有在把vue项目build出最终文件放在Express服务器的静态文件夹里，异步请求的接口才不会报错。

刚开始，代码少接口少的时候，觉得倒没什么。后面扩展代码的时候，发现真的需要一个工具去处理这种跨域导致的问题。

所以，就在这个时候认识了Nginx。它真的是个神器。

反向代理

Nginx可以监听某个端口，并可以把接收到的请求按照匹配规则转发到另一个端口（或者另一个URL）。

可以在nginx.conf里的http下的server添加location规则：

http{
  server{
    listen {port};
    location ~* ^/([/test]|[/foo]|[/bar]){
      proxy_pass {targetURL}
    }
  }
}

其它功能

Nginx的功能不仅如此，跟前端相关的还有如下：

1. 正向代理，反向代理
2. 访问限制
3. 解决跨域
4. 适配PC与移动环境，$http_user_agent
5. 合并请求
6. 图片处理
7. 页面内容修改

参考

Nginx与前端开发