一句VI引发的生产事故

发表于 2016-09-30 |

今天干了一件蠢事，在一台PROD机上vi了一个大文件导致系统卡死。

事件起因：

公司的git服务器在一台生产环境机器(阿里云服务器)上，今天想上去给git建一个SSH公钥免得每次有新员工进来都要addusr一次。正要开始操作突然收到一个消息“you have new mail in /var/spool/mail/root”。我想我都还没干什么事情，一时好奇加太随意我直接来了一个 vi /var/spool/mail/root，立马就卡住了。我一看坏了，肯定是vi了个大文件卡死了，赶紧Control+C并再另起一个terminal SSH过去，都没反应。就这一个轻率的操作给公司带来了重大的损失。。。

事件过程：

这个时候有同事反映git server连不了，客服连续接到客户投诉电话说无法使用系统。为了不影响客户使用，老板决定通过阿里云控制台强制重启服务器。阿里云服务器重启＋apache＋数据库启动逾时30分钟＋。这段时间内客户都不能正常使用系统。

反思：

对unix系统不够熟悉，要看文件应该尽量用tail而不是用vi。如果之前就知道这个mail的作用今天也就不会再好奇去看这个文件了。
在正式服务器上操作时不够严谨。上正式服务器一定要按照计划行动，因为好奇去vi一个不了解的文件是我在这次事故里的最大错误。
事发后不够冷静，对于后果预估不足。当SSH连不上时我建议在阿里云控制台上强制重启，但是结果重启服务器加启动服务花了半个多小时而且导致了很多不确定性，后来想想如果当时足够冷静的话等个十来分钟应该也可以连上了。

atool-build协同html-webpack-plugin解决bundle文件cache问题

发表于 2016-09-27 |

问题：

atool-build默认编译出index.js, index.css，当项目发布新版本，但用户游览器加载的经常还是上个版本的缓存，用户不得不手动去清除缓存。

方案：

引入webpack的插件html-webpack-plugin，应用html模版。

install html-webpack-plugin.

1	install html-webpack-plugin --save-dev

更改package.json

npm run clear: 清除之前版本的js/css文件。

—hash atool-build的选项，设置了之后webpack将会编译出带hash的js/css文件。

1	"deploy": "npm run clear && atool-build --hash ",

更改webpack.config.js,指定该index.ejs为html模版文件

webpackConfig.plugins.push(
  new HtmlWebpackPlugin({
    template: "./src/entries/index.ejs"
  })
);

index.ejs. 注：在调试过程中发现必须后缀名为.ejs.不然模版不起做用，因时间关系没有深究。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的title</title>
  </head>
  <body>
  <div id="root"></div>
  </body>
</html>

编译后生成的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <title>我的title</title>
  <link href="index-cfdc7c9610845019c2f2.css" rel="stylesheet"></head>
  <body>
  <div id="root"></div>
  <script type="text/javascript" src="common-a435e8ead877d7765d7e.js"></script>
  <script type="text/javascript" src="index-cfdc7c9610845019c2f2.js"></script>
  </body>
</html>

github下fork后同步源的新更新

发表于 2016-09-20 |

上周因项目中用的一个react lib react-data-grid，想要在这上面新增一个功能，于是上去fork，修改再pull了一个request，已经被原作者merge进去了。今天又发现了一个问题想上去改改，发现我原先fork的branch已经落后于源branch了

这里已经有一个比较完整的方案了。我这边备忘一下。

首先要先确定一下是否建立了主repo的远程源：
1
git remote -v
如果里面只能看到你自己的两个源(fetch 和 push)，那就需要添加主repo的源.
1
2
git remote add upstream URL
git remote -v

然后你就能看到upstream了。

如果想与主repo合并：

1
2
3

git fetch upstream
git merge upstream/master
git push origin master

git命令速查：
https://gist.github.com/hofmannsven/6814451

深海冷链物流智能化监控系统APP维护页面

发表于 2016-09-14 |

深海冷链物流智能化监控系统APP维护页面

这是一个深海冷链监控APP维护页面，所有有关这个APP的问题请在下面留言或者发信到fenglei@tangusoft.com.

因为现在app上架的时候必须写一个Support URL,所有就有了一个页面。

Web前端直接生成文件下载

发表于 2016-09-14 |

今天有个急需求要当天上线，需要从web下载一个xml,这个xml基于一个固定模板再填充一定参数。后端小伙看了下觉的这个用java写比较麻烦。考虑到这需求很急，好吧咱大前端来搞定。

这个基本思路是用html5的Bolb来生成文件流供下载。

import iconvLite from 'iconv-lite';
const template ='xxxxx'  //template是一个预定义的xml String. 
export function downloadXML(data){
  let fileName = data[0]+'-'+data[4]+'.xml'
  let xmlStr = template;	
  data.map(value=>xmlStr = xmlStr.replace('?',value));
  xmlStr = iconvLite.encode(xmlStr,'gbk');
  var blob = new Blob([xmlStr], {type: 'text/xml;charset=GBK2312', encoding:'GBK2312'})；
  saveData(blob,fileName);
}
let saveData = (function () {
  var a = document.createElement("a");
    document.body.appendChild(a);
    return function (blob, fileName) {
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
    };
}());

遇到问题及解决方法：

需要弹出一个文件保存框并指定文件名。方法saveDate()就是为了处理这个问题。通过建一个link来实现文件弹出框并设定文件名。闭包方法是为了确保这个link只被创建一次。
目标客户需要这个xml为gbk编码。正常情况下javascript运行时的encoding是依赖于浏览器的编码设，一般都为utf. 所以当一个string放到Bolb里后它的encoding是utf-8。解决方法：在github上找到了一个encoding转换的lib叫iconv-lite。在string放入Blob前先用iconv-lite转码成gbk的buffer。

好处：

前端直接生成xml供下载，避免了一次http请求。对用户来说体验更发反应速度更快，对系统来说降低了后台负荷及复杂性。

追加：

第二天客户追加一新需求，要求一次下载多个文件并打包成一个zip下载。

先install一个JSZip包:

1	npm install jszip

代码:

import JSZip from 'jszip';
var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
zip.file("Hello2.txt", "Hello World2\n");
zip.generateAsync({type:"blob"})
.then(function(content) {
    saveData(content, "example.zip");
});

XCODE打包一个react native项目时的“Cyclic dependency”错误。

发表于 2016-09-14 |

近日想把一个年初时就完的react native打包发布到app store. 这个项目最初是打算用客户的集团账号发布成in-house应用，但是客户的这个集团账号正好过期了，客户公司是一个上市大公司，跑流程跑了一个多月还是没完成续费。最后决定我们自己的发开账号发布成一个公共应用到app store。之前已经在XCODE上用客户的集团账号通过Product->Archive顺利打出过一个发布包了，当我这次改掉team之后再Archive竟然出现了的错误。Clean，关掉重启都不起作用。

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS9.3.sdk/System/Library/Frameworks/QuartzCore.framework/Headers/BaiduMapAPI_Base.framework/Headers/BMKMapManager.h:10:9: Cyclic dependency in module 'UIKit': UIKit -> QuartzCore -> UIKit
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS9.3.sdk/System/Library/Frameworks/UIKit.framework/Headers/UICollectionViewLayout.h:11:9: Could not build module 'QuartzCore'
/Users/xxx/gittangu/app/GuanLi2/node_modules/react-native/React/Base/RCTBridge.h:10:9: Could not build module 'UIKit'

Google “Cyclic dependency in module”，几经折腾还是不行。再仔细看下错误信息，晕IOS下面怎么会有BaiduMap的SDK包？删除之，再Archive，搞定！

1 2	cd /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS9.3.sdk/System/Library/Frameworks/QuartzCore.framework/Headers/ rm -rf BaiduMapAPI*

不知道之前做了什么误操作把BaiduMap的SDK拷到ISO SDK下面去了？

npm peerDependencies处理

发表于 2016-09-12 |

npm3体验

发表于 2016-09-12 |

安装

由于NODE的长期支持版本(LTS)为4.5.0,这个版本附带的npm版本2.X，所以目前大家默认安装的npm都是2.X.

查看当前npm版本

npm -v

安装npm3作为默认npm，将会替换当前的npm2，运行npm -v将会返回3.X.X。我用这方法全局安装并使用npm3已有几个月了，没有发现任何bug(在这期间同组的其它成员还都在使用npm2)。

1	npm install npm@3 -g

回退到npm2，运行npm -v将会返回2.X.X。

1	npm install npm@2 -g

别名安装npm3. 保持当前npm版本不变，但是可以使用npm3 install来以npm3的方法install modules. 如果有同学不想冒险直接安装npm3，可以使用这个方法。

1	npm install npm3 -g

npm3新功能

npm3最大的改动就是把原来的树形包依赖改成扁平结构。之前树形结构在windows用户手动拷贝 node_modules时经常会出现文件路径过长无法拷贝的错误，到npm3之后就不会再有这个问题了。还有一个好处是扁平结构下大大减少了文件数量，在树形结构下因兄弟包之间是无法知道对方是否已经加载了哪个子包，所当有多个包依赖于同一个子module的时候会产生重复加载。
npm3依赖包规则在官网上可以找到 https://docs.npmjs.com/how-npm-works/npm3 我这里做个总结：

当用户使用npm install xxx -save导入xxx包的时候，如果xxx下面有子module，子module首先会试着拷到顶层node_modules下面。
- 如果顶层node_modules下已经存在这个同名子module并且版本号相同，则跳过。这样在build的时候xxx会找到顶层node_modules下的子module.
- 如果顶层node_modules下已存存在这个同名子module但版本号不同，则把这个子module保留xxx的node_modules下面。

当两个或以上的包依赖于同一个子module的不同版本时候，哪个拷到顶层node_module哪个保留在包自身的node_modules下面，这个规则是跟据包的加载顺序，哪个先加载就哪个先抢占顶层目录。
- 如果包是用npm install xxx -save加载的，则后install的为后。
- 如果是空node_modules文件夹，跟据package.json用npm install一次性加载，则跟据包名的字母排序：例如包名b开头的排在a开问的包后面。

GitHub Pages + Hexo搭建博客

发表于 2016-09-01 |

一、前言

这是一篇使用GitHub Pages和Hexo搭建免费独立博客的总结。

如果是小小白，可以先花时间去了解下：

事件起因：

事件过程：

反思：

问题：

方案：

深海冷链物流智能化监控系统APP维护页面

这是一个深海冷链监控APP维护页面，所有有关这个APP的问题请在下面留言或者发信到fenglei@tangusoft.com.

因为现在app上架的时候必须写一个Support URL,所有就有了一个页面。

今天有个急需求要当天上线，需要从web下载一个xml,这个xml基于一个固定模板再填充一定参数。后端小伙看了下觉的这个用java写比较麻烦。考虑到这需求很急，好吧咱大前端来搞定。

遇到问题及解决方法：

好处：

追加：

安装

npm3新功能

一、 前言

一、前言