Aug 212013
 

给作者编号

Author Number

http://zhanxw.com/author

 

最近写了一个网页,主要解决写文章给作者编号的问题。这个问题怎么来的呢?现在的文章需要提供作者,作者工作单位和作者的贡献,但是提供的方式是给每个作者单位按照作者出现的顺序编号。比如我的文章有79个作者,现在突然要加一个新的合作者,把他拍到第50位,那么从第51位到最后一位作者的编号可能都需要改变。这个过程很容易出错。我想写个软件给所有人用,顺便凑个热闹,学习一下jQuery + Django,最后的作品放到我的网页(link)。在这个过程中,还学习了Nginx, Emacs web-mode, 这篇笔记主要是把我的经验记录下来。

 

1. 学习Django

Django是Python语言实现的Web架构,它最开始是用于展示新闻(Newroom),国内的豆瓣也用Django。作为Python的“粉丝”,我学一下Django,希望以后可以把有用的工具放到网上。

想入门,最好最省时间的方法是Django tutorial,就在Django的官方网页。这个Tutorial一共有六个部分,介绍的常用Django的功能,包括: 模型(Model),模板(Template),视图(View),静态文件(Static),管理界面(Admin),网址分发(URL Dispatching)等等。学习之后,我感到Django的强项是利用Python语言做到来简化数据库使用。对于一个简单的App,基本开发的流程是: (1)设定project 的settings.py 和urls.py,注册新的app ;(2)设定urls.py来确定网址和视图(View)的关系;(3)用HTML开发模板(/template/app/XXX.html)同时实现各种需要的视图(views.py)

架设Django,一般简易使用uWSGI。我使用的是Nginx处理静态页面,同时用uWSGI处理Django相关界面。简易先在本机用uWSGI调好程序,再放到服务器上并配置Nginx和uWSGI。

Djano默认使用Unicode,而我们一般都用str(),这是ASCII编码。两种编码对于字符串处理来讲(包括join, index)没有什么区别,但在print的时候,Unicode的字符应该先转成UTF-8字符,比如: print u”aaa”.encode(‘UTF-8’)

 

2. 学习jQuery

用jQuery的主要目的是用Ajax来更新网页数据,这样用户用起来有行云流水的感觉。jQuery有.get 和 .post两个方法,使用起来和访问网页很相似。不过这里面有几个陷阱。第一个是GET方式适合小数据,对于Django来讲,默认的大小是4096个字符,大一点的数据应该用POST;第二个陷阱就是POST,为了安全(CSRF: cross-site request forgery),Django要求POST的数据必须有csrftoken,一般的HTML表格Form必须有csrf的标记才会被Django接收。

为了调试Ajax的输入输出,简易用Firefox下的FireBug或者最新版本的Firefox,它们都可以显示Ajax请求的参数和返回值。最新版本的Firefox还可以给Javascript设置断点,这就更加降低了调试的难度。

jQuery的功能很多,这个网页把jQuery 1.9以及之前版本的功能用不同颜色区分出来,很方便查询(link)。

在这个网页中,我还用了handsontable,这是一个在jQuery的基础上开发的实用的javascript spreadsheet,语法简单,使用方便。

3. 一点Nginx经验

对Nginx来讲,我们的配置是用location语句来把特定的网址传给uWSGI进程。注意Nginx设置里如果有多个location语句,Nginx并不一定选择最先匹配的网址,而是选择最长的网址。比如:

location ~* /author/static/.+.(jpg|jpeg|gif|css|png|js|ico|xml)$ {
root /var/django/zhanxw/; # STATIC_ROOT
expires 30d;
}

location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|xml)$ {
access_log        off;
expires           30d;
root /var/www;
}

如果第一个location写成: “location /author/static”,那么.jpg之类的文件会被第二个location处理,这就不是Django static文件的正确处理方式。

 

4. 一点Emacs web-mode经验

用Emacs写Django的模板HTML,最好用的不是django-html-mode,而是web-mode。只有这个mode可以识别 “{% static ‘polls/index.html’ %}”这样的记号,并正确缩进。

此外web-mode可以自动补全HTML tab,比如你在<p>后面打</,web-mode会帮你补全</p>。还可以用C-c C-e b 和C-c C-e e跳到一对tag的最前面(beginning)和最后面(end)。

 

5. 一般性经验

最开始设计应该以最少功能,最小实现为好,不要一下子把界面设计复杂。可以想几个用例(Use Case),保证最基本最重要的功能,其他功能应该越少越好。

网页的布局应该少用<br/>这种硬回车。在有Bootstrap的情况下,完全可以用<div>和<p>来用更少的HTML tag来实现更自然、自动的布局。

 

Apr 232011
 

How to use Monit to monitor VPS services.

早就从Tianyicui的twitter上了解了monit这个服务,但是一直没用上。直到最近自己VPS上的Mysql没有自动启动,才发现需要一个自动化的工具来监视VPS上重要进程(Nginx, PHP5-FPM, MySQL)的状态。
简单来讲,借鉴Monit的文档和 Graham King 的Blog,我的Monit配置如下。

zhanxw@zhanxw:~$ cat /etc/monit/conf.d/zhanxw.monit 
set daemon 120
set idfile /var/.monit.id
set alert me@zhanxw.com
set mailserver smtp.gmail.com port 587 username "XXXX@XXXX.com" password "XXXX" using tlsv1 with timeout 30 seconds # this basically allows you to use gmail's smtp server.  tlsv1 gets things going in SSL.
set logfile /var/log/monit.log

set httpd port 2812 
    use address zhanxw.com
    allow 141.211.10.47
    allow 205.185.127.61
    allow @zhanxw
    #allow admin:Monit

check system zhanxw.com
    if memory usage > 75% then alert

check process nginx with pidfile "/var/run/nginx.pid"
    start = "/etc/init.d/nginx start"
    stop = "/etc/init.d/nginx stop"
    if loadavg (1min) > 4 then alert
    if loadavg (5min) > 2 then alert
    if failed port 8080 and protocol http then restart
    if 2 restarts within 3 cycles then timeout
    alert me@zhanxw.com

check process php5-fpm pidfile "/var/run/php5-fpm.pid"
    start = "/usr/sbin/service php5-fpm start"
    stop = "/usr/sbin/service php5-fpm stop"
    if failed host 127.0.0.1 port 9000 then restart
    if 2 restarts within 3 cycles then timeout
    alert me@zhanxw.com
    
check process mysqld with pidfile "/var/lib/mysql/zhanxw.pid"
    start = "/usr/sbin/service mysql start"
    stop = "/usr/sbin/service mysql stop"
    if failed host 127.0.0.1 port 3306 then restart
    if 2 restarts within 3 cycles then timeout
    alert me@zhanxw.com

check process varnish with pidfile "/var/run/varnishd.pid"
    start = "/usr/sbin/service varnish start"
    stop = "/usr/sbin/service varnish stop"
    if failed port 80 and protocol http then restart
    if 2 restarts within 3 cycles then timeout
    alert me@zhanxw.com

这个配置的优势在于可以把服务进程的变化发到我的gmail信箱;可以用和SSH相同的密码登录Monit管理界面;可以自动重启关键进程(Nginx, PHP5-FPM,MySQL,Varnish)。我没有监控SSHD,因为这个进程不是zhanxw.com blog的关键部分,即不和WordPress服务相关。

本文没有提到安装Monit,实际上在ubuntu系统上可以用 sudo apt-get install monit 安装。

对于有图形化要求的系统监视,上面的Blog提到了另一个Open source soluiton: Munin。有兴趣的可以移步到那里学习。

Feb 282011
 

我用的是BuyVM.net一年$15的VPS,可想而知这个主机的配置是如何Economy: 128M 内存。原来使用的是Apache 1.3 prefork 和 Php_mod,系统稳定性非常好,然而性能可以说令人失望,打开一个简单的静态页面平均需要3秒,而使用wordpress及若干plugin后,差不多需要10秒以上才能访问页面,而且这是打开WP-Supercache后的性能。据我的观察,这是因为Apache进程会fork出很多子进程,这些进程吃掉了有限的VPS内存。2月的最后一天,我决定试一试传说中Nginx,看看它在小内存的VPS上表现是否优异。在8000端口打开Nginx后,使用http://whichloadsfaster.com/ab – Apache HTTP server benchmarking tool 比较Nginx和Apache的速度,毫无悬念的,Nginx要快,平均只用了1/4的时间。因此我下定决心,将整个VPS升级到Nginx+PHP FPM。具体的步骤如下:

1. 升级Ubuntu 10.04 LTS Lucid 到 10.10 Maverick

升级的目的是使用Ubuntu官方的PHP,因为只有10.10版的PHP5才包括了php5-fpm功能。

具体方法(翻译自http://www.howtoforge.com/how-to-upgrade-ubuntu-10.04-lucid-lynx-to-10.10-maverick-meerkat-desktop-and-server-p2):

aptitude install update-manager-core

改变 /etc/update-manager/release-upgrades 中Prompt=normal

do-release-upgrade

我在升级中反复遇到关于procps的这个提示:start: Unknow Jobs: procps

解决方法就是建立一个/etc/init/procps.conf,然后继续apt-get upgrade就行。

原理是service 这个命令会调用/etc/init.d下面的脚本,而procps的脚本会用start命令,start procps命令会调用initctl start procps, 这个过程中需要/etc/init/procps.conf来设定procps相关的参数。在ubuntu升级的时候,这个配置文件缺失造成了上述问题。


2. 安装Nginx

先卸载Apache, 用apt-get install nginx就行,之后参考:

http://www.howtoforge.com/installing-nginx-with-php-5.3-and-php-fpm-on-ubuntu-lucid-lynx-10.04-without-compiling-anything

我这里也列出了自己的nginx.conf文件内容,注意我使用了rewrite功能。这一功能在Apache里是用mod_rewrite支持,在.htaccess里指定的。我们写在nginx.conf文件里也不复杂。另外,末尾的backend语句似乎是必须的,没有它PHP似乎就无法工作。

My /etc/nginx/nginx.conf

user www-data;
worker_processes  1;

error_log  /var/log/nginx/error.log;
pid        /var/run/nginx.pid;

events {
 use epoll;
 worker_connections  1024;
 # multi_accept on;
}

http {
 include       /etc/nginx/mime.types;

 access_log  /var/log/nginx/access.log;

 sendfile        on;
 #tcp_nopush     on;

 #keepalive_timeout  0;
 keepalive_timeout  65;
 tcp_nodelay        on;

 gzip  on;
 gzip_disable "MSIE [1-6]\.(?!.*SV1)";

 include /etc/nginx/conf.d/*.conf;
 include /etc/nginx/sites-enabled/*;
}

My /etc/nginx/sites-enabled/default

 server {
 listen   8080;
 server_name  zhanxw.com;
 access_log  /var/log/nginx/localhost.access.log;

 root    /var/www;
## Default location
 location / {
 root   /var/www;
 index  index.php index.html;
 }

location /blog/ {
 index index.php;
 if (-e $request_filename) {
 break;
 }
 rewrite ^/blog/(.+)$ /blog/index.php?q=$1 last;
 }

## Images and static content is treated different
 location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|xml)$ {
 access_log        off;
 expires           30d;
 root /var/www;
 }

## Parse all .php file in the /var/www directory
 location ~ .php$ {
 fastcgi_split_path_info ^(.+\.php)(.*)$;
 fastcgi_pass   backend;
 fastcgi_index  index.php;
 fastcgi_param  SCRIPT_FILENAME  /var/www$fastcgi_script_name;
 include fastcgi_params;
 fastcgi_param  QUERY_STRING     $query_string;
 fastcgi_param  REQUEST_METHOD   $request_method;
 fastcgi_param  CONTENT_TYPE     $content_type;
 fastcgi_param  CONTENT_LENGTH   $content_length;
 fastcgi_intercept_errors        on;
## Images and static content is treated different
 location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|xml)$ {
 access_log        off;
 expires           30d;
 root /var/www;
 }

## Parse all .php file in the /var/www directory
 location ~ .php$ {
 fastcgi_split_path_info ^(.+\.php)(.*)$;
 fastcgi_pass   backend;
 fastcgi_index  index.php;
 fastcgi_param  SCRIPT_FILENAME  /var/www$fastcgi_script_name;
 include fastcgi_params;
 fastcgi_param  QUERY_STRING     $query_string;
 fastcgi_param  REQUEST_METHOD   $request_method;
 fastcgi_param  CONTENT_TYPE     $content_type;
 fastcgi_param  CONTENT_LENGTH   $content_length;
 fastcgi_intercept_errors        on;
 fastcgi_ignore_client_abort     off;
 fastcgi_connect_timeout 60;
 fastcgi_send_timeout 180;
 fastcgi_read_timeout 180;
 fastcgi_buffer_size 128k;
 fastcgi_buffers 4 256k;
 fastcgi_busy_buffers_size 256k;
 fastcgi_temp_file_write_size 256k;
 }

## Disable viewing .htaccess & .htpassword
 location ~ /\.ht {
 deny  all;
 }
}
upstream backend {
 server 127.0.0.1:9000;
}

3. 安装PHP FPM

使用apt-get install php5-fpm php-apc php5-cgi php5-cli php5-mysql php5-common php-pear php5-curl php5-suhosin php5-gd php5-imagick imagemagick php5-mhash php5-mcrypt即可。

注意安装后可以用service php5-fpm start来检查是否有缺失的php5模块。例如如果见到:

* Starting PHP5 FPM… PHP Warning: PHP Startup: Unable to load dynamic library ‘/usr/lib/php5/20090626+lfs/mcrypt.so’ – /usr/lib/php5/20090626+lfs/mcrypt.so: cannot open shared object file: No such file or directory in Unknown on line 0

Feb 27 15:40:28.053288 [WARNING] [pool www] pm.start_servers is not set. It’s been set to 10.

这说明应该安装php5-mcrypt。后面的WARNING可以忽略。

另外,小内存VPS上使用PHP-FPM可以控制其进程个数。在我的VPS上,单个PHP-FPM可以使用多达100M的内存,同时我的访问量很少,因此我设置PHP-FPM使用static方式维持2个进程。从实践来看系统可以保持合理的响应时间,同时内存不会被用光。

我的PHP-FPM 的配置文件/etc/php5/fpm/pool.d/www.conf  列在下面:

 ...
; Choose how the process manager will control the number of child processes.
; Possible Values:
;   static  - a fixed number (pm.max_children) of child processes;
;   dynamic - the number of child processes are set dynamically based on the
;             following directives:
;             pm.max_children      - the maximum number of children that can
;                                    be alive at the same time.
;             pm.start_servers     - the number of children created on startup.
;             pm.min_spare_servers - the minimum number of children in 'idle'
;                                    state (waiting to process). If the number
;                                    of 'idle' processes is less than this
;                                    number then some children will be created.
;             pm.max_spare_servers - the maximum number of children in 'idle'
;                                    state (waiting to process). If the number
;                                    of 'idle' processes is greater than this
;                                    number then some children will be killed.
; Note: This value is mandatory.
pm = static

; The number of child processes to be created when pm is set to 'static' and the
; maximum number of child processes to be created when pm is set to 'dynamic'.
; This value sets the limit on the number of simultaneous requests that will be
; served. Equivalent to the ApacheMaxClients directive with mpm_prefork.
; Equivalent to the PHP_FCGI_CHILDREN environment variable in the original PHP
; CGI.
; Note: Used when pm is set to either 'static' or 'dynamic'
; Note: This value is mandatory.
pm.max_children = 2

...

4.安装eAccelerator

主要参考:http://developer.mindtouch.com/en/kb/Improve_PHP_performance_with_eAccelerator_on_Ubuntu_8.04_(Debian)

基本上下载,编译,安装。之后在php.ini中加入下面几行即可(注意.so文件的路径):

 ; eAccelerator configuration
; Note that eAccelerator may also be installed as a PHP extension or as a zend_extension
; If you are using a thread safe build of PHP you must use
; zend_extension_ts instead of zend_extension
;extension                       = "/usr/lib/php5/20060613+lfs/eaccelerator.so"
zend_extension                  = "/usr/lib/php5/20090626+lfs/eaccelerator.so"
eaccelerator.shm_size           = "16"
eaccelerator.cache_dir          = "/var/cache/eaccelerator"
eaccelerator.enable             = "1"
eaccelerator.optimizer          = "1"
eaccelerator.check_mtime        = "1"
eaccelerator.debug              = "0"
eaccelerator.filter             = ""
eaccelerator.shm_max            = "0"
eaccelerator.shm_ttl            = "0"
eaccelerator.shm_prune_period   = "0"
eaccelerator.shm_only           = "0"
eaccelerator.compress           = "1"
eaccelerator.compress_level     = "9"
eaccelerator.allowed_admin_path = "/var/www/eaccelerator"

安装完之后注意检查<?php phpinfo(); ?>页面的输出,保证eAccelerator开启。

5. 启用Varnish

偶然间听说Varnish可以做代理,提供系统响应速度。以我的经验来看,对于静态页面,通过Varnish获取页面和直接使用nginx差别不大(动态页面未测试)。但用Varnish在80端口监听,听起来可以把真正的服务器挡在Varnish之后,似乎可以增强安全性吧。我在VPS上安装Varnish,应注意Varnish本意的版本变化较快,在配置时应注意路径的变化。需要配置两个文件,第一个是

/etc/default/varnish 应改成START=yes,否则会出现这个错误Not starting HTTP accelerator varnishd http://twitter.com/#!/grosser/status/5249558112108544);另一个是/etc/varnish/default.vcl,我参考了http://wowubuntu.com/varnish.html 以及http://blog.mudy.info/2009/04/my-varnish-vcl-for-wordpress/,这里列出我的配置文件/etc/varnish/default.vcl:

 backend default {
.host = "localhost";
.port = "8080";
}
acl purge {
"localhost";
}
sub vcl_recv {
if (req.request == "PURGE") {
if (!client.ip ~ purge) {
error 405 "Not allowed.";
}
return(lookup);
}
if (req.url ~ "^/$") {
unset req.http.cookie;
}
}
sub vcl_hit {
if (req.request == "PURGE") {
set obj.ttl = 0s;
error 200 "Purged.";
}
}
sub vcl_miss {
if (req.request == "PURGE") {
error 404 "Not in cache.";
}
if (!(req.url ~ "wp-(login|admin)")) {
unset req.http.cookie;
}
if (req.url ~ "^/[^?]+.(jpeg|jpg|png|gif|ico|js|css|txt|gz|zip|lzma|bz2|tgz|tbz|html|htm)(\?.|)$") {
unset req.http.cookie;
set req.url = regsub(req.url, "\?.$", "");
}
if (req.url ~ "^/$") {
unset req.http.cookie;
}
}
sub vcl_fetch {
if (req.url ~ "^/$") {
unset beresp.http.set-cookie;
}
if (!(req.url ~ "wp-(login|admin)")) {
unset beresp.http.set-cookie;
}
}

插曲1:重置MySQL密码

好就不用MySQL的root密码,重置密码(适用于MySQL 5.1)可以参考:

Generic method http://dev.mysql.com/doc/refman/5.1/en/resetting-permissions.html

只需要3步:以--skip-grant-tables参数启动Mysql-server;启动mysql;执行

UPDATE mysql.user SET Password=PASSWORD('MyNewPass') WHERE User='root';
FLUSH PRIVILEGES;

插曲2:使Firefox 支持Java Applets

在设置PHP-FPM 参数不当时,有可能整个VPS的内存全部被吃光,这时没法用SSH登录,很多命令(sudo、ls、top)都无法执行,这时候可以用BuyVM.net 提供的 manage.buyvm.net 页面,以Java Applets方式以root身份登录到VPS。默认情况下,Ubuntu的Firefox不支持Java Applets,解决方法就是安装:icedtea6-plugin .


另附:Wordpress中插入代码的方法:

注意这里使用了中文的全角括号,以免Wordpress当成真正的代码。

【sourcecode language=”css”】
your code here
【/sourcecode】

具体的语言可以有:

  • actionscript3
  • bash
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

http://en.support.wordpress.com/code/posting-source-code/