Nginx环境准备:

想要搭建Nginx有三种方法:

  • 电脑搭建:有群辉或多了台电脑
  • 购买ECS:亚马逊云,谷歌云等
  • 使用虚拟软件:VM

本人是在自己电脑VM上的Centos7.8搭建的,至于要想学会Nginx,建议有Linux基础,预先创建好自己的实验工作环境,不然学的头大

我在root下创建了Nginx文件夹:

  • app:存放APP文件的
  • backup:备份文件
  • download:下载文件
  • logs:日志文件
  • work:工作文件

Nginx安装和版本介绍

Nginx官网下载以及介绍:https://nginx.org/

  • Mainline version :开发版,主要是给广大Nginx爱好者,测试、研究和学习的,但是不建议使用于生产环境。
  • Stable version : 稳定版,也就是我们说的长期更新版本。这种版本一般比较成熟,经过长时间的更新测试,所以这种版本也是主流版本。
  • legacy version : 历史版本,如果你需要以前的版本,Nginx也是有提供的。

我是使用Nginx 1:1.16的版本,如果需要下载新的版本,则更改yum源即可:

想查看yum是否有nginx,执行命令:

yum list | grep nginx

更改yum源:

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

写入文件,OSRELEASE写入你的Centos版本号:

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

再执行:

yum list | grep nginx

就发现有最新的Nginx

yum install nginx

这时候再输入nginx -v,如果出现你下载的版本号,则已经下载安装成功了:

[root@master Nginx]# nginx -v
nginx version: nginx/1.18.0

Nginx主要的配置文件

当你装了Nginx,你执行这个命令就知道装了哪些文件:

rpm -ql nginx

总配置文件nginx.conf:

nginx.conf 文件是Nginx总配置文件,在我们搭建服务器时经常调整的文件

cd /etc/nginx
vim 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;  #保持连接的时间,也叫超时时间

    #gzip  on;  #开启gzip压缩

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

子文件default.conf:

先打开conf.d目录,再打开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 = /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到其下面看看:

[root@master ~]# cd /usr/share/nginx/html
[root@master html]# ls
50x.html  index.html

因为我是虚拟机做的nginx,所以我直接在我的谷歌输入我的Centos的IP地址就行了

nginx.png

Nginx启动、停止和重启

Nginx启动

Centos7.4版本后想直接启动Nginx可以直接输入命名进行启动:

nginx

也可以使用这个命令:

systemctl start nginx.service

想查看Nginx是否启动成功,则可以使用ps查看:

[root@master ~]# ps -aux | grep nginx
root       1561  0.0  0.0  46464   976 ?        Ss   08:32   0:00 nginx: master process nginx
nginx      1562  0.0  0.0  46860  1608 ?        S    08:32   0:00 nginx: worker process
root       1564  0.0  0.0 112812   968 pts/0    S+   08:32   0:00 grep --color=auto nginx

Nginx关闭

如果想停止Nginx,有四种方法:

  • 正常关闭
nginx -s quit
[root@master ~]# ps -aux | grep nginx
root       1587  0.0  0.0 112812   972 pts/0    S+   08:35   0:00 grep --color=auto nginx
  • 立即关闭
nginx -s stop
[root@master ~]# ps -aux | grep nginx
root       1587  0.0  0.0 112812   972 pts/0    S+   08:35   0:00 grep --color=auto nginx
  • 杀死Nginx进程方法
killall nginx
  • systemctl停止
systemctl stop nginx.service

Nginx重启

使用systemctl重启

systemctl restart nginx.service

Nginx重载配置文件

如果我们修改了Nginx的配置文件,我们需要重载一下配置文件才能正常使用:

nginx -s reload

查看哪些端口是开启的

netstat -tlnp
[root@master ~]# netstat -tlnp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN    

错误页面设置和简介访问权限

我们先查看一下Nginx的总配置文件:

cd /etc/nginx/conf.d/
[root@master conf.d]# ls
default.conf
[root@master conf.d]# vim default.conf

可以在第17行看到:

error_page   500 502 503 504  /50x.html;

说明遇到500 502 503 504错误都是指向Nginx一个名叫50x.html的文件的,我们找一下这个文件:

cd /usr/share/nginx/
[root@master nginx]# ls
html  modules

如果我们想给最常见的错误404也单独设置一个htmld的,我们可以更改总配置文件:

vim default.conf

找到error_page那一行,在50x下面增加一行:

error_page   500 502 503 504  /50x.html;
error_page   404              /404x.html;

然后保存退出,并且回到根页面,再次cdhtml文档那

cd /usr/share/nginx/html/

然后vim编辑一个404x.html文件,注意这时候的文件名一定要与总配置文件里面你修改的文件名一模一样

<html>
<meta charset="UTF-8">
<body>
    <h1>404页面,没有找到你想要的的页面!!!</h1>
</body>
</html>

保存退出后重载下Nginx

这时候我们再在浏览器中输入我们的服务器IP后面加一些不存在的路径看看:

nginx404.png

我们也可以将404页面设置为跳转到外部的http网址,例子:

再次编进总配置文件

cd /etc/nginx/conf.d/
vim default.conf

也是修改404那一行

error_page   500 502 503 504  /50x.html;
error_page   404              http://iamyqhp.com/;

保存退出,重载Nginx,再查看下服务器404路径

404跳转页面.png

就直接跳转我的博客了

我们也可以设置IP访问权限

还是编辑总配置文件,找到这个

location / {
              root   /usr/share/nginx/html;
              index  index.html index.htm;
             
      }

在下面加上本机的IP,注:因为我是虚拟机,我就加的主机IP

location / {
              root   /usr/share/nginx/html;
             index  index.html index.htm;
             deny 192.168.153.100;
      }

保存退出重载

再刷新下Nginx网页,就发现出现403错误了,意思是服务器禁止你访问

deny是禁止,allow是允许

如果我输入allow 192.168.153.100;,意思就是只允许我这个主机IP进行访问

Nginx访问权限控制详解

先前讲解了可以修改location来对用户进行访问控制,这时我们做下修改:

location / {
              root   /usr/share/nginx/html;
             index  index.html index.htm;
             deny all;
             allow 192.168.153.100;
      }

重载配置后,我们发下虽然里面写了allow 192.168.153.100;,但我主机还是无法访问,这是因为location选项是从上到下一次读取下来的,只要上面读取到了,就自动忽略下面的有关此条的内容了

我们在实际服务器操作过程中,我们经常需要遇到这种情况,就是网站的image(图片目录)页面可以被所有人访问,但如果你的admin页面也是对所有人开放,就极其容易受到攻击,所以我们可以这样修改location从而达到保护网站admin的目的

例:

增加location选项

location =/img{
    allow all;
}
location =/admin{
    deny all;
}

注:=号代表精确匹配,使用了=后是根据其后的模式进行精确匹配

重载后先查看http://192.168.153.50/images,发现能正常访问

能正常访问.png

再访问http://192.168.153.50/admin,发现被403禁止访问

禁止访问.png

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

只单单禁止admin是完全不能满足我们的需求的,比如现在我要禁止访问所有php的页面,php的页面大多是后台的管理或者接口代码,所以为了安全我们经常要禁止所有的外面用户访问,而只开放公司内部访问权限

例:所有的以.php结尾的网页都无法访问

location ~\.php$ {
    deny all;
}

Nginx设置虚拟主机

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

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

基于端口号配置虚拟主机

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

我们可以直接配置在主文件etc/nginx/nginx.conf文件里,也可以配置在子配置文件etc/nginx/conf.d/default.conf

例:我们创建一个以8080端口的虚拟主机

vim 8080.conf
server{
    listen 8080;
    server_name 8080host;
    root /usr/share/nginx/html/html8080;
    index index.html;
}
[root@master conf.d]# ls
8080.conf  default.conf

有了这个文件,我还需要这个新网站的根目录,例:

cd /usr/share/nginx/html
mkdir html8080
vim index.html

index.html中写些html内容:

<!--
 * @Author: YQHP-YuKi
 * @Date: 2020-09-02 22:12:58
 * @LastEditTime: 2020-12-08 11:01:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \undefinede:\三剑客\test.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YQHP's HTML</title>
</head>
<body>
    <p>这是个Nginxの8080端口网站</p>
</body>
</html>

然后重载Nginx,浏览器访问192.168.153.50:8080/,就出现了8080端口搭建的网站了

nginx8080.png

基于IP的虚拟主机

基于IP和基于端口的配置几乎一样,因为我是本地内网的虚拟主机,所以没办法搞到多的IP,基于IP就是修改server_name选项,修改成IP例如

server{
        listen 80;
        server_name 192.168.153.51;
        root /usr/share/nginx/html/html8001;
        index index.html;
}

重载Nginx

Nginx使用域名设置虚拟主机

在真实的上线环境中,一个网站是需要域名和公网IP才可以访问的,在实际工作中配置最多的就是设置这种虚拟主机

  • 第一步,对域名进行解析,这样域名才能正确的定位到你需要的IP上
  • 第二部,在Nginx主配置文件中修改 server_name

例:我已经将我的域名iamyqhp.com解析到了我博客的IP,现在就是修改主配置文件

server{
        listen 80;
        server_name iamyqhp.com;
        location / {
                root /usr/share/nginx/html/html8001;
                index index.html index.htm;
        }
}

重载Nginx

Nginx反向代理的设置

作为一个前端必须会的一个技能是反向代理,我们现在的web模式基本的都是CS架构,即Client端到Server端,那代理就是在Client端和Server端,那代理就是在Client端和Server端之间增加一个提供特定功能的服务器,这个服务器就是我们说的代理服务器

正向代理

我们所使用的酸酸乳搬瓦工这些东西就是典型的正向代理工具,它会把我们不让访问的服务器的网页请求,代理到一个可以访问该网站的代理服务器上来,一般叫做proxy服务器,再转发给客服

正向代理.png

简单来说就是你想访问目标服务器的权限,但没有这个权限,这时候代理服务器有权限访问服务器,并且你有权限访问代理服务器,这样你就可以通过访问代理服务器,代理服务器访问真实服务器,把内容给你呈现出来

反向代理

反向代理跟正向代理正好相反(需要说明的是,现在基本所有的大型网站的页面都是用了反向代理),客户端发送的请求,想要访问Server服务器上的内容,发送的内容被发送到代理服务器上,这个代理服务器再把请求发送到自己设置好的内部服务器上,而用户真实想获得的内容就在这些设置好的服务器上

反向代理.png

通过图片对比,应该看出一些区别,这里的proxy服务器代理的并不是客户端,而是服务器,即向外部客户端提供了一个统一的代理入口,客户端的请求都要先经过这个proxy服务器,具体访问的那个服务器Server是由Nginx来控制的,再简单点来讲,一般代理指代理客户端,反向代理是代理的服务器

反向代理的用途和好处

  • 安全性:正向代理的客户端能够在隐藏自身信息的同时访问任意网站,这个给网络安全带来了极大的威胁,因此,我们必须把服务器保护起来,使用反向代理客户端用户只能通过外来网络访问代理服务器,并且用户并不知道自己访问的真实服务器是哪一台,可以很好的提供安全保护
  • 功能性:反向代理的主要用途是为多个服务器提供负载均衡、缓存等功能,负载均衡就是一个网站的内容被部署在若干服务器上,可以把这些机子看成一个集群,那Nginx可以将收到的客户端请求'均匀地'分配到这个集群中所有的服务器上,从而实现服务器压力的平均分配,也叫负载均衡

最简单的反向代理

我们vim主配置文件:

其中这几行:

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

我们修改location

location / {
         proxy_pass http://iamyqhp.com/;
    }

重载Nginx,再访问IP,就发现代理到我的博客上面去了

反向代理成功.png

其它反向代理指令

反向代理还有些常用的指令:

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

Nginx适配PC或移动设备

现在很多网站都是有了PC端和HTML5站点的,因为这样就可以根据客户设备的不同,显示出体验更好的不同的页面,这样的需求有人说拿自适应就可以搞定,比如我们常说的bootstrap24格布局法,这些确实是非常好的方案,但是无论是复杂性和易用性上,还是不如分开编写的好,比如我们常见的淘宝、京东....这些大型网站都没有采用自适应,而是用分开制作的方式

操作方法

cd/usr/share/nginx

cd /usr/share/nginx

然后ls查看一下

[root@master nginx]# ls
html  modules

我们创建两个文件夹pcmobile

[root@master nginx]# mkdir pc mobile
[root@master nginx]# ls
html  mobile  modules  pc

分别编写两个文件夹,都写一个index.html:

pcindex.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YQHP's HTML</title>
</head>
<body>
    <h1>This is PC's html</h1>
</body>
</html>

mobileindex.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YQHP's HTML</title>
</head>
<body>
    <h1>This is mobile's html</h1>
</body>
</html>

再次编辑8080.conf:

server{
     listen 8080;
     server_name nginx2.jspang.com;
     location / {
      root /usr/share/nginx/pc;
      if ($http_user_agent ~* '(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)') {
         root /usr/share/nginx/mobile;
      }
      index index.html;
     }
}

mobile端的正则表达式判断:

if ($http_user_agent ~* '(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)'){
    
}

重载Nginx,查看192.168.153.50:8080/

PC端:

PC端.png

mobile端:

mobile端.png

非移动端跳转到http://iamyqhp.com/:

 if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
  rewrite  ^(.*)   http://iamyqhp.com/$1 permanent;
 }

设置Gzip压缩

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

gzip压缩.jpg

从上图可以清楚的明白,Gzip是需要服务器和浏览器同时支持的,当浏览器支持Gzip压缩时,会在请求消息中包含Accept-Encoding:gzip,这样Nginx就会向浏览器发送经过Gzip压缩后的内容,同时在相应信息中加入Content-Encoding:gzip,声明这是Gzip后的内容,告诉浏览器要先解压后才能解析输出

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.11.0
  • gzip_proxied:用于设置启用或禁用从代理服务器上收到相应内容gzip压缩
  • gzip_vary:用于在响应消息头中添加Vary:Accept-Encoding,使代理服务器根据请求头中的Accept-Encoding识别是否启用gzip压缩

gzip最简单的配置

进入配置文件

[root@master ~]# cd /etc/nginx/
[root@master nginx]# vim nginx.conf

HTTP那增加gzip

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    gzip on;
    gzip_types text/plain application/javascripts text/css;

重载配置文件

打开网页,按F12打开开发者工具,再快捷键Ctrl+RHeaders中就能看到是否开启gzip

Last modification:December 10th, 2020 at 09:40 am