作为一个前端你需要懂的阿里云下Nginx的基础操作和基础概念-CSDN博客

首先需要准备一台阿里云的服务器,我的版本是CentOS 7.4 64位版本

参考文章 jspang

首先确认如下四项

确认系统网络（ping)---ping baidu.com
确认yum可用 (yum list | grep gcc)
确认关闭iptables (iptables -F)
确认停用selinux

1. 安装一下基础的运用和软件

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

在命令行直接运行即可,看到Complete! 标示着安装成功了

2.Nginx的快速搭建

我们可以先来查看一下yum是否已经存在，命令如下

yum list | grep nginx
复制代码

默认的源中nginx版本是1.12.2

更换一下源,安装更高版本的nginx

vim /etc/yum.repos.d/nginx.repo
复制代码

然后点击i键(vim编辑器的知识),开始在文本中编辑内容,内容如下:

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

然后将bashurl修改为:

baseurl=http://nginx.org/packages/centos/7/$basearch/
复制代码

点击esc, :wq保存并退出,再次执行:yum list | grep nginx

此时版本已经变成1.16.0了

yum install nginx

complete! 表示安装成功

nginx -v 查看nginx的版本--显示版本为: nginx/1.16.0

nginx -V 查看nginx 编译的参数

nginx已经安装成功了,接下来进行相关的配置

3. nginx配置

1.查看Nginx的安装目录

在使用yum安装完Nginx后，需要知道系统中多了那些文件，它们都安装到了那里。可以使用下面的命令进行查看：

rpm -ql nginx
复制代码

rpm 是linux的rpm包管理工具，-q 代表询问模式，-l代表返回列表，这样我们就可以找到nginx的所有安装位置了

2.nginx.conf配置详解

nginx.conf 文件是Nginx总配置文件，在我们搭建服务器时经常调整的文件。接下来我们简单地看一下这个文件的内容

cd /etc/nginx
vim nginx.conf
复制代码

nginx.conf内容如下:

# 运行用户,默认为nginx, 可以不设置(保持默认即可)
user  nginx;
# nginx进程 一般设置为和cpu核数相同
worker_processes  1;

# 错误日志的存放目录
error_log  /var/log/nginx/error.log warn;
# 进程pid的存放位置
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;  # 单个后台进程的最大并发数
}

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; #开启高效传输模式
    #tcp_nopush     on;  #减少网络报文段的数量

    keepalive_timeout  65;  #保持连接的时间，也叫超时时间(s)

    #gzip  on;  #开启gzip压缩

    include /etc/nginx/conf.d/*.conf; #包含的子配置项位置和文件
}
复制代码

/etc/nginx下的目录结构

进入conf.d目录，然后使用vim default.conf进行查看。

2.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;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html; #错误状态码的显示页面，配置后需要重启
    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;
    #}
}
复制代码

明白了这些配置项，我们知道我们的服务目录放在了/usr/share/nginx/html下，可以使用命令进入看一下目录下的文件

cd /usr/share/nginx/html
ls 
复制代码

如果是阿里云的话,需要配置阿里云的安全组(如果不会请自行百度就可以)

学到这里，其实可以预想到，我们的nginx服务器已经可以为html提供服务器了。我们可以打开浏览器，访问ip地址试一试。

4. Nginx服务启动、停止、重启

默认的情况下，Nginx是不会自动启动的，需要我们手动进行启动，当然启动Nginx的方法也不是单一的。

启动

在CentOS7.4版本里（低版本是不行的），是可以直接直接使用nginx启动服务的。

nginx  #如果出现下图表示启动nginx成功
复制代码

还可以使用个Linux的命令进行启动，我一般都是采用这种方法进行使用。因为这种方法无论启动什么服务，都是一样的，只是换一下服务的名字（不用增加额外的记忆点）。

systemctl start nginx.service ---启动nginx 没有任何输出表示成功了

systemctl stop nginx.service ---停止nginx 没有任何输出表示成功了

systemctl restart nginx.service ---重启nginx 没有任何输出表示成功了

输入命令后，没有任何提示，那我们如何知道Nginx服务已经启动了哪？可以使用Linux的组合命令，进行查询服务的运行状况。

ps aux | grep nginx

有这三条记录，说明我们Nginx被正常开启了。

停止nginx

立即停止服务 nginx -s stop 这种方法比较强硬，无论进程是否在工作，都直接停止进程。
从容停止服务 nginx -s quit 这种方法较stop相比就比较温和一些了，需要进程完成当前工作后再停止。
killall nginx killall 方法杀死进程, 这种方法也是比较野蛮的，我们直接杀死进程，但是在上面使用没有效果时，我们用这种方法还是比较好的。
systemctl停止 systemctl stop nginx.service

重启Nginx服务

systemctl restart nginx.service

重新载入配置文件

nginx -s reload 在重新编写或者修改Nginx的配置文件后，都需要作一下重新载入，这时候可以用Nginx给的命令。

查看端口号

在默认情况下，Nginx启动后会监听80端口，从而提供HTTP访问，如果80端口已经被占用则会启动失败。我么可以使用netstat -tlnp命令查看端口号的占用情况。

检查配置文件

nginx -t -c /etc/nginx/nginx.conf

5. 自定义错误页和访问设置

多错误指向一个页面

在/etc/nginx/conf.d/default.conf 是可以看到下面这句话的。

error_page   500 502 503 504  /50x.html;
复制代码

error_page指令用于自定义错误页面，500，502，503，504 这些就是HTTP中最常见的错误代码，/50.html 用于表示当发生上述指定的任意一个错误的时候，都是用网站根目录下的/50.html文件进行处理。

单独为错误置顶处理方式

有些时候是要把这些错误页面单独的表现出来，给用户更好的体验。所以就要为每个错误码设置不同的页面。设置方法如下：

error_page 404 /404.html; 然后在网站目录中建立一个404.html的文件, 并写入信息

<html>
<meta charset="UTF-8">
<body>
<h1>404页面没有找到!</h1>
</body>
</html>
复制代码

然后我们直接用 nginx -s reload 重新载入配置

cd - 可以快速切换这次和上一次访问的路径

把错误码换成一个地址

处理错误的时候，不仅可以只使用本服务器的资源，还可以使用外部的资源。比如我们将配置文件设置成这样

error_page 404 https://www.baidu.com/ 这样当找不到访问时.404时,直接到百度首页

简单实现访问控制

有时候我们的服务器只允许特定主机访问，比如内部OA系统，或者应用的管理后台系统，更或者是某些应用接口，这时候我们就需要控制一些IP访问，我们可以直接在location里进行配置。

location / {
        deny   123.9.51.42;
        allow  45.76.202.231;
}
复制代码

deny all; 禁止所有用户访问

访问效果:

6 Nginx访问权限详讲

指令优先级

location / {
        allow 221.217.175.29;
        allow 219.142.24.222;
        deny all;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
}
复制代码

上面的配置表示只允许221.217.175.29和219.142.24.222进行访问，其他的IP是禁止访问的。但是如果我们把deny all指令，移动到 allow之前，会发生什么那？会发现所有的IP都不允许访问了。这说明了一个问题：就是在同一个块下的两个权限指令，先出现的设置会覆盖后出现的设置（也就是谁先触发，谁起作用）

复杂访问控制权限匹配

在工作中，访问权限的控制需求更加复杂，例如，对于网站下的img（图片目录）是运行所有用户访问，但对于网站下的admin目录则只允许公司内部固定IP访问。这时候仅靠deny和allow这两个指令，是无法实现的。我们需要location块来完成相关的需求匹配。

   location =/img{
        allow all;
   }
   location =/admin{
        deny all;
   }
复制代码

使用正则表达式设置访问权限

只有精确匹配有时是完不成我们的工作任务的，比如现在我们要禁止访问所有php的页面，php的页面大多是后台的管理或者接口代码，所以为了安全我们经常要禁止所有用户访问，而只开放公司内部访问的。代码如下:

location ~\.php$ {
    deny all;
}
复制代码

这样我们再访问的时候就不能访问以php结尾的文件了。是不是让网站变的安全很多了那？

7. Nginx设置虚拟主机

虚拟主机是指在一台物理主机服务器上划分出多个磁盘空间，每个磁盘空间都是一个虚拟主机，每台虚拟主机都可以对外提供Web服务，并且互不干扰。在外界看来，虚拟主机就是一台独立的服务器主机，这意味着用户能够利用虚拟主机把多个不同域名的网站部署在同一台服务器上，而不必再为简历一个网站单独购买一台服务器，既解决了维护服务器技术的难题，同时又极大地节省了服务器硬件成本和相关的维护费用。

配置虚拟主机可以基于端口号、基于IP和基于域名，

基于端口号配置虚拟主机

基于端口号来配置虚拟主机，算是Nginx中最简单的一种方式了。原理就是Nginx监听多个端口，根据不同的端口号，来区分不同的网站。

直接在etc/nginx/conf.d/default.conf复制上面的, 将端口号改为8888 目录指向为: /usr/share/nginx/html5(一定要记得在阿里云添加安全规则)

http://ip:8888/ 直接访问就可以访问到html5文件夹下的index.html页面了

基于IP的虚拟主机

基于IP和基于端口的配置几乎一样，只是把server_name选项，配置成IP就可以了。

server{
        listen 80;
        server_name xxx.xxx.xxx.xxx;
        root /usr/share/nginx/html/html8001;
        index index.html;
}
复制代码

这种演示需要多个IP的支持，由于我自己的阿里ECS只提供了一个IP，所以这里就不给大家演示了，如果工作中用到，只要安装这种方法配置就可以了。

8. Nginx使用域名设置虚拟主机

在真实的上线环境中，一个网站是需要域名和公网IP才可以访问的。(这才是真实的工作中较为常用的场景)

先要对域名进行解析，这样域名才能正确定位到你需要的IP上 nginx.xxxx.com 这个域名映射到默认的Nginx首页位置 apache.xxxx.com 这个域名映射到/usr/share/nginx/html5目录位置上

配置以域名为划分的虚拟主机

我们修改etc/nginx/conf.d目录下的default.conf 文件，把原来的80端口虚拟主机改为以域名划分的虚拟主机。代码如下：

server {
    listen       80;
    server_name  nginx.xxxx.com;
复制代码

然后修改8888.conf文件中的server_name

server{
        listen 80;
        server_name apache.xxxx.com;
        location / {
                root /usr/share/nginx/html5;
                index index.html index.htm;
        }
}
复制代码

其实域名设置虚拟主机也非常简单，主要操作的是配置文件的server_name项，还需要域名解析的配合

记得每次修改配置文件后需要都需要重新启动一下nginx---本人习惯性的用nginx -s reload

9. Nginx反向代理的设置和负载均衡的简单介绍

这里也是看到大佬的文章后,才恍然大悟的,附上原链接作者：ccfe Nginx与前端开发

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

作为前端开发，即使没用过Nginx，但一定听说过上面这句话。这句经典的话，基本构成了所有人对Nginx的第一印象。

在工作上，由于工作平台和语言的原因，对于大部分前端童鞋，更倾向于用Nodejs来搭建服务器，进而实现一些需求，对Nginx有天然的抗拒感。的确，Nginx中的绝大部分功能，如果单纯的使用Node.js也可以满足和实现。但实际上，Nginx和Node.js并不冲突，都有自己擅长的领域：Nginx更擅长于底层服务器端资源的处理（静态资源处理转发、反向代理，负载均衡等），Node.js更擅长于上层具体业务逻辑的处理。两者可以实现完美组合，助力前端开发。

反向代理

什么是反向代理？互联网应用基本都基于CS基本结构，即client端和server端。代理其实就是在client端和真正的server端之前增加一层提供特定服务的服务器，即代理服务器

正向代理

正向代理代理的是客户端

反向代理不好理解，正向代理大家总有用过，翻墙工具其实就是一个正向代理工具。它会把们访问墙外服务器server的网页请求，代理到一个可以访问该网站的代理服务器proxy上，这个代理服务器proxy把墙外服务器server上的网页内容获取到，再转发给客户。具体的流程如下图。

概括说：就是客户端和代理服务器可以直接互相访问，属于一个LAN（局域网）；代理对用户是非透明的，即用户需要自己操作或者感知得到自己的请求被发送到代理服务器；代理服务器通过 代理用户端的请求来向域外服务器请求响应内容

反向代理

反向代理代理的是服务端(正好和正向代理相反)

先看反向代理的流程图

在反向代理中（事实上，这种情况基本发生在所有的大型网站的页面请求中），客户端发送的请求，想要访问server服务器上的内容。但将被发送到一个代理服务器proxy，这个代理服务器将把请求代理到和自己属于同一个LAN下的内部服务器上，而用户真正想获得的内容就储存在这些内部服务器上。看到区别了吗，这里proxy服务器代理的并不是客户，而是服务器，即向外部客户端提供了一个统一的代理入口，客户端的请求，都先经过这个proxy服务器，至于在内网真正访问哪台服务器内容，由这个代理服务器proxy去控制。一般代理是指代理客户端，而这里代理的对象是服务器，这就是“反向”这个词的意思。Nginx就是来充当这个proxy的作用。

概括说：就是代理服务器和真正server服务器可以直接互相访问，属于一个LAN（服务器内网）；代理对用户是透明的，即无感知。不论加不加这个反向代理，用户都是通过相同的请求进行的，且不需要任何额外的操作；代理服务器通过代理内部服务器接受域外客户端的请求，并将请求发送到对应的内部服务器上。

为什么要Nginx反向代理

安全及权限

可以看出，使用反向代理后，用户端将无法直接通过请求访问真正的内容服务器，而必须首先通过Nginx。可以通过在Nginx层上将危险或者没有权限的请求内容过滤掉，从而保证了服务器的安全

负载均衡

例如一个网站的内容被部署在若干台服务器上，可以把这些机子看成一个集群，那么Nginx可以将接收到的客户端请求“均匀地”分配到这个集群中所有的服务器上（内部模块提供了多种负载均衡算法），从而实现服务器压力的负载均衡。此外，nginx还带有健康检查功能（服务器心跳检查），会定期轮询向集群里的所有服务器发送健康检查请求，来检查集群中是否有服务器处于异常状态，一旦发现某台服务器异常，那么在以后代理进来的客户端请求都不会被发送到该服务器上（直到后面的健康检查发现该服务器恢复正常），从而保证客户端访问的稳定性。

前端可以用Nginx做些什么

快速实现简单的访问限制经常会遇到希望网站让某些特定用户的群体（比如只让公司内网）访问，或者控制某个uri不让人访问。Nginx配置如下：

    location / {
        deny  192.168.1.100;
        allow 192.168.1.10/200;
        allow 10.110.50.16;
        deny  all;
    }
复制代码

其实deny和allow是ngx_http_access_module模块（已内置）中的语法。采用的是从上到下匹配方式，匹配到就跳出不再继续匹配。上述配置的意思就是，首先禁止192.168.1.100访问，然后允许192.168.1.10-200 ip段内的访问（排除192.168.1.100），同时允许10.110.50.16这个单独ip的访问，剩下未匹配到的全部禁止访问。实际生产中，经常和ngx_http_geo_module模块（可以更好地管理ip地址表，已内置）配合使用。

解决跨域

在众多的解决跨域方式中，都不可避免的都需要服务端进行支持，使用Nginx可以纯前端解决请求跨域问题。特别是在前后端分离调试时，经常需要在本地起前端工程，接口希望拉取服务端的实际数据而不是本地的mock。而如果本地程序直接访问远程接口，肯定会遇到跨域问题。现在前端成熟的做法，一般是把node proxy server集成进来。事实上，用Nginx同样可以解决问题，甚至可以应用于线上。本地起一个nginx server。server_name是mysite-base.com，比如现在需要请求线上www.kaola.com域下的线上接口 www.kaola.com/getPCBanner… 的数据，当在页面里直接请求，浏览器会报错：

 #请求跨域，这里约定代理请求url path是以/apis/开头
    location ^~/apis/ {
        # 这里重写了请求，将正则匹配中的第一个()中$1的path，拼接到真正的请求后面，并用break停止后续匹配
        rewrite ^/apis/(.*)$ /$1 break;
        proxy_pass https://www.kaola.com/;
    }  
复制代码

在页面代码里，把请求url换成http://mysite-base.com/apis/getPCBannerList.html 。这样就可以正常请求到数据。这样其实是通过nginx，用类似于hack的方式规避掉了浏览器跨域限制，实现了跨域访问。

10 适配PC与移动环境

现在很多网站都存在PC站和H5站两个站点，因此根据用户的浏览环境自动切换站点是很常见的需求。Nginx可以通过内置变量$http_user_agent，获取到请求客户端的userAgent，从而知道用户处于移动端还是PC，进而控制重定向到H5站还是PC站。

操作步骤如下:

在/usr/share/nginx/目录下新建两个文件夹，分别为：pc和mobile目录

cd /usr/share/nginx
mkdir pc
mkdir mobile
复制代码

在pc和miblic目录下，新建两个index.html文件，文件里下面内容

<h1>I am pc!</h1>
复制代码

<h1>I am mobile!</h1>
复制代码

进入etc/nginx/conf.d目录下，修改8888.conf文件，改为下面的形式:

server{
        listen 8888;
        server_name localhost;
        location / {
         root /usr/share/nginx/pc;
         if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            root /usr/share/nginx/mobile;
         }
         index index.html;
        }
}
复制代码

此时你就可以去访问了 ip:8888访问就可以了

11. Nginx的Gzip压缩配置

Gzip是网页的一种网页压缩技术，经过gzip压缩后，页面大小可以变为原来的30%甚至更小。更小的网页会让用户浏览的体验更好，速度更快。gzip网页压缩的实现需要浏览器和服务器的支持。

gzip是需要服务器和浏览器同事支持的。当浏览器支持gzip压缩时，会在请求消息中包含Accept-Encoding:gzip,这样Nginx就会向浏览器发送听过gzip后的内容，同时在相应信息头中加入Content-Encoding:gzip，声明这是gzip后的内容，告知浏览器要先解压后才能解析输出。

gzip的配置项

Nginx提供了专门的gzip模块，并且模块中的指令非常丰富。

gzip : 该指令用于开启或关闭gzip模块。
gzip_buffers : 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。
gzip_comp_level : gzip压缩比，压缩级别是1-9，1的压缩级别最低，9的压缩级别最高。压缩级别越高压缩率越大，压缩时间越长。
gzip_disable : 可以通过该指令对一些特定的User-Agent不使用压缩功能。
gzip_min_length:设置允许压缩的页面最小字节数，页面字节数从相应消息头的Content-length中进行获取。
gzip_http_version：识别HTTP协议版本，其值可以是1.1.或1.0.
gzip_proxied : 用于设置启用或禁用从代理服务器上收到相应内容gzip压缩。
gzip_vary : 用于在响应消息头中添加Vary：Accept-Encoding,使代理服务器根据请求头中的Accept-Encoding识别是否启用gzip压缩

gzip最简单的配置

http {
   .....
    gzip on;
    gzip_types text/plain application/javascript text/css;
   .....
}
复制代码

gzip on是启用gizp模块，下面的一行是用于在客户端访问网页时，对文本、JavaScript 和CSS文件进行压缩输出。

配置好后，我们就可以重启Nginx服务，让我们的gizp生效了。

如果你是windows操作系统，你可以按F12键打开开发者工具，单机当前的请求，在标签中选择Headers，查看HTTP响应头信息。你可以清楚的看见Content-Encoding为gzip类型。

总结

上述只是Nginx的部分较为常用的功能，希望能够引起广大前端童靴对Niginx的兴趣。事实上，Nginx不仅仅局限于这些微小的工作，在实际生产中作用其实更加巨大。对于有志于“大前端”的童靴，了解和熟悉Nginx绝对是必修技能之一。