赵达的个人网站 - Zhao Da's Personal Website

Discuz 论坛附件、头像等资源迁移到阿里云 OSS 并开启 CDN 的解决方案

Wed, 23 May 2018 22:30:00 +0800

Discuz 论坛的附件、头像等资源不断增长，如果和主程序一起存储在云服务器上，就会导致云盘要定期进行扩容操作；附件如果需要进行 CDN 加速也只能使用回源策略进行 CDN 配置。为了一劳永逸的解决附件存储和加速问题，将附件等资源迁移到对象存储服务上是一个好的选择，本文以阿里云 ECS、OSS 服务为背景，其他云计算平台也可以参考。

创建 OSS Bucket

在 OSS 管理页面分别给论坛附件、头像创建 Bucket，名称为 img-bucket 和 avatar-bucket（如果自定为其他名字，后文提到的 Bucket 名称请自行替换），区域选择和论坛所在云服务器 ESC 一致的区域，记录下该区域的 Endpoint，存储类型选择标准存储，读取权限选择私有
到访问控制创建网站用户，生成 AccessKey和AccessKeySecret，给该用户授权 AliyunOSSFullAccess

开启 CDN

到刚创建好的 Bucket 的域名管理中绑定用户域名，比如img.example.com和avatar.example.com
勾选阿里云 CDN 加速，如果域名 dns 解析在阿里云，可以勾选自动添加 CNAME 记录，如果不在请自行添加域名的cname为阿里云 CDN 加速域名
勾选CDN 缓存自动刷新
建议单独为 CDN 申请单独的根域名，这样 CDN 请求不会带上网站的 cookie 等信息
到 CDN 域名管理中对新创建的域名进行配置
- 开启私有Bucket回源
- 缓存过期时间添加规则，内容目录/过期时间为3年，权重99
- 设置HTTP头添加规则，Cache-Control 设置为 max-age=315360000
- 开启智能压缩
- 其他设置请根据实际需求自行修改

迁移附件和头像

安装 ossfs，该工具能让您在 Linux 系统中把 OSS Bucket 挂载到本地文件系统中

ossfs 基于s3fs 构建，具有s3fs 的全部功能。主要功能包括

支持POSIX 文件系统的大部分功能，包括文件读写，目录，链接操作，权限，uid/gid，以及扩展属性（extended attributes）

通过OSS 的multipart 功能上传大文件

MD5 校验保证数据完整性

# 下载并安装
wget http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/attach/32196/cn_zh/1524809958556/ossfs_1.80.4_centos7.0_x86_64.rpm?spm=a2c4g.11186623.2.6.XJB3Dd&file=ossfs_1.80.4_centos7.0_x86_64.rpm
mv ossfs_1.80.4_centos7.0_x86_64.rpm?spm=a2c4g.11186623.2.6.QwMtDE ossfs_1.80.4_centos7.0_x86_64.rpm
yum localinstall ossfs_1.80.4_centos7.0_x86_64.rpm

将每个 bucket name、AccessKey和AccessKeySecret用:连接后填写到 /etc/passwd-ossfs，每行一个，并设置文件权限为 640

img-bucket:AccessKey:AccessKeySecret
my-bucket:AccessKey:AccessKeySecret

chmod 640 /etc/passwd-ossfs

安装 mailcap，解决 bucket 中的文件 Content-Type 全是 application/octet-stream 的问题

yum install mailcap

# 假设论坛根目录为 /data/htdocs/www ，后续脚本将以此为准，请根据实际情况修改
mv /data/htdocs/www/data/attachment /data/
mv /data/htdocs/www/uc_server/data/avatar /data/

挂载 OSS Bucket

# 重新创建被剪的目录
mkdir /data/htdocs/www/data/attachment
mkdir /data/htdocs/www/uc_server/data/avatar

# 获取运行 php-fpm 和 nginx 的系统用户 uid 和 gid，比如 www 用户
# uid=1000(www) gid=1000(www) 组=1000(www)
id www

# 挂载 bucket
# Endpoint：请使用内网地址，速度快且流量免费
# -o noxattr：如果你没有使用eCryptFs等需要XATTR的文件系统，可以提升性能
# -o kernel_cache：使用文件系统的 page cache
# -o allow_other：允许其他用户访问挂载文件夹
# -ouid -ogid：制定挂载目录的用户和组权限
ossfs img-bucket /data/htdocs/www/data/attachment -ourl=Endpoint -o noxattr -o kernel_cache -o allow_other -ouid=1000 -ogid=1000
ossfs avatar-bucket /data/htdocs/www/uc_server/data/avatar -ourl=Endpoint -o noxattr -o kernel_cache -o allow_other -ouid=1000 -ogid=1000

复制附件、头像到 bucket

cp -rf /data/attachment/* /data/htdocs/www/data/attachment
cp  -rf /data/avatar/* /data/htdocs/www/uc_server/data/avatar
# 到 oss bucket 文件管理验证数据没有问题后可以删除临时拷贝
rm -rf /data/attachment/
rm -rf /data/avatar/

如何卸载 bucket

# root用户
umount /data/htdocs/www/data/attachment
umount /data/htdocs/www/uc_server/data/avatar
# 非root用户
fusermount -u /data/htdocs/www/data/attachment
fusermount -u /data/htdocs/www/uc_server/data/avatar

开机启动，以 CentOS 7.0 为例，其他系统参考 FAQ

# 根据下面的模板创建启动脚本
vi /etc/init.d/ossfs
# 添加执行权限
chmod a+x /etc/init.d/ossfs
# 设置开机启动
chkconfig ossfs on

#! /bin/bash
#
# ossfs      Automount Aliyun OSS Bucket in the specified direcotry.
#
# chkconfig: 2345 90 10
# description: Activates/Deactivates ossfs configured to start at boot time.

ossfs img-bucket /data/htdocs/www/data/attachment -ourl=Endpoint -o noxattr -o kernel_cache -o allow_other -ouid=1000 -ogid=1000
ossfs avatar-bucket /data/htdocs/www/uc_server/data/avatar -ourl=Endpoint -o noxattr -o kernel_cache -o allow_other -ouid=1000 -ogid=1000

修改论坛附件和头像地址

到论坛后台 -> 全局 -> 上传设置 -> 基本设置中修改 本地附件 URL 地址

到论坛后台 -> 站长 -> UCenter 设置中修改头像调用方式为使用静态地址调用头像

由于有用户没有上传头像而使用默认头像，到 avatar bucket 的根目录添加3个默认头像文件 noavatar_big.gif、noavatar_middle.gif 和 noavatar_small.gif
修改source/function/function_core.php中头像地址

// 查找下面的代码并修改
// $file = $ucenterurl.'/data/avatar/'.$dir1.'/'.$dir2.'/'.$dir3.'/'.substr($uid, -2).($real ? '_real' : '').'_avatar_'.$size.'.jpg';
// return $returnsrc ? $file : '<img src="'.$file.'" onerror="this.onerror=null;this.src=\''.$ucenterurl.'/images/noavatar_'.$size.'.gif\'" />';
// 使用头像cdn地址
$cdnurl = 'http://avatar.example.com/';
$file = $cdnurl.$dir1.'/'.$dir2.'/'.$dir3.'/'.substr($uid, -2).($real ? '_real' : '').'_avatar_'.$size.'.jpg';
return $returnsrc ? $file : '<img src="'.$file.'" onerror="this.onerror=null;this.src=\''.$cdnurl.'noavatar_'.$size.'.gif\'" />';

修改uc_server/avatar.php中头像重定向地址

$avatar = './data/avatar/'.get_avatar($uid, $size, $type);
if(file_exists(dirname(__FILE__).'/'.$avatar)) {
	if($check) {
		echo 1;
		exit;
	}
	$random = !empty($random) ? rand(1000, 9999) : '';
  // rewrite avatar url
  $avatar = 'http://avatar.example.com/'.substr($avatar, 14);
  $avatar_url = empty($random) ? $avatar : $avatar.'?random='.$random;
} else {
	if($check) {
		echo 0;
		exit;
	}
	$size = in_array($size, array('big', 'middle', 'small')) ? $size : 'middle';
  // $avatar_url = 'images/noavatar_'.$size.'.gif';
  // rewrite avatar url
  $avatar_url = 'http://avatar.example.com/noavatar_'.$size.'.gif';
}

if(empty($random)) {
	header("HTTP/1.1 301 Moved Permanently");
	header("Last-Modified:".date('r'));
	header("Expires: ".date('r', time() + 86400));
}

// header('Location: '.UC_API.'/'.$avatar_url);
header('Location: '.$avatar_url);

论坛 JS、CSS、样式图片等资源接入 CDN

到 CDN 域名管理中添加域名 static.example.com
回源设置中源站信息类型选择IP，并填写源站地址IP为论坛外网 ip，端口 80
其他缓存和 HTTP 头设置参考上面 OSS Bucket 的 CDN 设置
添加论坛 Nginx 的 vhost 配置，如果是其他 web server 请参考添加

server
{
	listen	80;
	server_name static.example.com;

	index index.html index.htm;
	root  /data/htdocs/www;
	# error_page  404 = /topic-1.html;
	expires max;

	location ~ /\.git
	{
		return 404;
	}

	location ~ ^/.*\.(php|php5)$
	{
		deny all;
	}
	
	access_log  off;
}

- 到论坛后台 -> 全局 -> 性能优化 -> 服务器优化中修改 JS 文件 URL 和 CSS 文件 URL 为 自定义 URL 并填写 CDN 地址 http://static.example.com/data/cache/

小云 APP 缩略图接入 CDN

如果论坛使用小云 APP 开发了客户端程序，且开启了生成缩略图功能，同样可以参照上面附件、头像的方式接入 OSS 和 CDN
创建 thumb bucket 并开启 CDN 加速域名 thumb.example.com
用 ossfs 将 /data/htdocs/www/data/appbyme/thumb 目录挂载到 thumb bucket，并将已有缩略图拷贝进去
复制一份 /data/htdocs/www/mobcent/app/config/mobcent.php 为 /data/htdocs/www/mobcent/app/config/my_mobcent.php
修改 my_mobcent.php 中 cdndomain 的值为 thumb.example.com
修改 /data/htdocs/www/mobcent/app/components/web/ImageUtils.php 中缩略图地址

private static function _getThumbUrlFile($image, $thumb) {
    //支持自定义CDN域名
    $cacheurl = Yii::app()->params['mobcent']['cache']['cdndomain'];
    if(empty($cacheurl)){
        $cacheurl = Yii::app()->getController()->dzRootUrl;
    }
    // return sprintf('%s/%s/%s/%s_%s', 
    //     $cacheurl,
    //     MOBCENT_THUMB_URL_PATH,
    //     self::_getThumbTempPath($image),
    //     (isset($_GET['sdkVersion']) && $_GET['sdkVersion'] > '1.0.0') ? 'xgsize' : 'mobcentSmallPreview',
    //     $thumb
    // );
    // 修改缩略图地址
    return sprintf('%s/%s/%s_%s', 
        $cacheurl,
        self::_getThumbTempPath($image),
        (isset($_GET['sdkVersion']) && $_GET['sdkVersion'] > '1.0.0') ? 'xgsize' : 'mobcentSmallPreview',
        $thumb
    );
}

后记

至此，Discuz 论坛全站资源、附件、头像都接入了 OSS 和 CDN，将降低论坛主服务器 http 请求量压力并提高页面打开速度
除了本文使用的 ossfs 方案将附件接入 OSS，还有一些其他方案将附件接入 OSS 或 CDN；比如最简单的 CDN 回源方式将附件接入 CDN；还可以通过 ossftp 工具绑定 OSS，然后开启论坛远程附件方式来将附件接入 OSS 和 CDN；但是这些方案都没有本文的方案更具有通用性和易用性

参考

CentOS 7.5 + PHP 5.6.36 + Nginx 1.14.0 配置笔记

Tue, 22 May 2018 23:00:00 +0800

创建用户、组和目录

# web 用户和组
groupadd www
useradd -g www www -s /sbin/nologin

# 网站目录
mkdir -p /data/htdocs

# 日志目录
mkdir -p /data/logs

# 创建软件包下载和编译目录，后续软件都下载到这里
mkdir -p /data/software

# 创建软件安装目录，PHP、Nginx 将安装到这里
mkdir -p /usr/local/webserver

# 可写目录进行如下设置
# chown -R www:www /path

服务器基础环境和依赖安装

# 如果系统自带 Apache、PHP、MySQL，先卸载
yum remove httpd
yum remove php
yum remove mysql

# 升级所有软件包
yum update -y

# 安装可能用到的软件包，大部分其实已经内置在系统中
# gcc：GNU 编译器套装
# gcc-c++：GCC 的 C++ 支持
# autoconf：在sh下制作供编译、安装和打包软件的配置脚本的工具
# libjpeg-turbo-static：处理 JPEG 图像数据格式的自由库
# libpng：处理 PNG 图像数据格式的自由库
# freetype: 字体光栅化库
# libxml2: 解析XML文档的函数库
# zlib: 提供数据压缩之用的库
# glibc：C函数库
# glib2：跨平台的、用C语言编写的五个底层库的集合
# bzip2：比传统的 gzip 或者 ZIP 的压缩效率更高的库
# ncurses：虚拟终端中的“类GUI”应用软件工具箱
# curl：利用URL语法在命令行下工作的文件传输工具
# e2fsprogs：用以维护ext2，ext3和ext4文件系统的工具程序集
# krb5-libs：网络身份验证系统
# libidn：通过IETF国际域名（IDN）实施字符串预处理、Punycode 和 IDNA规格定义的工具
# openssl：安全通信软件包
# openldap：轻型目录访问协议
# nss-pam-ldapd：使用目录服务器的 nsswitch 模块
# openldap-clients：LDAP 客户端实用工具
# openldap-servers：LDAP 服务
# bison：自动生成语法分析器程序
# lrzsz：远程上传和下载文件
# libmcrypt：mcrypt 算法库
# mhash：mhash 算法库
# ImageMagick：用于查看、编辑位图文件以及进行图像格式转换的开放源代码软件套装
# libmemcached: memcache 客户端
yum -y install gcc gcc-c++ autoconf libjpeg-turbo-static libjpeg-turbo-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel pcre pcre-devel zlib zlib-devel glibc glibc-devel glib2 glib2-devel bzip2 bzip2-devel ncurses ncurses-devel curl curl-devel e2fsprogs e2fsprogs-devel krb5-libs krb5-devel libidn libidn-devel openssl openssl-devel openldap openldap-devel nss-pam-ldapd openldap-clients openldap-servers bison lrzsz libmcrypt libmcrypt-devel mcrypt mhash ImageMagick ImageMagick-devel libmemcached libmemcached-devel

安装其他 PHP 依赖库

# libiconv：提供了一个iconv()的函数，以实现一个字符编码到另一个字符编码的转换
wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.15.tar.gz
tar zxvf libiconv-1.15.tar.gz
cd libiconv-1.15
./configure --prefix=/usr/local
make
make install

# 在 /etc/ld.so.conf 加一行 /usr/local/lib，再执行如下
/sbin/ldconfig

安装 PHP

# 下载并解压
wget http://cn2.php.net/get/php-5.6.36.tar.gz/from/this/mirror -O php-5.6.36.tar.gz
tar zxvf php-5.6.36.tar.gz
cd php-5.6.36

# 编译安装
# 内存如果小于1G，增加 --disable-fileinfo
./configure --prefix=/usr/local/webserver/php --with-config-file-path=/usr/local/webserver/php/etc --with-mysql --with-mysqli --with-curl --with-mcrypt --with-gd --with-openssl --with-mhash --with-xmlrpc --with-gettext --with-bz2 --with-zlib --with-iconv-dir=/usr/local --with-freetype-dir --with-jpeg-dir --with-png-dir --with-libxml-dir --enable-xml --enable-bcmath --enable-shmop --enable-sysvsem --enable-inline-optimization --enable-mbregex --enable-mbstring --enable-gd-native-ttf --enable-pcntl --enable-sockets --enable-zip --enable-soap --enable-ftp --enable-exif --enable-opcache --enable-fpm --with-fpm-user=www --with-fpm-group=www --without-pear

# 如果遇到 undefined reference to `libiconv_open' 错误
# make 后面增加 ZEND_EXTRA_LIBS='-liconv'
make ZEND_EXTRA_LIBS='-liconv'
make install

# 创建配置文件
cp php.ini-production /usr/local/webserver/php/etc/php.ini

# 复制启动脚本到 init.d 目录并修改权限
cp sapi/fpm/init.d.php-fpm /etc/init.d/php-fpm
chmod 700 /etc/init.d/php-fpm

# 设置开机启动
chkconfig php-fpm on

# 查看开机启动服务
chkconfig --list

# 启动服务
service php-fpm start

# 停止服务
service php-fpm stop

# 重启服务
service php-fpm reload

# 创建软连接，方便全局执行 php-fpm start | stop | reload
ln -s /usr/local/webserver/php/bin/php /usr/bin/php
ln -s /etc/init.d/php-fpm /usr/bin/php-fpm

安装 PHP 扩展

# memcache 扩展
# memcached 支持 Binary Protocol，而 memcache 不支持，意味着 memcached 会有更高的性能
# https://pecl.php.net/package/memcached
# 3.x.x 支持 php 7，2.x.x 支持 php 5.2-5.6
wget https://pecl.php.net/get/memcached-2.2.0.tgz
tar zxvf memcached-2.2.0.tgz
cd memcached-2.2.0
/usr/local/webserver/php/bin/phpize
./configure --with-php-config=/usr/local/webserver/php/bin/php-config
make
make install

# 如果需要再本地缓存业务侧数据，安装 apcu
# apc 包含 opcode 缓存和 KV 数据缓存
# PHP 5.5.0 及后续版本中已经绑定了 OPcache 扩展，所以不需要安装 apc
# apcu 只包含 KV 数据缓存
# https://pecl.php.net/package/APCu
wget https://pecl.php.net/get/apcu-4.0.11.tgz
tar zxvf apcu-4.0.11.tgz
cd apcu-4.0.11
/usr/local/webserver/php/bin/phpize
./configure --with-php-config=/usr/local/webserver/php/bin/php-config
make
make install

# 图片处理 ImageMagick 扩展
# https://pecl.php.net/package/imagick
wget https://pecl.php.net/get/imagick-3.4.3.tgz
tar zxvf imagick-3.4.3.tgz
cd imagick-3.4.3
/usr/local/webserver/php/bin/phpize
./configure --with-php-config=/usr/local/webserver/php/bin/php-config
make
make install

修改 php.ini 配置文件

; vi /usr/local/webserver/php/etc/php.init

; 该选项设置为 On 时，将在所有的脚本中使用输出控制
output_buffering = On

; 将 PHP 所能打开的文件限制在指定的目录树
open_basedir = /data/htdocs/:/tmp/

; 禁用函数
disable_functions = system,passthru,shell_exec,escapeshellarg,escapeshellcmd,proc_close,proc_open,proc_get_status,dl,chroot,show_source,syslog,readlink,symlink,popepassthru,stream_socket_server

; 禁止暴露 PHP 被安装在服务器上
expose_php = Off

; 禁止错误信息输出
display_errors = Off

; 错误信息记录到服务器错误日志
log_errors = On

; 设置脚本错误将被记录到的文件
; 该文件必须是web服务器用户可写的
; mkdir /data/logs
; touch /data/logs/php_error.log
; chown www:www /data/logs/php_error.log
error_log = /data/logs/php_error.log

; 传递给存储处理器的参数
session.save_path = "/tmp"

; 防止 Nginx 文件类型错误解析漏洞
cgi.fix_pathinfo = 0

; 文件上传临时目录
upload_tmp_dir = /tmp

; 时区
date.timezone = "Asia/Shanghai"

; 允许使用 PHP 代码开始标志的缩写形式
short_open_tag = On

; php 扩展目录
; php 5.2
; extension_dir = "/usr/local/webserver/php/lib/php/extensions/no-debug-non-zts-20060613/"
; php 5.4
; extension_dir = "/usr/local/webserver/php/lib/php/extensions/no-debug-non-zts-20100525/"
; php 5.5
; extension_dir = "/usr/local/webserver/php/lib/php/extensions/no-debug-non-zts-20121212/"
extension_dir = "/usr/local/webserver/php/lib/php/extensions/no-debug-non-zts-20131226/"

; 文件结尾添加扩展配置，按需添加
[apcu]
extension = "apcu.so"
apc.enabled = on
apc.shm_size = 128M
; apc.enable_cli = on
[memcached]
extension = "memcached.so"
[imagick]
extension = "imagick.so"
[opcache]
zend_extension="opcache.so"
opcache.enable=1
; 具体参数配置根据实际情况，默认不配置
; opcache.memory_consumption=128
; opcache.interned_strings_buffer=8
; opcache.max_accelerated_files=4000
; opcache.revalidate_freq=60
; opcache.fast_shutdown=1
; opcache.enable_cli=1

修改 php-fpm.conf 配置文件

; cp /usr/local/webserver/php/etc/php-fpm.conf.default /usr/local/webserver/php/etc/php-fpm.conf
; vi /usr/local/webserver/php/etc/php-fpm.conf
; 查找并修改如下配置，其他保持默认

; 错误日志的位置
error_log = /data/logs/php-fpm.log
; 错误级别
log_level = error
; 如果子进程在设定的时间内收到该参数设定次数的 SIGSEGV 或者 SIGBUS退出信息号，则FPM会重新启动
emergency_restart_threshold = 10
; 用于设定平滑重启的间隔时间
emergency_restart_interval = 1m
; 设置子进程接受主进程复用信号的超时时间
process_control_timeout = 5s
; 设置 FPM 在后台运行
daemonize = yes
; 设置允许连接到 FastCGI 的服务器 IPV4 地址
listen.allowed_clients = 127.0.0.1
; 子进程的数量是固定的
pm = static
; pm 设置为 static 时表示创建的子进程的数量
pm.max_children = 64
; 设置启动时创建的子进程数目。仅在 pm 设置为 dynamic 时使用
pm.start_servers = 10
; 设置空闲服务进程的最低数目。仅在 pm 设置为 dynamic 时使用
pm.min_spare_servers = 10
; 设置空闲服务进程的最大数目。仅在 pm 设置为 dynamic 时使用
pm.max_spare_servers = 30
; 设置每个子进程重生之前服务的请求数
pm.max_requests = 500
; FPM 状态页面的网址
pm.status_path = /phpfpm_status
; 设置单个请求的超时中止时间
request_terminate_timeout = 30
; 设置文件打开描述符的 rlimit 限制
rlimit_files = 65535
; 禁止输出错误信息
php_flag[display_errors] = off

启动 php

# 修改文件句柄数为 65535
ulimit -SHn 65535

# 启动 php-cgi 进程
# 监听 127.0.0.1 的 9000 端口
# 进程数为 64（如果服务器内存小于3GB，可以只开启64个进程）
# 用户为www
php-fpm start

安装 nginx

wget http://nginx.org/download/nginx-1.14.0.tar.gz
tar zxvf nginx-1.14.0.tar.gz
cd nginx-1.14.0/
# --prefix=PATH：指定nginx的安装目录
# --user=name：设置nginx工作进程的用户
# --group=name：设置nginx工作进程的组
# --with-pcre：设置PCRE库的源码路径，如果已通过 yum 方式安装，使用 --with-pcre 自动找到库文件
# --with-http_stub_status_module：用来监控 Nginx 的当前状态
# --with-http_ssl_module：使用https协议模块
# --with-http_realip_module：通过这个模块允许我们改变客户端请求头中客户端IP地址值
# 更多配置参考 https://tengine.taobao.org/nginx_docs/cn/docs/install.html

./configure --prefix=/usr/local/webserver/nginx --user=www --group=www --with-pcre --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module
make
make install

ln -s /usr/local/webserver/nginx/sbin/nginx /usr/bin/

升级 nginx

# make 之后不要 make install
mv /usr/local/webserver/nginx/sbin/nginx /usr/local/webserver/nginx/sbin/nginx.old
cp objs/nginx /usr/local/webserver/nginx/sbin/
nginx -t
kill -USR2 `cat /usr/local/webserver/nginx/logs/nginx.pid`
kill -QUIT `cat /usr/local/webserver/nginx/logs/nginx.pid.oldbin`
nginx -v

修改 nginx.conf 配置文件

Nginx 配置文件主要分成四部分：main（全局设置）、server（主机设置）、upstream（上游服务器设置，主要为反向代理、负载均衡相关配置）和 location（URL匹配特定位置后的设置），每部分包含若干个指令。main 部分设置的指令将影响其它所有部分的设置；server 部分的指令主要用于指定虚拟主机域名、IP 和端口；upstream 的指令用于设置一系列的后端服务器，设置反向代理及后端服务器的负载均衡；location 部分用于匹配网页位置（比如，根目录“/”,“/images”,等等）。他们之间的关系式：server 继承 main，location 继承 server；upstream 既不会继承指令也不会被继承，它有自己的特殊指令，不需要在其他地方的应用。

# vi /usr/local/webserver/nginx/conf/nginx.conf
# 查找并修改如下配置，其他保持默认

# 运行的用户和用户组
user  www www;
# 全局错误日志和级别
error_log  /data/logs/nginx_error.log  error;
# 进程文件
pid  /usr/local/webserver/nginx/logs/nginx.pid;
# 单个进程打开的最多文件描述符数目
worker_rlimit_nofile 65535;

events 
{
    # 事件模型，epoll模型是Linux 2.6以上版本内核中的高性能网络I/O模型
    use epoll;
    # 单个进程可以处理的最大连接数
    worker_connections 65535;
}

http {
    # 日志名称和格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    # 允许客户端请求的最大单文件字节数
    client_max_body_size 8m;
    # 防止网络阻塞
    tcp_nopush on;
    # 开启gzip压缩
    gzip on;
    # 隐藏 nginx 的版本信息
    server_tokens off;
    # 包含其它自定义虚拟主机配置文件
    # mkdir /usr/local/webserver/nginx/conf/vhost
    include vhost/*.conf;

    # 注释掉 server { } 部分的默认配置
}

nginx 开机启动

# vi /etc/rc.local
/usr/local/webserver/nginx/sbin/nginx

# 测试
# nginx -t
# 重启和停止
# nginx -s reload | stop

Nginx 站点加密

创建脚本 vi /usr/local/sbin/htpasswd.pl，输入

#!/usr/bin/perl
use strict;
my $pw=$ARGV[0] ;
print crypt($pw,$pw)."\n";

生成密码

chmod +x /usr/local/sbin/htpasswd.pl
# passwd 是要生成的密码
/usr/local/sbin/htpasswd.pl passwd
# 创建完成后删除 htpasswd.pl

创建存放用户名和密码的文件 vi /usr/local/webserver/nginx/conf/.htpasswd
输入 user:passwd，user 是用户名，passwd 是刚才生成的密码

在需要加密的 server 或者 location 中增加如下配置

auth_basic	"login...";
auth_basic_user_file	/usr/local/webserver/nginx/conf/.htpasswd

https ssl 证书配置

如果需要创建一个服务器监控和管理站点，用来查看 phpinfo 或 nginx 状态等信息，建议将该站点设置密码和 https 访问

# 替换下面的 example.com 为你的服务器运维域名
mkdir -p /usr/local/webserver/nginx/conf/ssl
cd /usr/local/webserver/nginx/conf/ssl
openssl genrsa -des3 -out example.com.key 1024 795dsl
## 输入密码、确认密码
openssl req -new -key example.com.key -out example.com.csr
## 分别输入之前设置的密码、CN、Beijing、Beijing、example.com、example.com、*.example.com、邮箱、回车、回车
cp example.com.key example.com.key.org
openssl rsa -in example.com.key.org -out example.com.key
## 输入之前设置的密码
openssl x509 -req -days 365 -in example.com.csr -signkey example.com.key -out example.com.crt

在需要开启 https 的 server 或者 location 中增加如下配置

  ssl on;
  ssl_certificate ssl/example.com.crt;
  ssl_certificate_key ssl/example.com.key;

配置运维站点

替换下面的 example.com 为你的服务器运维域名
创建站点配置文件 vi /usr/local/webserver/nginx/conf/vhost/example.com

server
{
	listen 80 default;
	server_name	_;
	access_log  off;
	deny all;
}

server
{
	listen 8080 default;
	server_name	_;
	access_log  off;
	deny all;
}

server {
	listen 80;
	server_name example.com;
	index index.html index.htm index.php;
	root  /data/htdocs/example.com;

	location / {
		rewrite ^(.*) https://$server_name$1 permanent;
	}
	access_log  off;
}

server
{
	listen	443;
	server_name  example.com;
	if ($host != 'example.com') {
		rewrite	^/(.*)$	http://www.example.com/	permanent;
	}
	index index.html index.htm index.php;
	root  /data/htdocs/example.com;

	ssl on;
	ssl_certificate ssl/example.com.crt;
	ssl_certificate_key ssl/example.com.key;
	
	auth_basic	"login...";
	auth_basic_user_file  /usr/local/webserver/nginx/conf/.htpasswd;

	location /status {
		stub_status on;
	}

	location /phpfpm_status {
		fastcgi_pass  127.0.0.1:9000;
		fastcgi_index index.php;
		fastcgi_param  HTTPS on;
		include fastcgi.conf;	
	}

	location ~ \.(php|php5)?$
	{      
		fastcgi_pass  127.0.0.1:9000;
		fastcgi_index index.php;
		fastcgi_param  HTTPS on;
		include fastcgi.conf;
	}
	
	location ~ \.(gif|jpg|jpeg|png|bmp|swf|js|css)$
	{
		expires      30d;
	}

	access_log  off;
}

创建站点目录 mkdir /data/htdocs/example.com，创建以下文件
index.html

<html>
<head>
<title>example.com</title>
</head>
<body>
<ul>
<li><a href="/status" target="_blank">status</a></li>
<li><a href="/phpfpm_status" target="_blank">phpfpm_status</a></li>
<li><a href="/phpinfo.php" target="_blank">phpinfo</a></li>
<li><a href="/ocp.php" target="_blank">opcache</a></li>
<li><a href="/apc.php" target="_blank">apcu</a></li>
</ul>
<div><iframe src="/status" style="width: 400px; height: 100px;"></iframe></div>
<div><iframe src="/phpfpm_status" style="width: 400px; height: 240px;"></iframe></div>
</body>
</html>

phpinfo.php

<?phpinfo();?>

ocp.php，https://gist.github.com/ck-on/4959032
apc.php，https://github.com/krakjoe/apcu/blob/master/apc.php ，修改文件中的用户名和密码

重启并测试

nginx -s reload
php-fpm reload

上面配置的运维域名如果没有解析，可以到 /etc/hosts 中配置，然后访问 https://运维域名 看个页面输出是否正确；如果一切顺利，继续到 /usr/local/webserver/nginx/conf/vhost 中添加站点配置吧

MySQL 常见问题汇总

Thu, 12 Nov 2015 20:00:00 +0800

MySQL 5.6数据导入报 GTID 相关错误

从阿里云备份数据后还原到本地，用命令行 mysql -uroot -p --default-character-set=<character> -f <dbname> < <backup.sql> 方式会报如下错误：

ERROR 1839 (HY000) at line 24: @@GLOBAL.GTID_PURGED can only be set when @@GLOBAL.GTID_MODE = ON.

可以通过 source 方式导入解决。

$ mysql -uroot -p
$ use <dbname>;
$ source <backup.sql>;

OS X 通过 brew 安装 MySQL

# 安装
$ brew install mysql # 5.6
$ brew install mysql55 # 5.5
# 然后查看 brew info mysql 进行后续操作

修改 my.cnf 中的 datadir 切换数据库的存储位置。

https://gist.github.com/mralexho/6cd3cf8b2ebbd4f33165

查找本地 my.cnf 位置

$ sudo /usr/libexec/locate.updatedb
# 可能要等待几分钟，然后继续
$ locate my.cnf

Gitbook 的使用和常用插件

Mon, 09 Nov 2015 17:30:00 +0800

Gitbook 是基于 Node.js 的命令行工具，用来创建漂亮的电子书，它使用 Markdown 或 AsciiDoc 语法来撰写内容，用 Git 进行版本控制，且可以托管在 Github 上。Gitbook 可以将作品编译成网站、 PDF、 ePub 和 MOBI 等多重格式。

如果你不擅长自己搭建 gitbook 环境，还可以使用 gitbook.com 在线服务来创建和托管你的作品，他们还提供了基于桌面的编辑器。

如何使用

首先在全局安装 gitbook 客户端工具：

$ npm install gitbook-cli -g

然后在你的作品目录中创建两个必需的文件 README.md 和 SUMMARY.md，README.md 是作品的介绍，SUMMARY.md 是作品的目录结构，里面要包含一个章节标题和文件索引的列表：

# Summary

This is the summary of my book.

* [section 1](section1/README.md)
    * [example 1](section1/example1.md)
    * [example 2](section1/example2.md)
* [section 2](section2/README.md)
    * [example 1](section2/example1.md)

根据 SUMMARY.md 的目录结构初始化各个章节文件：

$ gitbook init

运行服务，在编辑内容后实时预览：

$ gitbook serve

服务器启动后，浏览器打开 http://localhost:4000 查看，撰写完后可以生成静态网站用来发布：

$ gitbook build

使用插件

Gitbook 本身功能丰富，但同时可以使用插件来进行个性化定制。Gitbook 插件里已经有100多个插件，可以在 book.json 文件的 plugins 和 pluginsConfig 字段添加插件及相关配置，添加后别忘了进行安装。

// book.json
{
  "title": "Webpack 中文指南",
  "description": "Webpack 是当下最热门的前端资源模块化管理和打包工具，本书大部分内容翻译自 Webpack 官网。",
  "language": "zh",
  "plugins": [
    "disqus",
    "github",
    "editlink",
    "prism",
    "-highlight",
    "baidu",
    "splitter",
    "sitemap"
  ],
  "pluginsConfig": {
    "disqus": {
      "shortName": "webpack-handbook"
    },
    "github": {
      "url": "https://github.com/zhaoda/webpack-handbook"
    },
    "editlink": {
      "base": "https://github.com/zhaoda/webpack-handbook/blob/master/content",
      "label": "编辑本页"
    },
    "baidu": {
        "token": "a9787f0ab45d5e237bab522431d0a7ec"
    },
    "sitemap": {
        "hostname": "http://zhaoda.net/"
    }
  }
}

# 安装插件
$ gitbook install ./

常用插件

editlink

内容顶部显示 编辑本页 链接。

在每个页面顶部和底部添加广告或任何自定义内容。

splitter

在左侧目录和右侧内容之间添加一个可以拖拽的栏，用来调整两边的宽度。

image-captions

抓取内容中图片的 alt 或 title 属性，在图片下面显示标题。

github

在右上角显示 github 仓库的图标链接。

anchors

标题带有 github 样式的锚点。

chart

使用 C3.js 图表。

styles-sass

使用 SASS 替换 CSS。

styles-less

使用 LESS 替换 CSS。

ga

添加 Google 统计代码。

disqus

添加 disqus 评论插件。

sitemap

生成站点地图。

latex-codecogs

使用数学方程式。

mermaid

使用流程图。

book-summary-scroll-position-saver

自动保存左侧目录区域导航条的位置。

默认的分享插件。

fontsettings

默认的字体、字号、颜色设置插件。

search

默认搜索插件。

tbfed-pagefooter

自定义页脚，显示版权和最后修订时间。

prism

基于 Prism 的代码高亮。

atoc

插入 TOC 目录。

ace

插入代码高亮编辑器。

highlight

默认的代码高亮插件，通常会使用 prism 来替换。

github-buttons

显示 github 仓库的 star 和 fork 按钮。

sectionx

分离各个段落，并提供一个展开收起的按钮。

mcqx

使用选择题。

include-codeblock

通过引用文件插入代码。

fbqx

使用填空题。

spoiler

隐藏答案，当鼠标划过时才显示。

锚点导航。

youtubex

插入 YouTube 视频。

redirect

页面跳转。

expandable-chapters

收起或展开章节目录中的父节点。

baidu

使用百度统计。

duoshuo

使用多说评论。

jsfiddle

插入 JSFiddle 组件。

jsbin

插入 JSBin 组件。

开发插件

最好先查看别人的插件是怎么做的，然后再看官方文档。

Webpack 中文指南

Wed, 04 Nov 2015 00:26:00 +0800

Webpack 是迄今为止我觉得最棒的前端模块化工具，在我日常的开发工作中，也摸索出了一套基于 webpack 的前端构建工作流程。但是 webpack 的使用和配置确实有些复杂，尤其是它众多的 loader、插件和配置信息，如果能灵活使用，就能解决之前前端开发工作中许多难题。

Webpack 抽象了文件的概念，所有文件（资源）都可以视作模块，尤其是打包后可以生成带有版本号和依赖关系的文件包，可以十分方便的完成生产环境的部署工作。

在学习 Webpack 的过程中，我写了一本关于其使用的中文指南，目前已经完成了一些基础章节，接下来会继续添加一些进阶的内容，同时欢迎有兴趣的同学一起参与撰写和翻译官方文档。

这本《Webpack 中文指南》使用 gitbook 撰写，托管在 github 仓库 https://github.com/zhaoda/webpack-handbook ，并通过网站 http://zhaoda.net/webpack-handbook/ 进行发布浏览。

Browserify 使用指南

Fri, 16 Oct 2015 14:28:00 +0800

让浏览器加载Nodejs模块

目前NPM上有二十多万个NodeJS模块，它们都是通过CMD的方式打包的，除了特定的可以使用CMD模块加载器加载的模块，大部分nodejs模块无法直接使用到浏览器环境中。

Browserify是一个供浏览器环境使用的模块打包工具，像在node环境一样，也是通过require('modules')来组织模块之间的引用和依赖，既可以引用npm中的模块，也可以引用自己写的模块，然后打包成js文件，再在页面中通过<script>标签加载。

当然对于很多NodeJS模块，比如涉及到io操作的模块，就算通过browserify打包后肯定也无法运行在浏览器环境中，这种情况下就会用到为它们重写的支持浏览器端的分支模块，可以在browserify search搜索到这些模块。

用例

比如写一个入口main.js文件，使用require()来引用其它模块，包括相对目录中的'./foo.js'和'../lib/bar.js'，还有在node_modules/目录中的名为'gamma'的模块。

browserify通过node’s module lookup algorithm来查找node_modules/中的模块）

// main.js
var foo = require('./foo.js');
var bar = require('../lib/bar.js');
var gamma = require('gamma');

var elem = document.getElementById('result');
var x = foo(100) + bar('baz');
elem.textContent = gamma(x);

众所周知，这些被引用的模块会用通过module.exports或exports输出它们的功能接口：

// foo.js
module.exports = function (n) { return n * 111 }

接下来就可以用browserify命令对它们进行打包了:

$ browserify main.js > bundle.js

main.js和它所引用的模块会按依赖序列整体打包到bundle.js。

browserify使用required来查找require()依赖队列。

接下来，就可以在html中加载这个文件<script src="bundle.js"></script>来运行了。

安装Browserify

$ npm install -g browserify

通过命令行使用

Usage: browserify [entry files] {OPTIONS}

常用选项:

    --outfile, -o  指定打包后的输出文件
                   如果不指定，将输到stdout，比如shell

    --require, -r  通过模块名或文件路径指定需要打包到bundle中的其他模块
                   Optionally use a colon separator to set the target

      --entry, -e  入口文件

     --ignore, -i  打包过程中忽略依赖的某个文件，当成空模块打包，引用它不会报错

    --exclude, -u  打包过程中排除依赖的某个文件，比忽略选项更严格，引用它会报错

   --external, -x  指定某个文件不要打包到bundle，它可能会打包在其他的bundle中，比如jquery会打包到公共的bundle中

  --transform, -t  指定打包过程中使用的转换模块

    --command, -c  指定打包过程中使用的命令行转换

  --standalone -s  生成UMD模式的bundle模块，可以在AMD、CMD中使用

       --debug -d  生成source maps，并被注释到bundle.js的尾部

       --help, -h  显示帮助

高级选项:

  --insert-globals, --ig, --fast    [default: false]

    如果设置为true，会跳过代码分析，强制在每个模块的闭包作用域中插入如下参数
    process, global, __filename, and __dirname

    优点: 打包速度快
    缺点: 生成多余的参数

  --insert-global-vars, --igv

    需要在代码分析中检测和定义的全局变量，需要和--insert-globals一起使用
    默认包括 __filename,__dirname,process,Buffer,global 用逗号分隔

  --detect-globals, --dg            [default: true]

    在代码分析过程中检测全局变量 process, global, __filename, and __dirname

    优点: 像npm模块那样工作
    缺点: 打包速度慢

  --ignore-missing, --im            [default: false]

    忽略 `require()` 引用

  --noparse=FILE

    对于默写确定不包含`require()`的文件，忽略他们的解析过程（比如jquery），加快打包速度

  --no-builtins

    如果打包后的文件要在node环境中使用，请使用这个选项，保证node内置模块不被打包到bundle中

  --no-commondir

    不是用相对路径，__filename,__dirname会被解析成绝对路径

  --no-bundle-external

    不打包扩展模块

  --bare

    --no-builtins --no-commondir --insert-global-vars "__filename,__dirname" 的别名
    如果bundle在node环境中运行，请使用--bare

  --no-browser-field, --no-bf

    忽略package.json中的browser属性
    如果bundle在node环境中运行

  --node

    --bare --no-browser-field 的别名

  --full-paths

    所有模块都是用绝对路径进行引用

  --deps

    输出模块的依赖序列（一个数组）

  --list

    输出所有模块的路径列表

  --extension=EXTENSION

    指定有效的模块文件扩展名

  --global-transform=MODULE, -g MODULE

    指定一个全局的转换模块

  --plugin=MODULE, -p MODULE

    注册一个插件模块

如何在转换模块和插件再插入参数项：

  使用subarg语法在中括号中插入子命令，比如：

    -t [ foo -x 3 --beep ]

  会这样执行

    foo(file, { x: 3, beep: true })

nodejs内置模块的转换

理想情况下，大部分不涉及io操作的模块可以在浏览器中直接运行。

对于nodejs内置模块，在require()它们的时候，会被转换成如下模块来打包，以适配浏览器环境。

另外, 如果是用到了如下5个全局变量，它们会在打包过程中被改写成可以适配浏览器环境的。

process
Buffer
global 全局变量window
__filename - 文件名
__dirname - 文件路径

其他用例

在全局作用域中（模块外部）引用指定模块

$ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

在页面中直接引用这些外部模块

<script src="bundle.js"></script>
<script>
  var through = require('through');
  var duplexer = require('duplexer');
  var myModule = require('my-module');
  /* ... */
</script>

导出source maps文件

使用exorcist导出.js.map文件

$ browserify main.js --debug | exorcist bundle.js.map > bundle.js

导出多个包

如果多个页面的打包结果中包含公共的模块，可以将公共模块（common.js）单独打包出来，以节省请求流量并优化缓存策略

# beep.js
var robot = require('./robot.js');
console.log(robot('beep'));

# boop.js
var robot = require('./robot.js');
console.log(robot('boop'));

这两个文件都引用了robot.js

# robot.js
module.exports = function (s) { return s.toUpperCase() + '!' };

# 把公共的模块打包成common.js
$ browserify -r ./robot.js > static/common.js
$ browserify -x ./robot.js beep.js > static/beep.js
$ browserify -x ./robot.js boop.js > static/boop.js

如何引用？

<!--beep.html-->
<script src="common.js"></script>
<script src="beep.js"></script>

<!--boop.html-->
<script src="common.js"></script>
<script src="boop.js"></script>

上面这个用例，还可以用插件解决，会更方便

api

Browserify本身也是一个nodejs模块，提供的方法大致和上面介绍的命令行选项相同，具体的api请参考browserify methods，这里不再敖述。

var browserify = require('browserify');
var b = browserify();
b.add('./browser/main.js');
b.bundle().pipe(process.stdout);

events api

//当文件被进行打包时出发，可以用来监听文件变化来重新进行打包
b.on('file', function (file, id, parent) {})
b.pipeline.on('file', function (file, id, parent) {})

// 当每个package.json被读取时触发
b.on('package', function (pkg) {})
b.pipeline.on('package', function (pkg) {})

// 当执行`.bundle()`时触发
b.on('bundle', function (bundle) {})

// 当执行`.reset()`时触发
b.on('reset', function () {})

// 当一个文件被转换时触
b.on('transform', function (tr, file) {})
b.pipeline.on('transform', function (tr, file) {})

package.json

browserify会先通过package.json中的"main"属性来查找模块入口，如果没有"main"属性，就在目录中搜索"index.js"文件。当然，package.json中还定义了一些browserify特有的属性：

browser属性

“browser“属性用来优先指定browserify打包是的模块入口文件，这样可以和"main"属性区分开

"browser": "./browser.js"

还可以指定细分的打包替换文件

"browser": {
  "fs": "level-fs",
  "./lib/ops.js": "./browser/opts.js"
}

browserify.transform

在package.json中指定转换模块，可以打包过程中自动执行

"browserify": { "transform": [ "brfs" ] }

使用插件

对于一些更先进的用例，转换模块并不能满足需求，插件是更适合的选择。插件是以包实例为其第一个参数，其他属性作为后面的参数。插件可以用来做一些转换模块做不到的花哨功能。比如factor-bundle插件可以用来自动生成多个入口文件共用的common.js模块。

$ browserify x.js y.js -p [ factor-bundle -o bundle/x.js -o bundle/y.js ] \
  > bundle/common.js

参考链接

移动端 HTML5 <video> 视频播放优化实践

Thu, 30 Oct 2014 22:59:00 +0800

遇到的挑战

移动端HTML5使用原生<video>标签播放视频，要做到两个基本原则，速度快和体验佳，先来分析一下这两个问题。

下载速度

以一个8s短视频为例，wifi环境下提供的高清视频达到1000kbps，文件大小大约1MB；非wifi环境下提供的低码率视频是500kbps左右，文件大小大约500KB；参考QzoneTouch多普勒测速，2g网络的平均速度是14KB/s，那么下载一个低码率视频耗时35s；那么要想流畅播放视频，就需要一个加载等待的过程，这个过程要有明确的反馈，不能让用户有“坏掉了”的感觉。

多普勒测速数据参考

#	dns(s)	conn(s)	rtt(s)	tran(kb/s)
2g	3.85785	2.33482	2.57478	14.0374
3g	1.60643	0.743109	0.608047	60.1967
wifi	0.986921	0.550208	0.444332	70.8728

用户体验

视频是否可以自动播放，是否能循环播放，是否能显示下载进度，播放的时候如何隐藏控制条，暂停的时候又能显示出来呢。这些问题看上去貌似简单，但是由于PC/iOS/Android这些不同平台、不同的浏览器内核、甚至相同内核的不同版本，所实现的<video>属性、方法和事件差异较大，解决兼容性问题又给开发造成了很大困扰。

分析原因

事件差异

下面是播放一个短视频，在不同平台触发事件和获取属性的差异表现。

PC

#	event	readyState	currentTime (s)	buffered (s)	duration (s)	视频状态
1	loadstart	NOTHING	0	-	-	-
2	suspend	NOTHING	0	-	-	-
3	play	NOTHING	0	-	-	-
4	waiting	NOTHING	0	-	-	-
5	durationchange	METADATA	0	5.35	7.91	获取到视频长度
6	loadedmetadata	METADATA	0	0.66	7.91	获取到元数据
7	loadeddata	ENOUGHDATA	0	0.66	7.91	-
8	canplay	ENOUGH_DATA	0	0.66	7.91	-
9	playing	ENOUGH_DATA	0	0.66	7.91	开始播放
10	canplaythrough	ENOUGH_DATA	0	0.66	7.91	可以流畅播放
11	progress	ENOUGH_DATA	0.11	3.68	7.91	持续下载
12	timeupdate	ENOUGH_DATA	0.14	4.44	7.91	播放进度变化
…	…	…	…	…	…	…
23	progress	ENOUGH_DATA	1.77	7.91	7.91	下载完毕
24	suspend	ENOUGH_DATA	1.77	7.91	7.91	-
25	timeupdate	ENOUGH_DATA	1.9	7.91	7.91	继续播放中
…	…	…	…	…	…	…
48	timeupdate	ENOUGH_DATA	7.7	7.91	7.91	-
49	timeupdate	ENOUGH_DATA	0	7.91	7.91	-
50	seeking	METADATA	0	7.91	7.91	-
51	waiting	METADATA	0	7.91	7.91	-
52	timeupdate	ENOUGH_DATA	0	7.91	7.91	-
53	seeked	ENOUGH_DATA	0	7.91	7.91	播放完毕进度回到起点
54	canplay	ENOUGH_DATA	0	7.91	7.91	-
55	playing	ENOUGH_DATA	0	7.91	7.91	循环播放
56	canplaythrough	ENOUGH_DATA	0	7.91	7.91	-
57	timeupdate	ENOUGH_DATA	0.19	7.91	7.91	-
…	…	…	…	…	…	…

iOS

#	event	readyState	currentTime (s)	buffered (s)	duration (s)	视频状态
1	loadstart	NOTHING	0	-	-	-
2	play	NOTHING	0	-	-	-
3	waiting	NOTHING	0	-	-	-
4	durationchange	METADATA	0	-	7.91	获取到视频长度
5	loadedmetadata	METADATA	0	-	7.91	获取到元数据
6	loadeddata	ENOUGHDATA	0	-	7.91	-
7	canplay	ENOUGH_DATA	0	7.91	7.91	-
8	canplaythrough	ENOUGH_DATA	0	7.91	7.91	可以流畅播放
9	playing	ENOUGH_DATA	0	7.91	7.91	开始播放
10	progress	ENOUGH_DATA	0	7.91	7.91	下载完毕
11	suspend	ENOUGH_DATA	0	7.91	7.91	-
12	timeupdate	ENOUGH_DATA	0.02	7.91	7.91	播放进度变化
…	…	…	…	…	…	…
43	timeupdate	ENOUGH_DATA	7.8	7.91	7.91	-
44	timeupdate	ENOUGH_DATA	0	7.91	7.91	-
45	seeked	ENOUGH_DATA	0	7.91	7.91	播放完毕进度回到起点
46	timeupdate	ENOUGH_DATA	0.22	7.91	7.91	循环播放
…	…	…	…	…	…	…

Android

#	event	readyState	currentTime (s)	buffered (s)	duration (s)	视频状态
1	loadstart	NOTHING	0	-	-	-
2	play	NOTHING	0	-	-	-
3	waiting	NOTHING	0	0	-	-
4	durationchange	ENOUGH_DATA	0	0	0	-
5	durationchange	ENOUGH_DATA	0	0	7.91	获取到视频长度
6	loadedmetadata	ENOUGH_DATA	0	0	7.91	获取到元数据
7	loadeddata	ENOUGHDATA	0	0	7.91	-
8	canplay	ENOUGH_DATA	0	0	7.91	-
9	canplaythrough	ENOUGH_DATA	0	0	7.91	-
10	playing	ENOUGH_DATA	0	0	7.91	-
11	timeupdate	ENOUGH_DATA	0	0	7.91	-
12	progress	ENOUGH_DATA	0	3.57	7.91	下载中
13	timeupdate	ENOUGH_DATA	0.2	6.89	7.91	开始播放
14	progress	ENOUGH_DATA	0	7.91	7.91	下载完毕
…	…	…	…	…	…	…
49	timeupdate	ENOUGH_DATA	7.79	7.91	7.91	-
50	progress	ENOUGH_DATA	7.87	7.91	7.91	-
51	timeupdate	ENOUGH_DATA	0	7.91	7.91	-
52	seeking	ENOUGH_DATA	0	7.91	7.91	播放完毕进度回到起点
53	timeupdate	ENOUGH_DATA	0	7.91	7.91	-
54	seeked	ENOUGH_DATA	0	7.91	7.91	循环播放失败卡住了
55	progress	ENOUGH_DATA	0	7.91	7.91	-
56	stalled	ENOUGH_DATA	0	7.91	7.91	-

一些常用且需要重点关注的<video>事件

event	iOS	Android
play	只是要播放视频，响应的是video.play()方法，并不代表已经开始播放	和iOS一样，仅是响应video.play()方法
durationchange	会执行一次，一定会获取到视频的duration	可能会执行多次，只有最后一次才能获取到真实的duration，前面的duration都是0；但低版本Android可能获取到的duration是0或1；（本文提到的低版本Android大部分是4.1以下）
canplay	可以认为是视频元素没有问题，可以运行，没有更多含义了，基本用不上	同iOS
canplaythrough	会有明确的缓冲，表示可以流畅播放了；	没有什么用，视频仍然会卡住，数据可能还没有开始加载；
playing	明确表示播放开始了；	依然没有用，视频可能并没有开始播放；
progress	有明确的下载，可以获取到当前的buffer，并且全部下载完毕后不在触发；	不一定有明确的数据下载，并且全部下载完毕后依然继续触发；
timeupdate	会有明确的进度变化，可以获取到currentTime；	进度不一定变化，currentTime可能总是0，但是第一次有currentTime变化的timeupdate事件一定代表了视频开始播放了；
error	iOS中会有明确的错误抛出；	Android中某些浏览器会莫名其妙的抛出error；
stalled	网络状况不佳，导致视频下载中断；	在没有play之前，也可能会抛出该事件。

属性差异

attributes	iOS	android
poster 封面图片	支持，但是加载速度明显比在<img>中要慢；	不一定支持（浏览器厂商的实现标准不统一）；
preload 预加载	iPhone不支持；	可能支持；
autoplay 自动播放	iPhone Safari中不支持，但在webview中可能被开启；iOS开发文档明确说明蜂窝网络下不允许autoplay；	可能支持；
loop 循环播放	支持	可能支持；
controls 控制条	支持，但是需要开始播放了才显示	基本都支持显示或者不显示
width和height	一定给出明确的属性设置，切不能为0；	如果不设置，仅仅通过CSS样式去控制视频大小，可能会导致标签失效。

其他怪异bug和不友好表现

iOS	android
物理位置覆盖在<video>区域上的元素，click和touch等事件会失效，比如一个<a>链接如果覆盖在<video>上，那么点击后没有任何效果。	-
iOS8.0+中，单页面播放视频超过16个，再播放的视频全部MediaError解码异常无法播放。	-
iPhone的Safari会弹出一个全屏的播放器来播放视频，iPad则支持内联播放。iOS7+ 如果webview（比如微信）开启了`webview.allowsInlineMediaPlayback = YES;`，可以通过设置`webkit-playsinline`属性支持内联播放；	支持内联播放，但某些厂商会用自己的播放器劫持原生的视频播放；
下载视频时，会先发送一个2字节的请求来获取视频元数据（比如时长），然后再不断的发送分包续传（206）请求来下载视频，抓包显示请求数和请求量至少有一倍的冗余（x2），这个严重的bug在iOS8中有明显的修复，但是分包的206请求仍然会有冗余数据的下载，浪费了流量。	比iOS的处理方式好，没有第一个2字节请求，没有流量损耗；
-	低版本Android（<=4.0.4）中，<video>如果在有相对和决定定位的层中，可能会导致整个页面错位。
-	某些浏览器厂商会劫持<video>，用其“自己”的播放器来播放视频，“破坏”了产品本身的播放体验，那么只能case by case的解决了。
加载视频时没有进度提示，视觉上看不出是播放完了还是卡住了；	加载视频时，大都会显示一个自带的loading UI（菊花）。

最佳实践

视频初始化

如果将一个<video>直接显示在页面中，那么就会看到各种五花八门的播放器初始效果；

这显然不是一个好的视觉体验，那么通常的做法是制作一个模拟的视频播放视图，比如一个封面加一个播放按钮。

而真实的<video>视频元素要隐藏起来，如何隐藏呢？最好不要用{display: none}或者{width:0;height:0;}的方式，因为这样视频元素会处于未激活的状态，给后续的处理带来麻烦。最佳的方式是将视频设置成1x1像素大小，放在视觉边缘的位置。

<!--iOS-->
<video webkit-playsinline width="1" height="1" class="vplayinside notaplink" x-webkit-airplay controls loop="loop" src="<%=src%>"></video>

<!--Android-->
<video width="1" height="1" controls loop="loop" src="<%=src%>"></video>

自动播放

autoplay的支持依赖内核和网络状况，比如iPhone在蜂窝网络下明确禁用了autoplay；

经过试验，在没有明确的用户操作的情况下，直接通过video.play()也是无法激活播放的；

并且在产品设计上，自动播放也不是一个舒服的用户体验，所以产品设计上尽量避免使用自动播放。

点击播放

之前提到，视频最好通过1px大小隐藏起来，那么这时如何触发播放呢？

经过试验，当在明确的用户操作（touch、click）时，通过这些用户行为事件的回调函数，用video.play()是可以触发视频播放的，那么能否在用户操作后，再去同步的创建和播放视频呢？答案是肯定的，这无疑是一个视频元素初始化的最佳实践，但是有些差异需要注意。

iOS6+

可以在用户的touch时间中动态创建并播放视频。

iOS < 6

可以在用户的touch时间中动态创建视频，但不能播放；要再追加一个click事件来启动播放；也就是说，给伪造的视频播放按钮同时绑定tap和click事件，在tap的时候创建，在之后300毫秒的click中去播放。

Android

大部分高版本Android可以像iOS6+那样去处理，但是低版本的不行，必须要通过click事件去传递video.play()，为了保持兼容，最好是用帮tap和click两个事件来分别完成视频的初始化和播放。

我们还发现，有些低版本Android中，无法通过video.play()来播放视频，必须有真实的用户点击视频元素才能播放；这种情况，有一个技巧就是在tap的时候初始化并放大视频覆盖在播放视图中，让300毫秒后的真实点击行为穿透点击在视频元素上来实现播放。

循环播放

如果视频需要循环播放，那么就增加loop属性，是否能循环播放就看浏览器是否支持了，因为还没有找到hack技巧来强制循环播放；

即使，在不支持循环播放的Android中，通过监听seeked事件知道了播放进度到了终点或起点暂停了，此时也无法通过video.play()来让视频重新播放。

监控下载进度

如何获取视频时长和已经下载的时长？

// 视频时长
var duration = video.duration

// 获取视频已经下载的时长
function getEnd(video) {
  var end = 0
  try {
    end = video.buffered.end(0) || 0
    end = parseInt(end * 1000 + 1) / 1000
  } catch(e) {
  }
  return end
}

progress事件表示视频在加载，但是它的触发频率和时机并不规律，最佳做法是通过一个定时器去实时获取end，当end >= duration时，表示已经下载完毕，再终止定时器。

var timer = setInterval(function() {
  var end = getEnd(video),
      duration = video.duration

  if(end < duration) {
    return
  }

  clearInterval(timer)
}, 1000)

全部下载后再播放

假设播放短视频，如果网络不佳，会造成播放断断续续，在iOS中这种停顿还没有一个明确的等待提示，这不是一个好的体验，那么是否可以将视频全部下载完毕再播放呢？

在iOS中，可以在视频刚开始下载的时候马上暂停，此时下载还将继续，可以做一个loading的菊花告知视频正在加载，然后等到视频全部下载完再开始播放。

$(video).one('loadeddata', function() {
  // 暂停，但下载还在继续
  video.pause()

  // 启动定时器检测视频下载进度
  var timer = setInterval(function() {
    var end = getEnd(video),
        duration = video.duration

    if(end < duration) {
      return
    }
    
    var width = $(video).parent().width()

    // 下载完了，开始播放吧
    $(video).attr({
      width: width,
      height: width
    })
    video.play()

    clearInterval(timer)
  }, 1000)
})

缓冲播放——边下边播时，选择开始播放的最佳时间点

当视频越来越长或者网络慢时，等待视频全部下载完再播放也不是好的体验，最好能边下边播，缓冲到流畅状态就开始播放，那什么时候播放才是最佳时间点呢？

在iOS中，canplaythrough事件就是这个最佳时间点，它是通过动态计算缓冲量和下载速度得出的视频可以流畅播放的状态反馈。

canplaythrough event: The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.

注意：下载完再播放和缓冲播放只适用于iOS。

统计播放时间和播放次数

要统计实际的播放时间，要累加timeupdate事件变化的时间，再减去中间可能暂停的时间。

$video.on('playing', function() {
  // 开始播放是打点
  $video.attr('data-updateTime', +new Date())
})

$video.on('pause', function() {
  // 暂停播放时清除打点
  $video.removeAttr('data-updateTime')
})

// 累加播放时间
$video.on('timeupdate', function(event) {
  var $video = $(event.target),
      updateTime = parseInt($video.attr('data-updateTime') || 0),
      playingTime = parseInt($video.attr('data-playingTime') || 0),
      times = parseInt($video.attr('data-times') || 0),
      newtimes = 0,
      video = $video.get(0),
      duration = parseFloat($video.attr('data-duration') || 0),
      now = +new Date()
  
  // 播放时间
  playingTime = playingTime + now - updateTime
  
  // 播放次数
  newtimes = Math.ceil(playingTime / 1000 / duration)

  $video.attr('data-playingTime', playingTime)
  $video.attr('data-updateTime', now)
})

异常处理

对error事件做详细的上报；

对stalled事件做统计上报，并提示用户网络慢等。

参考数据

微视触屏版iOS视频测速

网络环境	视频码率	获取到视频时长时间点(s)	开始流畅播放时间点(s)	全部下载完毕时间点(s)	视频长度(s)
wifi	1000kbps	2.86	3.97	5.85	8.69
非wifi	500kbps	4.56	8	10.62	8.67

参考资料

HTML5 Video Events and API检测工具 http://www.w3.org/2010/05/video/mediaevents.html
W3C video 标准 http://www.w3.org/TR/html5/embedded-content-0.html#the-video-element
如何在iOS7+的webview中内联播放视频 http://darktalker.com/2014/play-video-inline-iphone-ios7
视频事件流水查看工具 http://z.weishi.qq.com/app/video.html
HTML5 VIDEO bytes on iOS http://www.stevesouders.com/blog/2013/04/21/html5-video-bytes-on-ios

微视 WebView 的 JSAPI 介绍

Tue, 28 Oct 2014 17:35:00 +0800

简介

和微信的JSAPI一样，微视的webview中也内置了一套jsapi，当webview打开后，会初始化jsapi，初始化完成后会派发给document一个WeishiJSBridgeReady事件并构建好window.WeishiJSBridge对象，然后就可以使用window.WeishiJSBridge.invoke方法来调用jsapi的具体功能。

初始化

// 定义微视JSAPI
var WSBridge = function() {
  if(typeof arguments[0] === 'function') {
    var callback = arguments[0]
    if(window.WeishiJSBridge && window.WeishiJSBridge.invoke) {
      WSBridge.build.call(window.WeishiJSBridge, callback)
    } else {
      $doc.on('WeishiJSBridgeReady', function() {
        WSBridge.build.call(window.WeishiJSBridge, callback)
      })
    }

    return
  }

  var params = Array.prototype.slice.call(arguments)

  if(WSBridge.wait) {
    WSBridge.wait.push(params)
  } else {
    setTimeout(function() {
      WSBridge.apply(this, params)
    }, 1000)
  }
}

WSBridge.wait = []

WSBridge.build = function(callback) {
  var wait = WSBridge.wait

  this.init(function(message, responseCallback) {})

  WSBridge = this.invoke

  $.each(wait, function(i, params) {
    WSBridge.apply(window, params)
  })

  callback.call(this)
}

WSBridge(function() {
  // 微视jsapi加载成功
})

使用

// apiname：jsapi接口名称
// params：接口参数
// callback：回调函数
WeishiJSBridge.invoke(apiname, params, callback)

返回值

返回值通过回调函数的参数进行返回，类型是json对象，旧版微视android客户端返回的是json字符串，需要用JSON.parse兼容。

// 返回值实例
{
  "code": 0, // 0为成功
  "response": { // 接入层返回的数据
    "ret": 0,
    "errcode": 0,
    "msg": "成功",
    "data": {
      // 接入层返回的数据
    }
  }
}

权限

目前微视jsapi只对内部qq.com、weishi.com 域开放，暂不支持外域接入申请。

数据请求类API

// 请求转发
// 将通常web侧的ajax请求，通过客户端的jsapi进行代理转发，
// 这个请求会带上登录态和加密的token，
// 来解决web侧无法获取登录态和加密的问题，更加安全可靠。
WeishiJSBridge.invoke('request.forward', {
  path: 'info/clientInfo.php', // 接入层的请求地址
  method: 'get', // get or post
  params: {} // 参数
})

页面跳转类型API

// 详情页
WeishiJSBridge.invoke('view.detail', {
  tweetid: '2002018099834136' // 微视id
})

// 客人页
WeishiJSBridge.invoke('view.profile', {
  uid: '1000047' // uid
})

// 频道页
WeishiJSBridge.invoke('view.channel', {
  name: '美女', // 频道名
  tweetid: '' // 定位到指定微视的微视id
})

// 标签页
WeishiJSBridge.invoke('view.tag', {
  name: '中国好声音', // 标签名
  tweetid: '' // 定位到指定微视的微视id
})

// 我的二维码名片
WeishiJSBridge.invoke('view.weblogin')

// 邀请好友
WeishiJSBridge.invoke('view.inviteFriends')

// 推荐关注默认
WeishiJSBridge.invoke('view.suggestedPeopleDefault')

// 推荐关注名人
WeishiJSBridge.invoke('view.suggestedPeopleStar')

// 推荐关注达人
WeishiJSBridge.invoke('view.suggestedPeoplePopular')

// 推荐关注朋友
WeishiJSBridge.invoke('view.suggestedPeopleFriends')

// 扫一扫
WeishiJSBridge.invoke('view.qrscan')

// 打开摄像头
WeishiJSBridge.invoke('view.camera')

// 打开长视频
WeishiJSBridge.invoke('view.camera.longvideo')

// 打开动态影集
WeishiJSBridge.invoke('view.camera.photo')

// 打开本地视频
WeishiJSBridge.invoke('view.camera.localvideo')

// 发现页
WeishiJSBridge.invoke('view.discovery')

// 新的朋友
WeishiJSBridge.invoke('view.newFriends')

// 独立的热门页面
WeishiJSBridge.invoke('view.popularweishi')

// 独立的频道页面
WeishiJSBridge.invoke('view.channelhomepage')

视图操作类API

// 关闭当前webview
WeishiJSBridge.invoke('action.closeWindow')

// 隐藏toolbar
WeishiJSBridge.invoke('action.hideToolbar')

// 显示toolbar
WeishiJSBridge.invoke('action.showToolbar')

// 设置页面标题
WeishiJSBridge.invoke('action.setTitle', {
  title: '新标题' // 标题
})

// 打开新页面
WeishiJSBridge.invoke('action.openURLInWindow', {
  url: 'http://weishi.com', // 页面地址
  hideToolbar: '1' // 是否隐藏toolbar
})

// 分享
WeishiJSBridge.invoke('action.share', {
  url: 'http://weishi.com', // 页面地址
  imgurl: 'http://mat1.gtimg.com/www/mb/webapp/weishi/image/medal/1002_detail.png', // 图片地址
  title: '一赞成名', // 标题
  content: '徽章分享' // 摘要
})

调试工具

http://z.weishi.qq.com/app/api.html

更新日志

日期	日志
2014-09-16	文档初始化
2014-09-19	增加分享功能api

微视 URI Scheme 介绍

Tue, 28 Oct 2014 17:25:00 +0800

微视APP统一资源标识符。

格式

<scheme name> : <path> [ ? <query> ]

<scheme name>：微视scheme协议名称，ios中是weishiiosscheme，android中是weishiandroidscheme；

<path>：页面路径；

<query>：可选项目，查询参数，用&隔开的键值对<key>=<value>。

功能

序号	资源	URI Scheme	支持版本
1	详情页	`<scheme name>`://detail?tweetid=微视id	2.7+
2	客人页	`<scheme name>`://userprofile?uid=uid	2.7+
3	频道页	`<scheme name>`://channel?name=频道名称&tweetid=定位到指定微视的微视id	2.7+
4	标签页	`<scheme name>`://tag?name=标签名称&tweetid=定位到指定微视的微视id	2.7+
5	我的二维码	`<scheme name>`://myqrcard	2.7+
6	邀请好友	`<scheme name>`://invitefriends	2.7+
7	推荐关注名人	`<scheme name>`://suggestedpeople?type=star	2.7+
8	推荐关注达人	`<scheme name>`://suggestedpeople?type=popular	2.7+
9	推荐关注朋友	`<scheme name>`://suggestedpeople?type=friends	2.7+
10	扫一扫	`<scheme name>`://qrscan	2.7+
11	拍摄	`<scheme name>`://opencamera	2.7+
12	发现页	`<scheme name>`://discovery	2.7+
13	新的朋友	`<scheme name>`://newfriends	2.7+
14	发现-热门	`<scheme name>`://popularweishi	2.7+
15	发现-频道	`<scheme name>`://channelhomepage	2.7+
16	勋章墙	`<scheme name>`://medalwall	2.7+
17	打开webview	`<scheme name>`://webview?url=打开的链接	2.7+
18	微视星语	`<scheme name>`://pickstar	2.8+

调试工具

http://z.weishi.qq.com/app/scheme.html

更新日志

日期	日志
2014-09-16	微视2.7版本最新支持
2014-10-28	微视2.8版本最新支持

NPM 国内镜像配置和 CNPM 使用

Sun, 13 Apr 2014 16:00:00 +0800

NPM镜像配置

通过 config 配置

```bash
$ npm config set registry http://r.cnpmjs.org
```

命令行临时指定

```bash
$ npm --registry http://r.cnpmjs.org install koa
```

编辑 ~/.npmrc

```
registry = http://r.cnpmjs.org
```

其他npm配置

```bash
$ npm config set strict-ssl false # 关闭npm的https
$ npm config set proxy=http://ip:port # 设置npm获取的代理服务器地址
$ npm config delete http-proxy # 清除npm的http代理
$ npm config delete https-proxy # 清除npm的https代理
$ npm install -g koa --proxy http://ip:port # 临时使用代理
```

CNPM——node包管理器

安装

$ npm install -g cnpm --registry=http://r.cnpmjs.org

或者

$ alias cnpm="npm --registry=http://r.cnpmjs.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=http://cnpmjs.org/dist \
--userconfig=$HOME/.cnpmrc"

#或者把该设置放到shell配置文件里 .bashrc or .zshrc
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=http://r.cnpmjs.org \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=http://cnpmjs.org/dist \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

使用

$ cnpm install [name] # 安装
$ cnpm sync connect # 同步
$ open http://cnpmjs.org/sync/connect # 通过web浏览器查看

$ cnpm publish [name]
$ cnpm unpublish [name]

$ cnpm info cnpm