使用 Coding.net 的 WebHook 来自动更新、部署

需求:

开发人员提交 git push 后,在目标机器上可以自动触发执行 git pull 获取最新代码

特别要注意是操作权限问题,假设目标机器为我们的 BigIns 测试机。

1、在『目标机器』上执行生成公钥:

mkdir /home/www/.ssh
chown www.www /home/www/.ssh

sudo -u www ssh-keygen
cat /home/www/.ssh/id_rsa.pub

2、把公钥文本粘贴到 Coding.net 中指定项目的『设置-项目设置-部署公钥』里

3、在『目标机器』找一个 Web 可访问到的目录,新建 PHP 文件:

sudo -u www vi git_hook.php

<?php

const WIKI_DIR = '/home/wwwroot/pai.bigins.wiki';

// 假设 wiki 文档放在 coding-pages 分支上
echo shell_exec('cd ' . WIKI_DIR . ' && git pull origin coding-pages 2>&1');

?>

4、设置 Coding.net 的 WebHook,填入以下 URL:

http://pai.bigins.wiki/git_hooks.php

5、在『目标机器』初始化检出代码(必须用 www 用户)

# 新建
cd /home/wwwroot/
mkdir pai.bigins.wiki
chown www.www pai.bigins.wiki

# 检出代码
# 注意:git remote 仓库地址必须用 SSH 地址:git@git.coding.net,不能用 https://git.coding.net
# 因为经测试 https 检出的库,每次 pull 还是要输入密码,ssh 方式则无需重复认证
sudo -u www git clone -b coding-pages git@git.coding.net:grampus/hmb_oa_wiki.git pai.bigins.wiki

6、如果需要手动 pull,则必须以 www 身份执行:

cd /home/wwwroot/pai.bigins.wiki
sudo -u www git pull origin coding-pages

参考文章:

Nginx 在 StayLife 的一些应用

需求:将 m.69night.cn/mapi 所有请求转发到 api.staylife.cn

修改 /usr/local/nginx/conf/vhost/69night.conf

location /mapi/
{
    # 尾部的斜杠不能少,目的是不用把 /mapi 这个路径转发出去
    proxy_pass https://qa.api.staylife.cn/;
    proxy_redirect  off;
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    access_log /home/wwwlogs/69night_mapi.log access;
}

值得一提的是,原来我们用的 rewrite 来转发。当 POST 请求时,对于内部的 URL(斜杠开头)转发时,POST 数据不会丢失。对于外部跳转,实际上是一次 GET 302,所以会丢失第一次的 POST 数据。

location /mapi/ {
    rewrite ^ https://qa.api.staylife.cn/;
}

参考文章:

Nginx 访问日志记录 POST/COOKIE/HEADER 等数据

初始日志格式中的变量:

$remote_addr        The remote host
$remote_user        The authenticated user (if any)
$time_local         The time of the access
$request            The first line of the request
$status             The status of the request
$body_bytes_sent    The size of the server's response, in bytes
$http_referer       The referrer URL, taken from the request's headers
$http_user_agent    The user agent, taken from the request's headers

我们要用到的几个变量:

$request_body   请求体(含POST数据)
$http_XXX       指定某个请求头(XXX为字段名,全小写)
$cookie_XXX     指定某个cookie值(XXX为字段名,全小写)

修改 /usr/local/nginx/conf/nginx.conf,增加新的日志格式 big_api

log_format  big_api  '$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$request_body" "$http_referer" '
    '"$http_user_agent" $http_x_forwarded_for "appid=$http_appid,appver=$http_appver,vuser=$http_vuser" '
    '"phpsessid=$cookie_phpsessid,vuser_cookie=$cookie___vuser" ';

修改 /usr/local/nginx/conf/vhost/hicrew.conf,底部对应的日志格式也改为 big_api

access_log  /home/wwwlogs/hicrew.log big_api;

参考文章:

Mac 通过 brew 安装 Apache2.4

执行安装

brew install homebrew/apache/httpd24

删除原有自带的 apache

sudo rm -rf /usr/sbin/httpd
sudo rm -rf /etc/apache2

修改配置 /usr/local/etc/apache2/2.4/httpd.conf

# 修改监听端口(初始为8080)
Listen 80

找 `Require all denied` 替换成 `Require all granted`

# 开启 mod_rewrite 模块
LoadModule rewrite_module libexec/apache2/mod_rewrite.so

# 开启 PHP7 模块
LoadModule php7_module /usr/local/Cellar/php70/7.0.6/libexec/apache2/libphp7.so

# 开启引入虚拟主机
Include /usr/local/etc/apache2/2.4/extra/httpd-vhosts.conf

# 底部增加一行
Include /usr/local/etc/apache2/2.4/other/*.conf

修改文件 /usr/local/etc/apache2/2.4/extra/httpd-vhosts.conf

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "/Users/silverd/home/wwwroot"
    <Directory "/Users/silverd/home/wwwroot">
        Include /usr/local/etc/apache2/2.4/extra/php-yaf.conf
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName local.api.hicrew.cn
    ServerAlias local.m.hicrew.cn
    DocumentRoot "/Users/silverd/home/wwwroot/hicrew/app/web"
    <Directory "/Users/silverd/home/wwwroot/hicrew/app/web">
        Include /usr/local/etc/apache2/2.4/extra/php-yaf.conf
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName local.admincp.hicrew.cn
    DocumentRoot "/Users/silverd/home/wwwroot/hicrew/admin/web"
    <Directory "/Users/silverd/home/wwwroot/hicrew/admin/web">
        Include /usr/local/etc/apache2/2.4/extra/php-yaf.conf
    </Directory>
</VirtualHost>

新增文件 /usr/local/etc/apache2/2.4/other/php7.conf

<IfModule php7_module>
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
    <IfModule dir_module>
        DirectoryIndex index.html index.php
    </IfModule>
</IfModule>

新增文件 /usr/local/etc/apache2/2.4/extra/php-yaf.conf

Options Indexes FollowSymLinks
Require all granted
AllowOverride All
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>

设置开机启动

ln -sfv /usr/local/opt/httpd24/*.plist ~/Library/LaunchAgents
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.httpd24.plist

设置启动、停止命令别名

vi ~/.bash_profile
alias httpd24.start="launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.httpd24.plist"
alias httpd24.stop="launchctl unload -w ~/Library/LaunchAgents/homebrew.mxcl.httpd24.plist"
alias httpd24.restart='httpd24.stop && httpd24.start'
source ~/.bash_profile

其实仍然可以通过以下命令来管理

sudo apachectl start
sudo apachectl stop
sudo apachectl restart

因为 apachectl 命令此时指向的是:

/usr/local/bin/apachectl -> /usr/local/Cellar/httpd24/2.4.23_2/bin/apachectl

对了,记得把原先系统自带的 Apache 停止掉:

sudo /usr/sbin/apachectl stop

# 或粗鲁点直接杀进程
ps -ef | grep /usr/sbin/httpd | grep -v grep | cut -c 6-12 | xargs sudo kill -9

VueJS 爬坑笔记

Mark神塞,90后技术极客直男,通晓前端技术,在他的推荐下,我接触了vue。 起初吸引我的是vue的小巧轻快,以及优雅的数据绑定操作,但随着学习的深入,发现vue完全是有别于以往前端开发的架构和流程,作为十几年的老司机,耳目一新,技术的演进真是令人兴奋。 但目前vue国内文档和生态社区尚不完整,有问题基本搜索不到。好在QQ群有近500多名先行者,很多问题在不断地虚心讨教后基本可以得到解决。

爬坑笔记其实不算笔记,一切尽在代码中吧:

Repo: https://github.com/silverd/staylife

Demo: http://m.staylife.cn

项目采用 vue-cli 的 webpack 标准模板构建,使用到的主要社区组件有:

  • vue-router
  • vue-resource
  • vue-infinite-scroll
  • vux (weui)
  • sass-loader
  • vue-lazyload
  • vue-spinner (很赞的 loading 组件)
  • locutus (经典的 phpjs.org 的一些函数库)

几个可以特别指出的点:

  • 计算属性的奥秘 computed http://vuejs.org.cn/guide/reactivity.html#计算属性的奥秘
  • 组件 keep-alive 的使用
  • 组件 attach/ready 的执行时机
  • AJAX POST CORS 跨域(withCredentials)
  • 全局 Preloader 的实现
  • 过渡动画 transition 的使用
  • webpack 的加载路径(参见 webpack.base.conf 中的 resolve)
  • 让文本框聚焦需要使用 v-el 属性
  • vm.$nextTick 的使用 http://vuejs.org.cn/guide/reactivity.html#异步更新队列
  • 微信 iOS 修改网页标题的黑科技
  • 微信 wx.config 代码位置
  • 微信安卓版不能正确执行字符串的 includes/startWith 等 ES6 的新方法

NPM 相关

package.json 中 dependencies 和 devDependencies 区别

  • dependencies 正常运行该包(npm build)时所需要的依赖项,通过 npm install --production 安装
  • devDependencies 开发的时候需要的依赖项,比如一些单元测试的包

默认会安装两种依赖,如果你只是单纯的使用这个包而不需要进行一些改动测试之类的,可以使用

npm install

只安装dependencies而不安装devDependencies。

npm install --production

如果你是通过以下命令进行安装

npm install XXX

那么只会安装 dependencies,如果想要安装 devDependencies,需要输入

npm install XXX --dev

-save-save-dev 可以省掉你手动修改 package.json 文件的步骤。

  • npm install XXX -save 自动把模块和版本号添加到dependencies部分
  • npm install XXX -save-dev 自动把模块和版本号添加到devdependencies部分

《TalkingCoder@Vue+Webpack直播内容分享》的后续补充:

Vue

  • Vue.config.debug(在调试模式中,打印所有警告的栈追踪,所有的锚节点以注释节点显示在 DOM 中)
  • 异步组件 component resolve http://vuejs.org.cn/guide/components.html#异步组件
  • 双向绑定的原理 http://vuejs.org.cn/guide/reactivity.html#如何追踪变化
  • vm.$emit(父组件向指定的一个子组件触发事件)http://vuejs.org.cn/api/#vm-emit
  • this.$refs(在父组件上注册一个子组件的索引,便于直接访问)
  • this.$els(相当于 document.getElementById,获取页面上指定的DOM元素,例如修改 innerHTML 或光标自动聚焦等场景)
  • slot 插槽的作用
  • 循环里删除指定一行的小技巧: this.itemList.$remove(item)
  • 路由 hashbang 和 HTML5 history 模式的各自使用场景区别和优劣势
  • 组件里引入一个 CSS 的几种写法以及区别:
    • <style> @import 'a.css' </style>
    • <script> import 'a.css' </script>
    • <style src="a.css"></style>
  • css scoped 的表现
  • 组件里 ready 和 attached 的区别(组件的生命周期 beforeDestroy)
  • 自己开发的组件,如何发布到 npmjs?

Webpack

  • Webpack 和 gulp/grunt 的区别(gulp 只做合并压缩的事,webpack 除了做 gulp 的事外,还会做代码抽离、模块化、依赖管理)
  • package.json 中 dependencies 和 devDependencies 的区别
  • config.devtool = ‘#source-map’ 的作用和优化
  • 优化 webpack 打包后的文件大小
  • 热刷新 hot-reload 的原理和注意点(只有子组件可以热刷,css文件无法热刷)

Charlse 抓包使用心得

最常见的功能就不累述了,这里记录几个有价值的功能。

电脑浏览器抓包 HTTPS

http://www.charlesproxy.com/ssl.zip 下载CA证书文件。 双击其中的.crt文件,选择“总是信任”,从钥匙串访问中即可看到添加成功的证书。

然后 Charles -> Proxy -> Mac OS X Proxy 将 Charles 设置成系统代理。

移动设备抓包 HTTPS

  1. 将手机代理设置为电脑
  2. 在手机上安装导入证书
    • 电脑 Charles ->Help -> SSL Proxying ->Install Charles Root Certifate on a Mobile Device or Remote Browser
    • 手机 Safari 打开 http://charlesproxy.com/getssl 安装证书。
  3. 电脑 Charles -> Proxy -> SSL Proxy Settings 增加需拦截的域名:443。
  4. 如发现 SSL 解密失败,那需检查一下手机的信任设置:
    • 设置-通用-关于本机-证书信任设置,开启对 Charles Proxy Custom Root Certification 的信任。

设置需要捕获的域名

4、Charles -> Proxy -> Proxy Settings -> SSL -> Enable SSL Proxying,在下方 Locations 区域添加要抓取的域名和端口443

过滤网络请求

方法1:在主界面的中部的 Filter 栏中填入过滤出来的关键字(模糊匹配) 方法2:Charles -> Proxy -> Recording Settings -> Include 栏,选择添加一个项目,然后填入需要监控的协议,主机地址,端口号

通常情况下,方法1做一些临时性的封包过滤,方法2做一些经常性的封包过滤。

重复发包

通常情况下,我们使用方法1做一些临时性的封包过滤,使用方法2做一些经常性的封包过滤。

在请求上右键可以选择 Repeat(发包一次) / Repeat Advanced(发包多次),这个功能用来测试短信轰炸漏洞很方便。

修改网络请求内容

在请求上右键可以选择 Edit,即可创建一个可编辑的网络请求

修改网络响应内容

在一个 JS/CSS 请求上右键选择 Map Local,用本地的文件映射替代。

功能类似 Fiddler 的 AutoResponder,可用于线上调试JS/CSS代码

模拟慢速网络 Throttle

模拟慢速网络或者高延迟的网络,以测试在移动网络下,应用的表现是否正常。

Charles -> Proxy -> Throttle Setting,勾选上 Enable Throttling,并且可设置 Throttle Preset 的类型

如果只想模拟指定网站的慢速网络,可以再勾选上图中的 Only for selected hosts 项,然后在对话框的下半部分设置中增加指定的 hosts 项即可。


参考文章: