揭秘overflow为hidden作用

最近遇到了一个给div设置 overflow:hidden 清除兄弟div的浮动的样式，于是深究一下：

一、属性值

提到overflow，就会想到他的几个属性值：
W3C是这样解释的:

  • visible; 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden; 内容会被修剪，并且其余内容是不可见的。
  • auto; 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • scroll; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit; 规定应该从父元素继承 overflow 属性的值。
    这几个属性想必大家都很熟悉，但是对hidden这个属性值你真的了解吗？

二、详解hidden的用法

html代码示例

1
2
3
4
<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

css代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
.container{
    background-color: black;
}
.div1{
    background-color: aqua;
    width: 100px;
    height: 100px;
}
.div2{
    background-color: red;
    width: 100px;
    height: 100px;
}
1、隐藏溢出

这个很好理解，假如父元素div的的高度给150px小于子元素的高度之和200px时，给父元素设置overflow:hidden，这个时候即便是子元素的高度高出父元素，也会被隐藏；

2、清除浮动

给两个子元素div设置float:left，这时候的效果是黑色的外层div消失了，是因为浮动的元素脱离开了文档流，不占据空间，父元素识别不了子元素的高度，这个时候父元素设置overflow:hidden，效果就是在浏览器中，子元素的高度撑开了父元素的高度，除去子元素占据空间的的背景颜色，其余背景是父元素的背景色黑色；

3、解除坍塌

什么是坍塌？
举个例子：如果给div1设置margin-top:50px,期待的效果是有一部分空间是高度50px,背景为黑色部分，但是事实并不是这样，这就是坍塌。这里多说一句：这种坍塌只针对于父亲的第一个儿子，div2设置margin-top:50px则不会有任何不妥。 防止这种坍塌现象就是给父元素设置：

1
2
3
4
.container{
    background-color: black;
    overflow：hidden;
}

在多说一句：浮动的div不用考虑坍塌。

没办法贴图，有兴趣的小伙伴可以敲一下试试!

参考链接：
深入理解：overflow:hidden——溢出,坍塌,清除浮动

return 用法

一、js中，return 0，return false的区别？

乍眼看去，return 0和return false不是一样的吗，0转为布尔值不就是false，为假吗，其实并不是，怎么去更好的辨别呢？

#1. return的值，0就是0，false就是false，是不一样的：

1
2
3
4
var result = function( a, b ){
    return a===b ? 1 : 0;
}
console.log(result(1,2)); //0

这个例子打印的就是0；

再看一个例子

1
2
3
4
5
function returnFalse() { return false; }
function returnZero() { return 0; }

if( returnFalse() === false ) console.log("I'm preventDefault() by false");
if( returnZero() === false ) console.log("I'm perventDefault() by zero");

这个例子运行后打印的是I'm preventDefault() by false,更清楚的表明return 0并不等价于return false；

那到这里疑问就来了，我们写代码的过程中写过0就是false的情况，是什么情况下，0可以等价于false？

#2. 在写判断条件的时候，0可以作为表达式使用，这个时候0才具有false的性质：

1
2
3
4
5
if(0){
    console.log(true);
}else{
    console.log(false);
}

这个时候打印结果为false，因为这个这个0会作为一个转为布尔值的操作，在0被转为了false，这个会执行else的操作，所以输出的结果是false；

总结:

  1. 0可以作为语句存在；
  2. 0只有作为表达式存在，才具有false的性质；
  3. 常见的表达式中会被视为false的值有：
    • 数字0；
    • 空字符串’’;
    • 布尔值false；
    • null；
    • undefined；

二、return的用法

return语句应用范围只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误。

#1. 函数控制与函数结果：return 表达式；

#2. 返回正确的处理结果：return true；

#3. 返回控制，无函数结果：return false；

return false来阻止提交表单或者继续执行下面的代码，通俗的来说就是阻止执行默认的行为;

比较经典的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function a(){
    return false;
}
function b(){
    console.log('b');
}
function c(){
    console.log('c');
}
function Test(){
    a();
    b();
    c();
}
Test(); //b c

注意：

这个例子展示出return false 只在当前函数有效，不会影响其他外部函数的执行。

return true相当于执行符，return false 相当于终止符。

localStorage存取对象数组

前言

localStorage只能存储字符，在需要存储对象或者数组的时候如何存储呢？在这之前，现在了解一下localStorage。
说起localStorage就会想起sessionStorage,那二者有什么区别呢？

#1. 作用域不同

这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

#2. 生存期不同

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。

sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

介绍localStorage

#1.数据结构

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。

举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，“键是唯一的”这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

#2. 域名限制

由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookie的差别还是蛮大的。

#3. 语法

  • setItem(); 存
  • getItem(); 取
  • removeItem(); 移除
  • clear(); 清除所有
1
2
3
4
5
存放数组错误代码:
let arr=[1,2,3];
localStorage.setItem("temp",arr);
console.log(typeof localStorage.getItem("temp")); //string
localStorage.getItem("temp"); //1,2,3
1
2
3
4
5
存放对象错误代码：
let obj={"a":1,"b":2};
localStorage.setItem("temp2",obj);
console.log(typeof localStorage.getItem("temp2")); //string
localStorage.getItem("temp"); //[object Object]
正确代码：
let obj={"a":1,"b":2};
obj=JSON.stringify(obj);
localStorage.setItem("temp2",obj);
console.log(typeof localStorage.getItem("temp2")); //string
JSON.parse(localStorage.getItem("temp2")); //{a: 1, b: 2}

参考文章

MDN - Window.localStorage
HTML5 LocalStorage 本地存储

点击劫持ClickJacking

引言

当我们的页面嵌入到一个iframe中时，安全测试提出一个于我而言很新鲜的词汇–点击劫持,会造成安全隐患。

1. 什么是点击劫持？

点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面；二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义；

简单的说，就是用户点击了一个按钮，但是触发的操作不是正常期待的事件，而是触发了别的非意愿操作…

2. 解决办法

X-Frame-Options 响应头配置避免点击劫持攻击

原理：
X-Frame-Options HTTP响应头是用来给浏览器指示允许一个页面可否在<frame>,<iframe>或者<object>中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。

X-Frame-Options有三种可配置值，（属性值不区分大小写）

1
2
3
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM

指令
如果指定DENY，从其他站点加载时，不仅尝试在框架中加载页面失败，从同一站点加载时尝试这样做将失败。另一方面，如果指定SAMEORIGIN，只要包含在框架中的站点与为页面提供服务的站点相同，仍然可以在框架中使用该页面。

DENY无论站点尝试这样做，页面都不能显示在框架中。SAMEORIGIN该页面只能显示在与页面本身相同的源框架中。ALLOW-FROM_ uri_页面只能显示在指定原点的框架中。

当前项目是部署在nginx上的，那就以nginx为例来做个配置，除此还可以配置在 Apache,IIS等。

配置过程：

#1. 在nginx下 /opt/nginx/conf.d/example.conf下写入

1
2
3
add_header X-Frame-Options "allow-from https://example.com/";
也可以直接写域名
add_header X-Frame-Options "allow-from example.com/";

#2. 踩坑

发现在chrome下会报错，报错信息如下：

1
Invalid 'X-Frame-Options' header encountered when loading 'example.com:8081/app.html': 'allow-from example.com/' is not a recognized directive. The header will be ignored.

经过排查发现是在Chrome和Safari要使用Content-Security-Policy参数

#3. 设置用Content-Security-Policy

1
add_header Content-Security-Policy "frame-ancestors example.com";
3. 参考链接

web安全之–点击劫持攻击与防御技术简介

ClickJacking漏洞的原理

4. 相关知识点

防盗链攻击

js 编码解码

前言

URL的合法字符表示再浏览器的地址栏中不会被转义的字符，有两种:

#1. URL元字符：分号（;），逗号（’,’），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）

#2. 语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（），圆括号（()）
当输入的字符不符合以上的字符时，浏览器就会把该字符转义.
转义规则: 根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。
比如: 当再浏览器地址栏中输入 www.baidu.com/q=你好时,会被转义成例如 www.baidu.com/q=%E6%98%A5%E8%8A%82类似的字符串，浏览器才会读取。

1. encodeURI

定义和用法
encodeURI() 函数可把字符串作为 URI 进行编码。

说明:
该方法不会对ASCII字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ‘ ( ) 。
该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

示例

1
2
> encodeURI("http://www.baidu.com:8080:public/a=小玉&b=<>")
> http://www.baidu.com:8080:public/a=%E5%B0%8F%E7%8E%89&b=%3C%3E

2. encodeURIComponent

定义和用法
和encodeURI一样,encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ‘ ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

示例

1
2
> encodeURI("http://www.baidu.com:8080:public/a=小玉&b=<>")
> http%3A%2F%2Fwww.baidu.com%3A8080%3Apublic%2Fa%3D%E5%B0%8F%E7%8E%89%26b%3D%3C%3E

3. decodeURI

定义和用法
顾名思义,decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

示例

1
2
> decodeURI("http://www.baidu.com:8080:public/a=%E5%B0%8F%E7%8E%89&b=%3C%3E")
> http://www.baidu.com:8080:public/a=小玉&b=<>

4. decodeURIComponent

定义和用法
顾名思义,decodeURIComponent() 函数可对 encodeURIComponent() 函数编码过的 URI 进行解码。

示例

1
2
> decodeURI("http%3A%2F%2Fwww.baidu.com%3A8080%3Apublic%2Fa%3D%E5%B0%8F%E7%8E%89%26b%3D%3C%3E")
> http://www.baidu.com:8080:public/a=小玉&b=<>

5. escape

定义和用法
escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。

示例

1
2
> escape("*123小玉@#$()8")
> *123%u5C0F%u7389@%23%24%28%298

6. unescape

定义和用法
unescape() 函数可对通过 escape() 编码的字符串进行解码。

说明
该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。

示例

1
2
> escape("*123%u5C0F%u7389@%23%24%28%298")
> *123小玉@#$()8"

提示和注释

ECMAScript v3 并反对使用unescape和escape，因此应该用 decodeURI() 或ecodeURI() 和 decodeURIComponent() 或ecodeURIComponent() 取而代之。

参考文章

#1. 本文参照w3c;

#2. 前端编码解码

md5加密 + crypto-js aes解密

阐述

我们常常会遇到有关支付的问题,在支付的过程中,就会遇到支付安全性的问题,而有关于money的交易,安全措施做的再多也不为过,当然配置https服务那是必须的……

md5加密

使用md5加密将参数和时间戳以及随机字符串拼接,按照字典序排序生成签名,放入头部传给后台;

那么问题来了?

#1. 为什么要拼接时间戳和随机字符串呢?

答:是为了防止被重放攻击;

#2. 按照字母序排序是为什么呢?

答: 防止参数乱序之后，造成加密不一致的问题;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
安装依赖,也可以直接引入js库
npm install md5
生成签名过程,假设前台传入的参数都是object,若参数为字符串,则需另加判断
//参数处理
function A(params) {
    if (typeof params === 'object') {
        var arr = [];
        for (var i in params) {
            if(!(params[i] === null || params[i] === '' || params[i] === undefined)){
                arr.push(i + '=' + (
                    typeof params[i] === 'object' ? JSON.stringify(params[i]) : params[i]
                ));
            }
        }
        return this.paramsStrSort(arr.join(('&')));
    }
},
//生成签名
function B(paramsStr) {
    let tmp = paramsStr + '&c=' + c + '&d=' + d;//c,d为时间戳和随机字符串
    let str = _.split(tmp, '&').sort().join('&');
    let newStr = str + '&key=' + secret;//secret为常量,由后端定义好
    return md5(newStr);
},
调用过程
paramsObj = { xid: xid, pageSize: pageSize, type: type, pageNo: pageNo };
sign = getSign(paramsObj);

crypto-js aes 解密

背景

返回的数据也涉及到敏感信息,所以对返回的数据也需要进行加密处理,最近做了一个解密的操作,用的是AES+BASE64算法,网上对于这类的加密算法还是蛮多的,这里推荐一篇文章 AES加密算法的详细介绍与实现.

具体实现

搞懂了加密解密的实现是怎么一回事,已经成功了一大半,这里贴出一些核心代码,虽然代码量不多,但是做的过程是痛苦的,做出来之后在想想其实也没有那么复杂……这里推荐一篇文章帮助更好的理解AES. 理解AES加密解密的使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
安装依赖
npm install crypto-js

function decrypt(data) {
    let key = CryptoJS.enc.Utf8.parse('key'); // 秘钥
    let baseResult=CryptoJS.enc.Base64.parse(data);
    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);

    let decrypted = CryptoJS.AES.decrypt(ciphertext, key, { 
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
    });
    data = decrypted.toString(CryptoJS.enc.Utf8).toString();
    return data;
};
调用:在返回的数据直接调用该方法即可.

注意点

在做的过程中遇到一个问题,前台传入的参数为中文或者特殊字符时,在传输过程中会做一些编码,后台在接收的时候需要对其进行重新编码才能够正确的拿到参数…

结语

关于加解密的方法还有很多,感兴趣的小伙伴们可以继续做一些深入的研究哈~

git bisect 二分法快速定位问题代码

痛点

前两天还好好的功能，怎么这个今天就不行了？这两天改动了很多代码，到底是那一次改动引发的 Bug？无从查起……

解决办法

Git提供的bisect这一命令,就是二分法查找快速地在提交中定位 Bug,少则几次,多则十几次就会定位到引入Bug的提交.

二分查找

举个例子:

一个人在1到100的数字中随意选择一个，另外一个人来猜，比起一个挨着一个地猜,懂得折半查找的人总是获胜者。

命令使用

1
2
3
4
5
6
7
8
git bisect 其实很简单，主要是基于几个基本命令：

git bisect start：准备进行 bisect debug。
git bisect good：标记一个提交为 "good"。
git bisect bad：标记一个提交为 “bad”。
git bisect reset：退出 bisect debug 的状态。

git bisect 涉及到的命令，非常的清晰简单，下面举个实际的例子，结合上面的解释，就更清晰了

操作步骤

1. 查看提交记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# git log
    commit 94f6cc
    Author: xxxx
    Date:   Fri Dec 21 13:22:55 2018 +0800
        更改多语言
    commit c2237
    Author: xxxx
    Date:   Thu Dec 20 19:51:18 2018 +0800
        多语言模拟数据
    commit 50b42
    Author: xxxx
    Date:   Thu Dec 20 19:51:01 2018 +0800
        删除模版文件代码
    commit 5be11
    Author: xxxx
    Date:   Thu Dec 20 19:50:36 2018 +0800
        分离路由
    commit d3dec
    Author: xxxx
    Date:   Thu Dec 20 19:50:03 2018 +0800
        增加多语言
    commit a2de6
    Author: xxxx
    Date:   Wed Dec 19 13:09:14 2018 +0800
        语言设置从后台获取

2. 开启二分查找

1
# git bisect start

3. 找出一个好的提交版本进行标记

1
# git bisect good a2de6

4. 标记bad版本

1
2
3
# git bisect bad
    Bisecting: 2 revisions left to test after this (roughly 1 step)
    [5be11] 分离路由

当完成对一个好版本和一个坏版本的标记后,Git切换到一个中间版本（5be11),并告诉我们大概需要1步可以找到元凶。

5. 继续标记版本

1
2
3
# git bisect good 5be11
    Bisecting: 0 revisions left to test after this (roughly 1 step)
    [d3dec] 删除模版文件代码

6. 再来一步

1
2
3
4
5
6
7
8
9
# git bisect bad
    Bisecting: 0 revisions left to test after this (roughly 0 steps)
    [50b42] 删除模版文件代码
# git bisect bad
    d3dec is the first bad commit
    commit 50b42
    Author: xxxx
    Date:   Thu Dec 20 19:50:03 2018 +0800
        删除模版文件代码

这样元凶就找到了,查看你的提交记录是不是改动了什么东西吧!!!

域名+nginx负载均衡

一、域名和证书介绍

在近期的前端资源配置中,遇到过域名对应的证书和密钥的对应关系:

1、我们先来看一下域名的分类:

  • 顶级域名:

    是互联网DNS等级之中的最高级的域，它保存于DNS根域的名字空间中。顶级域名是域名的最后一个部分，即是域名最后一点之后的字母，例如在example.com这个域名中,顶级域是.com(或.COM),大小写视为相同。

  • 二级域名:

    就是最靠近顶级域名左侧的字段。如：zh.wikipedia.org中，wikipedia就是二级域名(有资料认为, 在顶级域名后面, 还存在一级域名, 那么zh就是二级域名)。

我国在国际互联网络信息中心（Inter NIC正式注册并运行的顶级域名是.cn,这也是我国的一级域名.在顶级域名之下，我国的二级域名又分为类别域名和行政区域名两类。类别域名共6个,包括用于科研机构的.ac;用于工商金融企业的.com；用于教育机构的.edu；用于政府部门的.gov；用于互联网络信息中心和运行中心的.net；用于非盈利组织的.org。而行政区域名有34个，分别对应于我国各省、自治区和直辖市。

  • 父域名和子域名(也有资料称为二级域名)

    一个相对概念,很好理解.如 www.sina.com.cn 和 news.sina.com.cn 都是 sina.com.cn的子域名（或称为二级域名）， sina.com.cn就是父域名。同样,sina.com.cn其实又可以看作是.com.cn的子域名；而com.cn又是.cn的一个子域名

    2、ssl证书对应的域名

    SSL证书有三种类型:
  • 单域名证书:可以绑定一条带www和不带www的域名，比如admin.com和 www.admin.com 就是一条;
  • 多域名证书:可以绑定250多条任意类型的域名;
  • 泛域名证书:可以绑定一条顶级域名和顶级域名下的所有二级域名，或者是一条二级域名和二级域名下的所有三级域名。

那列举这些是为了解决什么问题呢?
答:在配置https的时候在一台服务上可能需要配置两个域名或者更多,正常的思维是一个域名那我就要配置一个证书等,但是在配置的时候并不是,发现以.example.com的域名,其下的子域名比如: a..example.com和b.example.com其实使用的是同一份证书,原因就是他们的父域名是同样的.像这种情况,我们只需要在服务器的nginx.conf文件下,配置一份证书就可以了.

二、nginx负载均衡

配置负载均衡目的

是为了解决单个节点压力过大，造成Web服务响应过慢，严重的情况下导致服务瘫痪，无法正常提供服务。

示例:
春节期间在12306网站上，有时查询一张火车票都会很慢，甚至整个网页都卡住不动了,由于一个Web服务同时能处理的用户并发请求的数量有限，同时还有机器故障的情况,所以一个Web站点通常会在N台机器上各部署一套同样的程序。当某一个服务挂掉的时候，还有第二个、第三个、第N个服务。。。继续为用户提供服务.如果有一个服务正在同时处理1000个用户的请求，这个服务的上限可能最多能同时处理1000个用户的请求，这时它已经很忙了，如果此时又有一个新请求过来，我们仍然把这个请求分配给这台机器，这时候这个请求就只能在干等着，等这个服务处理完那些请求后，再继续处理它。

负载均衡

将用户的所有HTTP请求均衡的分配到每一台机器上，充分发挥所有机器的性能，提高服务的质量和用户体验。

配置样例

实现负载均衡常用的Web服务器软件有Nginx、Apache等,本文介绍nginx下负载均衡策略;

1
2
3
4
5
6
7
8
9
10
11
12
13
upstream slb {
    server 192.168.0.100:8080 weight=2 max_fails=3 fail_timeout=1;  # 2/6次
    server 192.168.0.101:8080 weight=3;  # 3/6次
    server 192.168.0.102:8080 weight=1;  # 1/6次
}
server{
    listen 443; //默认是443端口,若不设置其他端口,在配置域名的情况下,可通过域名直接访问
    server_name  xxx.example.com;

    location ~ /api {
        proxy_pass http://slb;
    }
}
  • proxy_pass http://slb 表示将所有请求转发到slb服务器组中配置的某一台服务器上;
  • upstream模块：配置反向代理服务器组，Nginx会根据配置，将请求分发给组里的某一台服务器,slb是服务器组的名称;
  • upstream模块下的server指令：配置处理请求的服务器IP或域名，端口可选，不配置默认使用80端口。通过上面的配置，Nginx默认将请求依次分配给100，101，102来处理，可以通过修改一些参数来改变默认的分配策略：

weight:默认为1，将请求平均分配给每台server;

max_fails:默认为1。某台Server允许请求失败的次数，超过最大次数后，在fail_timeout时间内，新的请求将不会分配给这台机器。如果设置为0，Nginx会将这台Server置为永久无效状态，然后将请求发给定义了proxy_next_upstream, fastcgi_next_upstream, uwsgi_next_upstream, scgi_next_upstream, and memcached_next_upstream指令来处理这次错误的请求;

fail_timeout:
默认为10秒,某台Server达到max_fails次失败请求后，在fail_timeout期间内，nginx会认为这台Server暂时不可用，不会将请求分配给它;

还有一些参数,比如:backup, down, max_conns, resolve

说明:简单的配置其实就用到了upstream,如有兴趣,可对其进行深入的了解,做前端,了解一些配置、系统、后端的知识还是很有必要的;

静态资源部署

部署小白看这里呦,以centos为例

如有需要,在centos上安装 Nginx

1
2
3
4
5
6
7
8
9
10
11
# 1. add nginx repository
sudo yum install epel-release
# 2. install nginx
sudo yum install nginx
# 3 start nginx
nginx
# 4. restart nginx
nginx -s reload
# 特殊情况
当一台服务器有a,b,c等多个ningx服务时,在b这个服务上做些配置,在启动的时候要在sbin目录下
sudo ./nginx -s reload

配置一个服务
在/etc/nginx/conf.d目录下面创建一个新文件，建议命名<port>-<name>.conf，文件内容如下：

1
2
3
4
5
6
7
8
9
server {
    listen 9881;
    root /opt/public; //文件路径
    rewrite ^/$ /index.html redirect;

    location /api {
        proxy_pass http://localhost:9880/api;
    }
}

将本地静态资源放入服务器上,这一步必不可少呦

建议:若是使用命令上传文件,最好是本地压缩后在上传,在进行解压;若是使用可视化工具,可使用工具Filezilla,直接上传;

1
2
3
4
静态资源在当前路径下使用scp命令传入nginx上:
scp -r dist.zip root@<ip>:/opt/public
在/opt/public目录下解压:
unzip dist.zip

安装压缩和解压包zip工具

1
2
yum install zip
yum install unzip

如有需要,配置https服务

推荐文章 详解http和https:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
server {
    listen 9881;
    root /opt/public;
    server_name  public.example.com;  //域名
    rewrite ^/$ /index.html redirect;
    ssl on;   //开启ssl服务
    ssl_certificate  /etc/nginx/conf.d/public.pem;  //证书
    ssl_certificate_key /etc/nginx/conf.d/public.key;  //私钥
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location /api {
        proxy_pass http://public.example.com:9880/api;  //https访问的域名
    }
}
本站总阅读量: , 本文阅读量:

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很高兴认识大家<br><br>在此做些日常和学习分享<br><br>如有错误,欢迎👏指正