前端快速入门Nginx配置

Nginx作为当下最火的http服务器之一，相信作为前端开发者的你，尽管没有使用过，但你一定有所耳闻。其特点有支持海量高并发，轻量且配置简单。用官方的话来说就是:

 ”Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。”

好吧我承认我也不是很能理解官方这句话，但这里我们只需记住两个关键词，反向代理和负载均衡，这便是Nginx最大的特点，并且只需要简单的配置便可以完成。对于不是专业运维的我们而言，Nginx的简易是十分友好的，下面我们便来开始学习Nginx的基本配置，让我们快速的上手使用Nginx吧。

一、环境准备

这里我个人推荐大家使用阿里云的ECS云服务器，因为比较方便，随时随地都可以进行操作，就不需要自己去装虚拟机什么的那么麻烦啦。
如果你还在校或者是应届毕业生的话在阿里云上面有学生优惠，认证一下就可以购买了，不到10块钱一个月，可以说是相当划算了。贴上链接：阿里云服务器学生优惠版…
下面是以CentOS7.3 64位操作系统进行配置的，关于Linux命令行这里也只用到一些基础的，遇到不懂的大家可以自行百度，这里就不再赘述啦。

先安装一些必要的依赖,以便于后续的操作

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim

安装Nginx
在命令行终端输入：

vim /etc/yum.repos.d/nginx.repo

然后将官网提供的yum源复制到文件里面去
(按键盘i表示输入状态,输入完成之后按esc然后:wq保存并退出)

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/
gpgcheck=0
enabled=1

复制进去后还需要改一下对应的操作系统和版本号，例如CenteOs7改成如下

baseurl=http://nginx.org/packages/centos/7/$basearch/

开始安装

yum install nginx

安装完成后输入命令nginx -v查看版本号，出现以下提示则安装成功：

阿里云安全组配置：

1. 打开你的阿里云控制台，进入ECS实例;
2. 点击实例后面的更多，移到网络和安全组，点击安全组配置
3. 点击右上角添加安全组配置，添加配置如下:

二、Nginx基本配置文件详解

进入nginx目录下用vim打开nginx.conf配置文件

cd /etc/nginx
vim nginx.conf

以下是每项配置的含义

#定义Nginx运行的用户和用户组
user  nginx;
#nginx进程数，建议设置为等于CPU总核心数
worker_processes  1;   
#错误日志存放目录和类型
error_log  /var/log/nginx/error.log warn;
#进程文件
pid        /var/run/nginx.pid;

events {
    worker_connections  1024; #单个进程最大连接数（最大连接数=连接数*进程数）
}

#设定http服务器
http {
    include       /etc/nginx/mime.types;   #文件扩展名与类型映射表
    default_type  application/octet-stream;  #默认文件类型
    #设置日志的格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;   #nginx访问日志存放位置

    sendfile        on;   #开启高效文件传输模式，sendfile指令指定nginx是否调用sendfile函数来输出文件，对于普通应用设为 on。
                          #如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络I/O处理速度，降低系统的负载。注意：如果图片显示不正常把这个改成off。
    #tcp_nopush on; #防止网络阻塞

    keepalive_timeout  65;  #长连接超时时间，单位是秒

    #gzip on; #开启gzip压缩

    include /etc/nginx/conf.d/*.conf; #包含的子配置项位置和文件，表示conf.d文件夹下.conf后缀的文件都会归入nginx配置中

default.conf配置项详解 进入conf.d，输入vim default.conf查看文件

server {
    listen       80; #配置监听端口
    server_name  localhost; #配置域名

    #charset koi8-r; 
    #access_log /var/log/nginx/host.access.log main;

    location / {
        root   /usr/share/nginx/html; #服务默认启动目录，表示访问根目录重定向到的文件夹
        index  index.html index.htm; #默认访问文件
    }

    #error_page 404 /404.html; # 用于配置404页面

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html; #错误状态码对应的显示页面
    # location后面的内容可以为正则匹配
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    
    #location ~ \.php$ {
    # proxy_pass http://127.0.0.1; # 代理的地址
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    # root html;
    # fastcgi_pass 127.0.0.1:9000;
    # fastcgi_index index.php;
    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
    # include fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    # deny all;
    #}
}

三、Nginx服务启动、关闭和重载

启动

nginx

关闭

nginx -s quit # 进程完成当前工作后才停止
nginx -s stop # 无论进程是否在工作，立即停止
killall nginx # 杀死进程，当以上两种操作无效时可以使用该命令

重新载入配置文件

每次修改了nginx配置项时都要进行重载

nginx -s reload

查看端口号

默认情况下nginx启动后会监听80端口来提供http服务，当出现启动失败的情况时则要查询一下端口是否被占用:

netstat -tlnp

四、错误页面的自定义和访问权限控制

自定义错误页面

当页面访问出现错误时，我们通常需要通过不同的错误类型给用户返回不同的错误页面提示，让用户可以返回其他页面进行操作，达到较好的用户体验，这种提前预知错误并采取相应措施的做法也是我们必须具备的开发思想，Nginx就可以很方便的帮我们做这一点。

打开nginx目录下conf.d文件夹下的default.conf，可以看到有以下两个配置项

error_page   500 502 503 504  /50x.html;    # 表示多个错误类型指向同一页面
error_page   404  /404_error.html;          # 单独为一个错误类型指定返回页面

通过对error_page进行配置错误类型和相应返回的html文件路径，我们就可以友好的给用户返回相应的错误提示界面啦。

访问权限设置

顾名思义，即对用户的访问进行控制，比如我们通常有些页面是不希望用户访问的，尽管用户不知道我们的文件路径，但不能排除一些误操作或者恶意操作等，所以为了提高应用的安全性，我们必须对用户进行一些权限设置。

 location / {
        allow  47.102.143.128; # 设置允许访问的用户Ip
        allow  192.168.1.16;
        deny   all; # 设置拒绝访问的用户, all表示所有
        # 值得注意的是，权限的配置是由上往下进行匹配的，这里先允许了两个Ip，后面未匹配到的则全部禁止访问
        # 但是如果deny all在上面，则下面的规则将不再进行匹配，尽管下面设置了allow也会失效
        # 同理allow all也是如此
 }
 
 # 指定一些文件或者路径的访问权限
 location =/public {    # "="表示精确匹配
        allow all;
 }
 location =/private {
        deny all;
 }
 location ~\.php$ {     # 使用正则表达式进行匹配, 表示禁止访问以php结尾的文件
        deny all;
 }

五、虚拟主机配置

首先我们要了解什么是虚拟主机呢？

 虚拟主机（英语：virtual hosting）或称 共享主机（shared web hosting），又称虚拟服务器，是一种在单一主机或主机群上，实现多网域服务的方法，可以运行多个网站或服务的技术。虚拟主机之间完全独立，并可由用户自行管理，虚拟并非指不存在，而是指空间是由实体的服务器延伸而来，其硬件系统可以是基于服务器群，或者单个服务器。

 我们可以简单把它理解为是从主服务器上面分割出来的子服务器，并且同样具备提供web服务的功能，意味着我们可以只用一台服务器就可以部署多个网站，这样我们就可以把我们平时做的项目阿，demo啊，简历啊什么的只用一台服务器就可以全部部署上线，面试的时候我们就可以尽量多的展示我们的技能啦。

基于端口号配置虚拟主机

根据Nginx监听多个端口号来区分不同的网站。

（这里要注意检查我们的ESC服务器安全组规则中要允许访问你配置的端口号，不然会出现端口无法访问的情况）

我们可以在conf.d文件夹下面新建一个自配置文件，注意要要.conf结尾

server{
        listen 8008;
        server_name localhost;
        root /usr/share/nginx/html/server8008;
        index index.html;
}
server{
        listen 8009;
        server_name localhost;
        root /usr/share/nginx/html/server8009;
        index index.html;
}

接着我们nginx -s reload重载下配置，并在控制输入netstat -tlnp可以看到，8008、8009、80端口都处于运行状态。意味着我们可以在这三个不同端口部署你想要展示的东西啦。

使用域名设置虚拟主机

这里我们首先要注册一个域名，如果你想把你的作品展示给别人，我也强烈建议你去注册一个域名，毕竟没人会去记住一个ip地址的。
接着我们先对域名进行解析（域名的解析要进行一系列认证和备案，不然可能会解析失败，这些到阿里云上面去操作就可以了）

server{
        listen 80;
        server_name xxx.xxx.com; # 这里是你解析出来的域名
        location / {
                root /usr/share/nginx/html/server8008;
                index index.html index.html;
        }
}

server{
        listen 80;
        server_name xxx2.xxx.com; # 这里是你解析出来的另一个域名
        location / {
                root /usr/share/nginx/html/server8009;
                index index.html index.html;
        }
}

修改完成后重载配置，就可以通过你配置的两个域名分别进行访问啦。

六、反向代理与负载均衡

何谓反向代理，先看一张图片:

可以看到当用户访问nginx代理服务器后，nginx将请求转发到其他的服务器上面，而转发到哪一台服务器则完全由我们的nginx来控制

反向代理的好处：

1. 提高安全性: 通过nginx的反向代理，用户并不知道自己访问的真实服务器是哪一台，这样就很好的将我们的服务器保护了起来；
2. 实现负载均衡：通过上图可以看到，反向代理可以将用户请求分发到多台服务器上面，这样我们便可以在多台子服务器上面提供不同的服务，减轻了我们主服务器的压力，从而实现负载均衡的效果。

反向代理的简单实现

server{
        listen 80;
        server_name xxx.xxx.com;
        location / {
               proxy_pass 192.168.1.16 # 代理的ip或域名
        }
}

这样配置之后，当用户访问xxx.xxx.com时，nginx便会帮我们代理到192.168.1.16这台服务器下，这就实现了一个反向代理。

反向代理的其他配置

• proxy_set_header：在将客户端请求发送给后端服务器之前，更改来自客户端的请求头信息。
• proxy_connect_timeout：配置Nginx与后端代理服务器尝试建立连接的超时时间。
• proxy_read_timeout：配置Nginx向后端服务器组发出read请求后，等待相应的超时时间。
• proxy_send_timeout：配置Nginx向后端服务器组发出write请求后，等待相应的超时时间。
• proxy_redirect：用于修改后端服务器返回的响应头中的Location和Refresh。

七、Nginx识别不同设备

我们可以访问一下淘宝或者京东的网站，然后打开通过chrome浏览器的开发者工具，当切换到移动设备刷新后，它便会给我们呈现出移动端的页面，这一操作Nginx同样可以帮我们做到。

通过Nginx内置变量$http_user_agent获取请求客户端的userAgent

server{
        listen 80;
        server_name xxx.xxx.com;
        location / {
         root /usr/share/nginx/pc;  # 正常状态下访问呈现PC端网站
         if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {    # 获取用户设备信息
            root /usr/share/nginx/mobile;   # 当用户为移动设备访问时呈现移动端网站
         }
         index index.html;
        }
}

结尾

以上就为Nginx的入门配置项啦！

这些配置对于部署我们自己的上线项目或者个人博客都完全不在话下，作为前端开发者的你赶紧上手把玩把玩吧。