前端需要了解的Nginx知识

2021-02-08 本文已影响0人今天又要上班吗

一、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

六、参考

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

前端需要了解的Nginx知识

一、Nginx是什么？

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

二、快速上手

1. 安装

三、常用配置项介绍

1. 配置结构

2. 内置变量

3. 其他操作

1. 声明变量 & 变量赋值

2. 读取cookie

3. if 判断语句

4. 文件｜目录判断

5. 设置响应头、状态码

四、nginx 常用操作命令

1. 查看nginx安装目录

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

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

4. 启动/重启nginx服务

5. 停止nginx服务

6. 查看nginx日志

五、nginx在前端的应用

1. 静态资源服务器

2. 前后端分离项目部署

3. 负载均衡

4. 前端部署多测试环境

5. nginx配置https

六、参考

猜你喜欢

热点阅读

前端需要了解的Nginx知识

一、Nginx是什么？

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

二、快速上手

1. 安装

三、常用配置项介绍

1. 配置结构

2. 内置变量

3. 其他操作

1. 声明变量 & 变量赋值

2. 读取cookie

3. if 判断语句

4. 文件｜目录 判断

5. 设置响应头、状态码

四、nginx 常用操作命令

1. 查看nginx安装目录

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

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

4. 启动/重启nginx服务

5. 停止nginx服务

6. 查看nginx日志

五、nginx在前端的应用

1. 静态资源服务器

2. 前后端分离项目部署

3. 负载均衡

4. 前端部署多测试环境

5. nginx配置https

六、参考

猜你喜欢

热点阅读

4. 文件｜目录判断