前言

随着spa架构的普及，在日常开发中无论对于前端还是服务端的开发都带来了很大的便利，前端同学也能接触到更多的知识，其中前端的服务部署也慢慢转移到了前端开发中。而目前最常用的前端服务部署方案便是nginx代理服务器。本节主要是了解下nginx的基本知识（注：高深点的我也不会...）

基础概念

是什么

是一个使用c开发的http服务器
是一个轻量级高并发的服务器
是一个高性能，高可靠开源的服务器
是一个跨平台服务器，可以运行在Linux，Windows等各个操作系统上

能干什么

可以使用nginx快速搭建静态网站服务器
可以作为正向使用：如代理客户端发出请求，常在vpn，本地解决跨域。
可以作为反向代理使用：如实现负载均衡，隐藏服务器的信息
实现服务的热部署。

怎么用

安装：不同的系统安装方式有所差异，目前基本服务器系统是ubuntu和mac，安装命令如下：

//ubuntu
sudo apt-get install nginx
//mac
sudo brew install nginx

启动

//第一种
nginx
//第二种
service start nginx

关闭

//通过nginx命令
service stop nginx/nginx -s stop
//通过进程
kill -TERM 80（nginx进程号可以快速停止）
kill -QUIT 80（nginx进程号从容停止）
pkill -9 nginx（强制停止所有nginx进程）

重启

//nginx命令
nginx -s reload
//进程命令
kill -HUP 80（nignx进程号）

常用配置项

在学习nginx初识我们就应该知道nginx是模块化的结构，不同的模块负责不同的功能，基本上每个不同的模块都会对应一个或者多个不同的配置指令。我们为nginx设置不同的功能其实就是去设置其不同的功能指令。

nginx基本配置概念

上一小节已经介绍了nginx的基础概念，本节主要来了解下nignx中常用的模块以及对应的指令。在学习基础配置之前我们需要了解nginx以下几个概念：

nginx的配置分为模块和指令，指令是分布在每一个块中。
同一个配指令，配在不同的块中时，有不同的作用域。
有些指令可以配置在不同的块中，有些只能在特定的块中。
一个模块正常可以配置多个指令。

基本功能的指令（可以理解这些指令在nginx属于main模块）

//调试常用到的指令,
daemon on/off (default:on)
//nginx可以使用多个worker进程,我们可以设置进程数和进程连接数
worker_processes/worker_connections
//错误日志的保存位置
error_log
//指令实现配置文件的包含，类似于apache中的include///方法，可减少主配置文件d。
include
//进程id存储文件
master_process
//指定Nginx Worker进程运行用户，默认是nobody帐号。
pid
//指定Nginx Worker进程运行用户，默认是nobody帐号。
user
# 错误日志记录
error_log file [level];

其中include和user是nginx默认配置，我们很常见的，这两个指令也是我们必须要掌握的。

常用模块以及模块指令

http核心模块http指令

//http核心模块http指令(提供指定HTTP服务器指令的配置文件上下文。)
http{
    //
    server{
        //端口
        listen 80
        server_name www.example.com
        //指向跟目录
        root /var/html/index.html
        //
        location /{
            root /var/html/index.html
            //这个指令告诉Nginx测试每个文件的存在性，并使用第一个找到的文件作为URI。
            try_files index.html index.htm;
        },
        location /static{
          
        }
    }
}

gzip模块以及相关指令

//基础指令
  gzip on/off（default：off）
//设置用于压缩响应的缓冲区的数目和大小。默认情况下，缓冲区大小等于一个内存页
  gzip_buffers 
//压缩级别可以设置1-9，越大压缩越彻底
  gzip_comp_level
//根据正则相关条件禁用压缩
gzip_disable regex
//设置压缩响应所需的请求的最小HTTP版本。
gzip_http_version
//设置压缩文件最小长度
gzip_min_length
//指定压缩文件的类型
gzip_types (default：text/html;)

http模块以及其相关核心指令是我们在前端日常开发静态网站部署中最为常用的一个模块，gzip模块是目前前端新能优化方面起到了显著的效果，现在主流的浏览器都支持gzip压缩，所以我们不用再考虑兼容性的问题，对于这两个模块和相关指令我觉得掌握他们是很有必要的。

proxy模块及相关指令,nginx官方文档'The ngx_http_proxy_module module allows passing requests to another server.'和明确的说明了proxy是个代理请求模块，这个模块我们在日常前端开发中使用的还是比较频繁的。

//禁用或启用代理服务器的缓冲
proxy_buffering on/off
//默认从代理服务器读取第一部分缓冲区的大小
proxy_buffer_size 4k/12k
//默认从代理服务器读取缓冲区的大小
proxy_buffers 4k/12k
//定义用于缓存的共享内存区域
proxy_cache zone / off
...其他一系列nginx缓存配置请到详细文档查看
//定义用于与代理服务器建立连接的超时。 请注意，此超时通常不能超过75秒。
proxy_connect_timeout time
//设置代理服务器的协议和地址
proxy_pass url;

在日常开发中我们常常会使用proxy_pass来解决前端跨域问题，详细实现见下文，另外附带proxy的详细文档请查看

log 模块及相关指令

# 日志格式
log_format compression name [escape=default|json|none];
# 访问日志记录
access_log path compression;

通过access_log来配置nginx的请求日志，我认为这块在我们部署到线上时候是必须的。

常用内置变量

$content_type: 请求中的content type的body
$host: 请求行的主机名，或主机请求头字段的主机名，或匹配请求的服务器名(是指在Nginx配置文件中，在server块中，用server_name指令设置的值)
$uri:当前请求的URI
$server_port: nginx中配置定义的
$server_name: nginx中配置定义的server_name

实际基本应用

前端web服务器（以Ubuntu为例）

现在我们前端的前后端分离的项目基本都是放在nginx上运行的，所以掌握前端nginx服务器配置已经成了我们前端开发的必备技能之一

服务器配置nginx环境

#安装nginx
apt-get install nginx
#测试安装
nginx -v
#运行 重启等基本命令我们上面已说明
#配置文件，ubuntu一般在/etc/nginx/nginx.conf

编辑配置文件

http{
    server{
        //前端域名
        server_name www.example.com
        location /{
            //前端文件目录
            root /var/html/index.html
            //上文也有说明
            try_files index.html index.htm
        },
    }
}

前端项目复制到对应的目录下，如此一个简单的前端静态服务器就搭建完毕了

nigin实现正向代理

一般大型企业或政府学校等为了安全起见，设置了局域网不能访问互联网。此时客户端通过代理服务器来访问，这便是正向代理

nginx实现反向代理

反向代理给我们的服务带来了很大的安全性，因为当我们使用反向代理时候用户端将无法直接通过请求访问真正的内容服务器。
反向代理负载均衡能极大提升服务器的性能，降低了服务器的压力，
此外nginx的健康检查功能，提升了服务器的稳定性。

//通过反向代理解决跨域问题
location ^~/api/v1 {
        rewrite ^/apis/(.*)$ /$1 break;
        proxy_pass https://www.baidu.com/;
    }

总结

随着前端工程化的发展，前端工程师扮演的角色越来越重要，需要掌握的技能也越来越多，nginx的使用必定会是未来前端工程的所需掌握的必备技能之一。如果你认为前端开发只是纯粹的写页面，那我们的发展局限性非常之大，也许你永远也不会发现编程的艺术之美。所以，放宽我们的视野拥抱不同的技术。