前端需要了解的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

六、参考

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容