【干货】前端Nginx统一配置

一、缓存策略

项目入口文件index.html 不缓存,其他静态资源js、css、font、img等走缓存策略,具体配置如下:

location /yourpath { # 换成自己的项目路径
  add_header Access-Control-Allow-Origin $http_origin;
  add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
  add_header Access-Control-Allow-Credentials true;
  add_header Access-Control-Allow-Headers access-control-allow-headers,content-type,access-control-allow-methods,access-control-allow-origin,x-requested-``with``,source,CASTGC,Host,Origin,Referer,Authorization,Cache-Control,If-Modified-Since,User-Agent,Keep-Alive,X-Mx-ReqToken;
  add_header Vary Origin; # 解决微前端跨域请求静态资源失败的问题
  try_files $uri $uri/ /yourpath/index.html; # 换成自己的项目路径
  alias /data/apps/yourpath/; # 换成自己的项目路径
  index index.html;
  # html 入口文件不缓存
  if ($request_filename ~* .*\.(?:htm|html)$)
  {
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
  }
  # css、js缓存
  if ($request_filename ~* .*\.(?:js|css)$)
  {
    expires 7d;
  }
  # 缓存图片、字体
  if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|woff2|ttf)$)
  {
    expires 7d;
  }
}

二、开启gzip压缩

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

三、运行和控制Nginx

// 启动
nginx

// 重新打开日志文件
nginx -s reopen

// 重新载入配置文件
nginx -s reload

// 停止
nginx -s stop

// 查找ng配置文件  /usr/local/etc/nginx
nginx -t

// 从容停止
// (1) 查看进程号
ps -ef|grep nginx
// (2) 杀死进程
kill -QUIT <进程号> 或 kill -TERM <进程号>

// 强制停止
pkill -9 nginx


四、Nginx作为Web服务器

Nginx作为Web服务器, 需要定义server虚拟主机,让这些虚拟主机去处理对于特定域名或IP地址的请求。
每个server虚拟主机都定义了 location 指令,location 定义了对于指定的一组 URI 是如何匹配和进行处理的。

1.web服务器基本实例

server {
  listen 80;
  server_name one.sample.com;
  location / {
    root /usr/local/www;
    index index.html;
  }
}
# 参数说明
# server 代表1个虚拟主机,可以有多个
# server_name 匹配请求的指定域名或IP地址
# location 配置请求的路由,匹配对应的URI
# root 查找资源的路径(文件夹目录)
# index 默认查找

2.location匹配规则(请求过滤)

(1) 语法

server {
   location 表达式 {
        # 配置跨域、重定向、缓存测略等
   }
}

(2) location表达式的类型
@它定义一个命名的location,使用在内部定向时,例如 error_page,try_files
/通用匹配,任何请求都会匹配到
=开头, 表示精确匹配, 只有请求的url路径与=后面的字符串完全相等才会匹配到(优先级最高)
^~ 表示普通字符匹配。使用前缀匹配。如果匹配成功,则不再匹配其他location
~开头表示区分大小写的正则匹配
~*开头表示不区分大小写的正则匹配

(3) location表达式的优先级
= 的优先级最高。一旦匹配成功,则不再查找其他匹配项。
^~ 类型表达式。一旦匹配成功,则不再查找其他匹配项。
~~* 的优先级次之。如果有多个location的正则能匹配的话,则使用正则表达式最长的那个。
常规字符串匹配类型。按前缀匹配。


3.URL重写

URL重写是指: 当请求的URL满足事先定义好的规则时, 将跳转/定向到某个规则,比如常见的伪静态、301重定向、浏览器定向等。
(1) 语法

server {
   rewrite 规则 定向路径 重写类型;
}

rewrite参数说明:
规则:字符串或者正则来表示想匹配的目标url
定向路径:匹配到规则后要定向的路径,如果规则里有正则,则可以使用$index来表示正则里的捕获分组
重写类型:
last:表示完成rewrite,浏览器地址栏URL地址不变
break;本条规则匹配完成后,终止匹配,不再匹配后面的规则,浏览器地址栏URL地址不变
redirect:返回302临时重定向,浏览器地址会显示跳转后的URL地址
permanent:返回301永久重定向,浏览器地址栏会显示跳转后的URL地址
(2) 示例

server {
  listen 80;
  server_name  www.aaa.com;
  location / {
    rewrite ^/$ www.bbb.com permanent;
  }
}

4.try_files

try_files是指: 按顺序检查文件是否存在,返回第一个找到的文件。如果所有的文件都找不到,会进行一个内部重定向到最后一个参数.
(1)跳转到文件
当访问:http://one.sample.com/test时会依次查找,若 1.html,2.html 都不存在,最终返回 3.html

server {
  listen 80;
  server_name one.sample.com;
  root www;
  index index.html;
  location /test {
     try_files /1.html /2.html /3.html;
  }
}

(2)跳转到变量
当访问:http://one.sample.com/test时会依次查找,若 1.html,2.html 都不存在,则跳转到命名为abclocation

server {
  listen 80;
  server_name one.sample.com;
  root html;
  index index.html;
  location /test {
    try_files /1.html /2.html @abc;
  }
  location @abc{
    rewrite ^/(.*)$  http://one.sample.com;
  }
}

(3)vue-router设置HTML5 History 模式时, nginx的配置如下:

location / {
    # URL 匹配不到任何静态资源,返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
    try_files uri/ /index.html;
}

5.Gzip配置

server {
  # 开启gzip 压缩(动态压缩,消耗cpu资源)
  gzip on;
  # 静态压缩(优先级高于动态压缩,返回预先压缩好的.gz文件)
  gzip_static on;
  # 设置用于处理请求压缩的缓冲区数量和大小。比如32 4K表示按照内存页(one memory page)大小以4K为单位(即一个系统中内存页为4K),申请32倍的内存空间。
  gzip_buffers 32 4k;
  # 设置gzip所需的http协议最低版本 (HTTP/1.1, HTTP/1.0)
  gzip_http_version 1.1;
  # 设置压缩级别(1-9), 值越大压缩率越高,同时消耗cpu资源也越多
  gzip_comp_level 2;
  # 设置压缩的最小字节数, 页面Content-Length获取
  gzip_min_length 1000;
  # 设置压缩文件的类型  (text/html), 不建议压缩图片(如jpg、png本身已压缩)
  gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
  gzip_disable "MSIE [1-6]\.";
}

6. https配置

http {
  server {
       listen       443 ssl http2;
       server_name  localhost-uat.longfor.com;
       # 配置ssl证书
       ssl_certificate      server.crt;
       ssl_certificate_key  server.key.unsecure;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

        #    location / {
        #     #    root   html;
        #        root   /Users/admin/Workspace/test/dist;
        #        index  index.html index.htm;
        #    }
        # 转发到http
        location / {
           proxy_pass http://localhost-uat.sample.com;
        }
    }
}

  1. 测试环境配置Nginx支持Https
# 0. 创建私钥和证书存放目录
mkdir -p /usr/local/nginx/ssl/private
cd /usr/local/nginx/ssl/private

# 1. 创建服务器私钥
# 会提示输入两次密码(Enter pass phrase for server.key),
# 两次密码保持一致,后面还会用到
openssl genrsa -des3 -out server.key 1024

# 2. 用于向第三方SSL证书颁发机构的请求文件CSR
# 提示输入私钥的密码后,会提示输入地域和邮箱,本着能偷懒就偷懒的原则,
# 直接留空回车,注意提示Common Name的时候输入自己的域名, 如localhost-uat.sample.com
openssl req -new -key server.key -out server.csr

# 3. 生成自签名的证书CRT
# 会提示输入私钥密码
openssl x509 -req -in server.csr -out server.crt -signkey server.key -days 3650

# 4. 剥离密码(避免重启Nginx的时候需要输入密码,提示Enter PEM pass phrase)
# 会提示输入私钥密码
openssl rsa -in server.key -out server.key.unsecure

# 5. 配置nginx
# 在nginx 配置文件server块listen 80; 后一行新增如下指令
listen 443 ssl;
ssl_certificate /usr/local/nginx/ssl/private/server.crt;
ssl_certificate_key /usr/local/nginx/ssl/private/server.key.unsecure;

# 6. 重启Nginx
nginx -t && nginx -s reload

# 7. 测试
# 打开 https://localhost-uat.sample.com
# chrome 浏览器提示 您目前无法访问localhost-uat.sample.com,因为此网站发送了Chrome无法处理的杂乱凭据
# 在chrome该页面上,直接键盘敲入这11个字符:thisisunsafe
# 鼠标点击当前页面任意位置,让页面处于最上层即可输入,输入时是不显示任何字符的,直接输入即可!

四、Nginx作为反向代理服务器

当访问http://one.sample.com/test时, nginx会将请求转发到http://localhost:3000上。

server {
  listen 80;
  server_name one.sample.com;
  root html;
  index index.html;  
  location /test {    
    # 请求host
    proxy_set_header Host $http_host;
    # 请求ip
    proxy_set_header X-Real-IP $remote_addr;
    # 请求协议
    proxy_set_header X-Scheme $scheme;
    # 代理服务器
    proxy_pass http://localhost:3000;
  }
}

五、Nginx作为负载均衡

1.负载均衡的介绍

在服务器集群中,Nginx起到一个代理服务器的角色(即反向代理),为了避免单独一个服务器压力过大,将来自用户的请求转发给不同的服务器。
负载均衡用于从 "upstream" 模块定义的后端服务器列表中选取一台服务器接受用户的请求。

2.负载均衡的基本实例

(1) upstream模块

一个最基本的upstream模块如下:

#动态服务器组, server是后端服务器,my_server是自定义的服务器组名称。
upstream my_server {
  server localhost:8001;
  server localhost:8002;
  server localhost:8003;
}
(2) 反向代理

在upstream模块配置完成后,要让指定的访问反向代理到服务器组。

server {
  listen 80;
  server_name www.example.com;
  root html;
  index index.html;
  location / {    
   # 反向代理到定义好的服务器组my_server
   proxy_pass http://my_server;
  }
}
(3) 完整配置
http {
    upstream my_server {
      server localhost:8001;
      server localhost:8002;
      server localhost:8003;
    }
    server {
        listen      80;
        server_name netdisk.longfor.com;
        root html;
        index index.html;
        location / {
            # 反向代理到定义好的服务器组my_server
            proxy_pass http://my_server;
        }
    }
}

3. 负载均衡策略

(1) 轮询(默认方式)

表示每个请求按时间顺序逐一分配到不同的后端服务器。

upstream my_server {
   server localhost:8001;
   server localhost:8002;
}
(2) weight(权重方式)

表示在轮询策略的基础上指定轮询的服务器的权重,默认为1,权重越高分配到需要处理的请求越多。

upstream my_server {
  server localhost:8001 weight=1;
  server localhost:8002 weight=2;
}

(3) ip_hash

表示指定负载均衡器按照基于客户端IP的分配方式,这个方法确保了相同的客户端的请求一直发送到相同的服务器,以保证session会话。这样每个访客都固定访问一个后端服务器,可以解决session不能跨服务器的问题。

upstream my_server {
  ip_hash;
  server localhost:8001;
  server localhost:8002;
}

备注:
在nginx版本1.3.1之前,不能在ip_hash中使用权重(weight)。
ip_hash不能与backup同时使用。
此策略适合有状态服务,比如session
当有服务器需要剔除,必须手动down掉。

(4) least_conn

表示把请求转发给连接数较少的后端服务器。轮询算法是把请求平均的转发给各个后端,使它们的负载大致相同;但是,有些请求占用的时间很长,会导致其所在的后端负载较高。这种情况下,least_conn这种方式就可以达到更好的负载均衡效果。

upstream my_server {
  least_conn;
  server localhost:8001;
  server localhost:8002;
}

(5) down

表示当前的server暂时不参与负载均衡。

upstream my_server {
  server localhost:8001 down;
  server localhost:8002;
  server localhost:8003;
}

(6) backup

表示预留的备份机器。当其他所有的非backup机器出现故障或者忙的时候,才会请求backup机器,因 此这台机器的压力最轻。

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

推荐阅读更多精彩内容