前端需要了解的Nginx知识(上手超简单)

3,498 阅读4分钟

整理前端需要了解的Nginx知识。

一、Nginx是什么

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

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

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

二、快速上手

1. 安装

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

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

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

常用命令

nginx -s reopen 	#重启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. 配置结构

模块功能
mainnginx的全局配置,对全局生效。
events配置影响nginx服务器或与用户的网络连接。
http可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。
server配置虚拟主机的相关参数,一个http中可以有多个server。
location配置请求的路由,以及各种页面的处理情况。
upstream配置后端服务器具体地址,负载均衡配置不可或缺的部分。

2. 内置变量

变量名功能功能
$host请求信息中的Host,如果请求中没有Host行,则等于设置的服务器名
$request_method客户端请求类型,如GET、POST
$remote_addr客户端的IP地址$args请求中的参数
$content_length请求头中的Content-length字段
$http_user_agent客户端agent信息
$http_cookie客户端cookie信息
$remote_port客户端的端口
$server_protocol请求使用的协议,如HTTP/1.0、·HTTP/1.1`
$server_addr服务器地址
$server_name服务器名称
$server_port服务器的端口号

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. 文件|目录 判断

语句功能
-f文件存在
-d目录存在
!-d目录不存在
-e文件或目录存在
!-e文件或目录都不存在
-x文件可执行
!-x文件不可执行
# 如果文件或者目录不存在则返回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:

  • 配置
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;
    }
    # html文件不设置强缓存,每次都会向服务端确认是否更新
    if ($request_filename ~ .*\.(htm|html)$) {
        add_header Cache-Control no-cache;
    }
    if (!-e $request_filename) {
        rewrite ^(.*) /website/$env/blog/index.$env.html last;
    }
}

5. 多个域名指向同一个服务器上的服务或者静态文件

由于多个项目的nginx配置和日志等最好分开维护和部署,所以利用nginx模块化功能,分为多个子配置文件。

  • nginx.conf:入口文件
http {
    # 加载其他子nginx配置
    include /etc/nginx/conf.d/*.conf;
}
  • 服务端渲染服务配置文件 /etc/nginx/conf.d/alanyf.ssr.com.conf
# nodejs服务
server {
    listen 80;
    server_name alanyf.ssr.com; # 域名
    access_log /data/web_deployment/log/nginx/alanyf.ssr.com.access.log;
    error_log /data/web_deployment/log/nginx/alanyf.ssr.com.error.log;
    
    location /ssr {
        root /data/sites/ssr/;
        proxy_pass http://127.0.0.1:3000; # 代理到服务器本地3000端口上
        proxy_set_header Host alanyf.ssr.com;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header referer "http://$host";
        break;
    }
}
  • 博客站点静态资源配置文件 /etc/nginx/conf.d/alanyf.blog.com.conf

# 静态文件
server {
    listen 80;
    server_name alanyf.blog.com; # 域名
    access_log /data/web_deployment/log/nginx/alanyf.blog.com.access.log;
    error_log /data/web_deployment/log/nginx/alanyf.blog.com.error.log;
    
    location /blog {
        root /data/sites/blog;
        # html文件不设置强缓存,每次都会向服务端确认是否更新
        if ($request_filename ~ .*\.(htm|html)$) {
            add_header Cache-Control no-cache;
        }
        if (!-e $request_filename) {
            rewrite ^/(.*) /blog/index.html;
        }
    }
}
  • 文档站点静态资源配置文件 /etc/nginx/conf.d/alanyf.docs.com.conf
# 静态文件
server {
    listen 80;
    server_name alanyf.docs.com; # 域名
    access_log /data/web_deployment/log/nginx/alanyf.docs.com.access.log;
    error_log /data/web_deployment/log/nginx/alanyf.docs.com.error.log;
    
    location /docs {
        root /data/sites/docs;
        # html文件不设置强缓存,每次都会向服务端确认是否更新
        if ($request_filename ~ .*\.(htm|html)$) {
            add_header Cache-Control no-cache;
        }
        if (!-e $request_filename) {
            rewrite ^/(.*) /docs/index.html;
        }
    }
}

6. nginx配置https

可参考:nginx 配置 https

六、参考