nginx是什么

维基百科里的官方解释说：Nginx是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存.

为什么需要nginx

通常情况下，前端服务和后端服务不可能同源，因此就会触发浏览器的同源策略（协议/域名/端口任意不一致就代表不同源，不同源不能进行数据交互）限制。浏览器就会出现如下报错

解决方案有两种：

后端服务器配置允许跨域：设置access-control-allow-origin:http://localhost:8888 a.该方案前端不需要处理，此处不讨论
配置代理服务器，由于服务器之间相互访问是不会有同源策略限制的，只需要在代理服务器上配置对应的反向代理，即可解决跨域问题。

这个代理服务器的配置，就需要用到nginx。
当然不仅仅是nginx，webpack中配置的proxy也是一种代理服务器，nginx只是生产环境中常用的一种代理服务器

补充：什么是代理服务器

代理（英语：Proxy）也称网络代理，是一种特殊的网络服务，允许一个终端（一般为客户端）通过这个服务与另一个终端（一般为服务器）进行非直接的连接。

正向代理

我们常见的就是vpn，代理客户端的请求，隐藏真实的客户端，比如访问公司内网和访问google，需要的vpn都是正向代理，目标服务器端感受到的请求都来自于代理服务器，并不知道真正的客户端是哪台。

反向代理

常见的webpack的proxy和nginx都属于反向代理，代理的是服务端的响应，隐藏真实的服务端。客户端感受到的请求都来自于代理服务器，并不知道真正的服务器是哪台。代理服务器与客户端同源。

常用配置

上文已经解释了为什么要配置代理服务器，下面就来介绍如何配置nginx代理。

安装

window：到网站下载，直接可视化安装即可
linux：www.cnblogs.com/excellence/…

配置

80端口配置对应的项目文件
开启gzip（开启后静态文件大小会被gzip压缩，获取文件就更快）
解决history路由模式下刷新页面变空白的问题
配置/test的反向代理
配置每60s刷新一次配置（nginx配置后不刷新配置会被缓存，不会重新去获取服务器路径，对于有些ip会变的域名可能会有问题）可参见github.com/DmitryFillo…

server {
    listen       80;
    server_name  abc.com;
    resolver 8.8.8.8 valid=60s;
    location / {
       gzip on; // 开启gzip
       gzip_types application/javascript text/plain application/x-javascript text/css application/xml;
       root   /data/dist; // 这里配置项目文件路径
       index  index.html index.htm; // 默认读取的文件
       try_files $uri $uri/ /index.html; // 配置解决history路由模式的刷新空白问题
    }
    location /test {
       proxy_pass https://cc.com;
       client_max_body_size 1024m; // 将nginx代理的所有请求实体的大小限制为1024m
    }
    location /test1/ {
       set $api_domain "dd.com"; // nginx 将根据特定请求每 60 秒查询一次 dd.com
       rewrite ^/test1/(.*)$ /$1 break;
       proxy_pass http://$api_domain;  
   }
}

对于上述配置中的反向代理细节请参见：juejin.cn/post/713279…

扩展内容：服务器上安装nginx需要用到的基础linux操作

获取到超级管理员权限：sudo su root
连接远程主机：ssh ip地址
nginx装在了哪个目录：which nginx
找到对应的nginx.conf文件，修改文件中的配置
- 只读展示文件：cat nginx.conf
- 修改文件：vi/vim nginx.conf（vim打开修改会有颜色标识）
打开文件后，英文指令i进入insert修改模式
修改完成后esc退出insert模式
最后:wq保存并退出文件
然后到nginx的安装目录sbin下重启nginx./nginx -s reload,配置生效
关闭nginx./nginx -s stop，开启nginx./nginx

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

前端相关的nginx知识和常用配置