前端需要了解的Nginx知识

一、Nginx是什么？

定义：Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器。

从定义可以看出Nginx是和我们使用nodejs搭建的服务同属于http服务器，，那么什么是反向代理？

1，反向的含义是：代表外部网络用户向内部服务器发出请求，拿到响应返回给外部用户。(外到内)
2，那么正向代理就是：代表内部网络用户向外部服务器发出连接请求，拿到响应返回给内部用户。(内到外)
3，反向代理服务器位于用户与目标服务器之间，反向代理服务器通常可用来作为Web加速，即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载，提高访问效率。

二、快速上手

1. 安装

Nginx可以安装在windows、mac、linux等多数主流操作系统上。

遇事不懂先问菜鸟：Nginx 安装配置 - 菜鸟教程

安装注意要将安装的位置记住。

nginx -s reload     #重新加载Nginx配置文件，然后以优雅的方式重启Nginx
nginx -s stop       #强制停止Nginx服务
nginx -s quit       #优雅地停止Nginx服务（即处理完所有请求后再停止服务）
nginx -h        #打开帮助信息
nginx -v        #显示版本信息并退出
nginx -V        #显示版本和配置选项信息，然后退出
nginx -t        #检测配置文件是否有语法错误，然后退出
nginx -T        #检测配置文件是否有语法错误，转储并退出
nginx -q        #在检测配置文件期间屏蔽非错误信息
nginx -p prefix     #设置前缀路径(默认是:/usr/share/nginx/)
nginx -c filename   #设置配置文件(默认是:/etc/nginx/nginx.conf)
nginx -g directives     #设置配置文件外的全局指令
killall nginx       #杀死所有nginx进程

三、常用配置项介绍

先上一段基本配置:

# 定义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指令指定nginx是否调用sendfile函数来输出文件，对于普通应用设为 on。
    # 如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络I/O处理速度，降低系统的负载。
    # 注意：如果图片显示不正常把这个改成off。
    sendfile        on;   
    tcp_nopush     on;    # 防止网络阻塞
    keepalive_timeout  65;  # 长连接超时时间，单位是秒
    gzip  on;  # 开启gzip压缩
    include /etc/nginx/conf.d/*.conf; # 包含的子配置项位置和文件，表示conf.d文件夹下.conf后缀的文件都会归入nginx配置中
    # 服务配置
    server{
        listen 80;# 监听端口
        # 根目录下
        location / {
            proxy_pass http://myproject; # 选择哪个服务器列表
        }
    }
}

1. 配置结构

WeChatefdc01ef22427ccabdacc6153e1246bf.png

2. 内置变量

WeChat5d6365e75c4a44238b92baf8ac373dbb.png

3. 其他操作

1. 声明变量 & 变量赋值

# 声明变量，并为变量赋值
set $username "alan";

2. 读取cookie

# 读取请求携带的cookie，其中keyName是cookie的key
$cookie_keyName;

3. if 判断语句

set $env $cookie_ENV;
# if 判断 ==  !=
if ($cookie_ENV == "dev") {
    rewrite ^/website/blog/index.dev.html;
}

4. 文件｜目录 判断

WeChat2a7fa635bedbd100f2e966f2392ee4e0.png

# 如果文件或者目录不存在则返回html
if (!-e $request_filename) {
    rewrite ^/website/blog/index.html;
}

5. 设置响应头、状态码

# 在server里设置响应头 add_header
add_header Access-Control-Allow-Origin *;
location / {
    # 通常在代理情况下使用 proxy_set_header：
    proxy_set_header Host 127.0.0.1;
    # 设置剔除的头部字段
    proxy_hide_header Expires; 
    # 设置状态码直接return即可
    return 200;
}

四、nginx 常用操作命令

1. 查看nginx安装目录

ps -ef | grep nginx
# root 4593 1  0 Jan23 ? 00:00:00 nginx: master process /usr/sbin/nginx

2. 查看nginx.conf配置文件目录

通过检查配置是否正确的方式来查看配置文件目录

nginx -t
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

3. 检查nginx配置语法是否正确

nginx -t

# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

其中：参数 -c 指定了配置文件的路径，如果不加 -c 参数，Nginx 会默认加载其安装目录的 conf 子目录中的 nginx.conf 文件。

4. 启动/重启nginx服务

# 启动nginx服务，ps：如果nginx已经开启了，再次执行nginx -c 命令时，会报错
/usr/sbin/nginx -c /etc/nginx/nginx.conf
# 重启nginx服务
/usr/sbin/nginx -s reload

5. 停止nginx服务

# 快速强制停止Nginx服务
/usr/local/nginx/sbin/nginx -s stop

# 优雅停止nginx服务
/usr/local/nginx/sbin/nginx -s quit

quit 参数首先会关闭监听端口，停止接收新的连接，然后把当前正在处理的连接全部处理完，最后再退出进程。

6. 查看nginx日志

nginx的log日志分为access log 和 error log

cat /etc/nginx/nginx.conf # 直接输出整个文件的内容
tail -f /etc/nginx/nginx.conf # 实时输出日志

五、nginx在前端的应用

1. 静态资源服务器

通常我们的cdn源服务器上会部署 nginx 来托管静态资源，访问域名下的某一特定路径（如/static）时转发到服务器本地目录文件上，访问目录下有index.html还会当成页面直接打开。
如刚配置好显示的页面就是一个默认的html：

WeChat2a7fa635bedbd100f2e966f2392ee4e0.png

配置:

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    access_log  /usr/local/etc/nginx/logs/access.log;  #nginx请求日志地址
    sendfile        on;
    keepalive_timeout  65;
    # 静态文件服务
    server {
        location / {
            root /data/www; # 根目录
            autoindex on; # 自动显示目录下的index.html页面
            expires 30d; # 缓存30天
        }
    }
}

2. 前后端分离项目部署

由于前后端分离模式下，前后端各自部署自己的项目，前端发送的请求到后端某一端口的服务会产生跨域，因此通过Nginx设置转发来解决跨域问题。

将 nginx 作为静态资源服务器托管html、css、js图片等静态文件，然后将满足某些条件的ajax请求代理转发到后端服务上。即可实现前后端项目的部署。

内容较多详情见我的另一篇文章：教你如何在服务器部署前后端分离项目

3. 负载均衡

负载均衡：简单理解就是将请求分发给多个服务器，分配策略会考虑服务的最大负载，当前负载等信息。

这里内容较多建议参考：前端的Nginx知识梳理 - 负载均衡

4. 前端部署多测试环境

前端在打包时针对多个环境打包出不同的html文件，然后根据cookie判断环境返回对应环境的html。

这样可以做到代码完全隔离，对应环境上只会出现该环境上的的代码。

location ^~ /blog {
    set $env "dev1";
    if ($cookie_ENV != "") {
        set $env $cookie_ENV;
    }
    if (!-e $request_filename) {
        rewrite ^(.*) /website/$env/blog/index.$env.html last;
    }
}

5. nginx配置https

可参考：nginx 配置 https

六、参考

• 前端的Nginx知识梳理 - 黑色的枫 - 掘金
• 前端开发者必备的Nginx知识 - ConardLi - 掘金
• Nginx超详细的常用操作命令
• 教你如何在服务器部署前后端分离项目
• nginx 配置 https

作者：alanyf
链接：https://juejin.cn/post/6926715596835356685
来源：掘金
著作权归作者所有。收藏只是方便自己学习