EC2、ELB、Route 53 + SSL

EC2、ELB、Route 53 + SSL

EC2あたりの設定もろもろ

複数のWebサーバとしてEC2インスタンスを作成し、ELBで負荷分散させる。アクセスにはSSLも使う場合の設定について。SSLなしならわかりやすくまとまってるサイトがあるので差分を埋めるつもりでメモ。

参考サイト

EC2インスタンス構築

これはアプリの世界。Web アプリケーションを構築する。ブラウザ→ELB→EC2 のうち、ELB→EC2部分が平文でいいならSSLのことは気にしない実装でOK。以下、気にしない前提です。

SSL証明書の発行

SSL証明書自体は AWS の設定とは関係ないので、知ってる人は飛ばしてだいじょぶです。AWS だからって特別なプロセスはとくにないです。

  1. openssl で秘密鍵作成

     openssl genrsa -out himistu.key 2048
    

    鍵長に注意。SSL証明書を申請する認証局のドキュメントに従う。

  2. openssl で秘密鍵より CSR 作成

     openssl req -new -key himistu.key -out csr.pem
    

    オプション項目などの入力も認証局によって異なるので、申請する認証局のドキュメントに従う。コモンネームについては 『FAQ - コモンネームに「www」をつける,つけないで何が変わりますか?』 を一読。

    Q.コモンネームに「www」をつける,つけないで何が変わりますか?

    A.SSLサーバ証明書の拡張領域「Subject Alternative Names(SANs)」の機能で、CSRに記載したコモンネーム(FQDN)が「www.domain_name」でも、www無しの「domain_name」でも利用出来ます。

    CSRのコモンネーム(FQDN)でアクセス:https://www.domain_name

    SANsに対応したブラウザではアクセス:https://domain_name

    SANs対応ブラウザではどちらでも利用可能です。

    ※、但し、携帯電話のブラウザには、SANsに未対応がある為、この機能は使えません。CSRで指定したコモンネーム(FQDN)のみになります。最近のスマートフォンのブラウザでは一部対応しています。

    2009年以前

    SSLサーバ証明書は,ドメイン単位ではなくホスト名単位にて発行されます。そのため,「www」有りと無しのサイトでは,別のサイトとみなされます。

    例えば,コモンネームをdomain_nameでお申し込み頂いた場合は,www.domain_nameにアクセスすると,セキュリティ警告が表示されます。

    最終更新: 2012-06-12 10:26

    作成者: MT Support

    改定: 1.7

    ※よく読めばちゃんと書いてますがわたし勘違いしていた。コモンネーム はネイキッドではなく、www 付きで申請することで、最近のブラウザであれば上記のようにどちらのドメインでも SSL が使えるようになる。

    わたしのばあい、GeoTrust の 証明書でして、オプション項目はメールアドレス、チャレンジレスポンス、オプショナルの会社名は未入力です。

    GeoTrustのリンク GeoTrust - Knowledge Center - SSL Certificates Support

    (e.g.)

     Country Name (2 letter code) [AU]:JP
     State or Province Name (full name) [Some-State]:XXXXX
     Locality Name (eg, city) []:XXXXX-Shi
     Organization Name (eg, company) [Internet Widgits Pty Ltd]:XXXXX Inc.
     Organizational Unit Name (eg, section) []:Company
     Common Name (e.g. server FQDN or YOUR name) []:XXXXX.com
     Email Address []:
    
     Please enter the following 'extra' attributes
     to be sent with your certificate request
     A challenge password []:
     An optional company name []:
    
  3. CSR認証局に登録

  4. サーバ証明書と中間証明書を取得(秘密鍵とあわせて3つ)

    GeoTrust ではメールに記述されていたサーバ証明書だけコピペしました。

参考URL

ELBのSSL設定とインスタンス設定

SSL証明書を登録する場合ちょっと手順が必要。

Create a New Load Balancer から Load Balancer Protocol で HTTPS を選択する。Instance Protocol は ELB → EC2 部分のことで、AWS内の通信を暗号化するかどうか。ここではやんないですが、やろうと思うとどうなるんでしょかね。公式ドキュメント書いてるですかね?

ひとまず、そこまで終わると Upload a new SSL Certificate がでてくるので次の情報を入力する。

name value
Certificate Name てきとうに
Private Key 秘密鍵CSRをつくったときのやつ
Public Key Certificate サーバ証明書
Certificate Chain 中間証明書(CA証明書)

わたしは、中間証明書は ELB には登録してません。


※追記 ELB でSSL設定するとき Android は CA証明書をちゃんとインストールしないといけない。 そうじゃないとちゃんとした通信だと証明できないため、アイコンが汚れる。 Certificate Chain を入れる必要がある。

たとえばこんな。

中間CA証明書ダウンロード|リポジトリ / 利用規約|サポート|SSLサーバ証明書 ジオトラスト

【ジオトラスト クイック SSL プレミアム専用】中間CA証明書(三階層目)


あとの EC2 のインスタンスを ELB にひもづけるところは SSL ありなしに関係なく、単にELBにぶら下げるインスタンスを選択するだけなので割愛します。なお、ELB の疎通チェックは特殊な要件がない限り、HTTP で指定パスがレスポンス可能であるか、でいいと思います。

Route 53 でELBのドメイン名をAレコードで更新

レジストラから取得したドメインにおいて、参照ネームサーバを Route 53 の Delegation Set (もしくは NS レコードの VALUE)で表示されるものに変更しておくことが前提。ELB の設定ができたら Aレコード(ラジオボタンで ALIAS を選択)で ELB のドメイン名を設定。

よく忘れるのだれけども、ELB や S3 は Route 53 で設定できるが EC2 インスタンスは直接指定できないことに注意!

さいごに

ここまでできたら、dig domain a とかしてみて、ANSWER SECTION の IPアドレスとか確認してみたり、そのまま HTTPS を叩いてみてアクセスできたらOK. 503のばあいは、ELB から EC2 インスタンスが見つからない可能性あるので、ELB の Instances で Status が In Service になっているかチェックする。アプリ的なエラーはもう関係なし、ってなぐあいです。

AWSでPHPをつかったりとか

EC2 で PHP セットアップ

さいきん、EC2のセットアップ多いのでメモ。構成は単純で、EC2、S3、RDS で phpapache つかっちゃいます。ザ・ふつうです。

install httpd and php

こちらを参照。

sudo yum -y install httpd php php-mbstring
sudo vim /etc/httpd/conf/httpd.conf

httpd.conf で indexes とかの設定はやめたりする

ServerTokens OS
↓
ServerTokens Prod ← エラーページ等でOS名を表示しないようにする


<Directory "/var/www/html">

    Options Indexes FollowSymLinks
  ↓
    Options FollowSymLinks ← ファイル一覧を表示しないようにする

    AllowOverride None
  ↓
    AllowOverride All ← .htaccessの許可

</Directory>

ServerSignature On
↓
ServerSignature Off ← エラーページでサーバー情報を表示しないようにする

<Directory "/var/www/icons">
    Options Indexes MultiViews
    ↓
    Options MultiViews ← ファイル一覧を表示しないようにする
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

↑ こんなかんじに。

EC2 とかでデフォルトさわると↓のかんじ。(権限なくて書き込めないかもですね)

cat <<EOF > /etc/httpd/conf/httpd.conf
ServerTokens Prod
ServerRoot "/etc/httpd"
PidFile run/httpd.pid
Timeout 60
KeepAlive Off
MaxKeepAliveRequests 100
KeepAliveTimeout 15
<IfModule prefork.c>
StartServers       8
MinSpareServers    5
MaxSpareServers   20
ServerLimit      256
MaxClients       256
MaxRequestsPerChild  4000
</IfModule>
<IfModule worker.c>
StartServers         4
MaxClients         300
MinSpareThreads     25
MaxSpareThreads     75
ThreadsPerChild     25
MaxRequestsPerChild  0
</IfModule>
Listen 80
LoadModule auth_basic_module modules/mod_auth_basic.so
LoadModule auth_digest_module modules/mod_auth_digest.so
LoadModule authn_file_module modules/mod_authn_file.so
LoadModule authn_alias_module modules/mod_authn_alias.so
LoadModule authn_anon_module modules/mod_authn_anon.so
LoadModule authn_dbm_module modules/mod_authn_dbm.so
LoadModule authn_default_module modules/mod_authn_default.so
LoadModule authz_host_module modules/mod_authz_host.so
LoadModule authz_user_module modules/mod_authz_user.so
LoadModule authz_owner_module modules/mod_authz_owner.so
LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
LoadModule authz_dbm_module modules/mod_authz_dbm.so
LoadModule authz_default_module modules/mod_authz_default.so
LoadModule ldap_module modules/mod_ldap.so
LoadModule authnz_ldap_module modules/mod_authnz_ldap.so
LoadModule include_module modules/mod_include.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule logio_module modules/mod_logio.so
LoadModule env_module modules/mod_env.so
LoadModule ext_filter_module modules/mod_ext_filter.so
LoadModule mime_magic_module modules/mod_mime_magic.so
LoadModule expires_module modules/mod_expires.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
LoadModule usertrack_module modules/mod_usertrack.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule mime_module modules/mod_mime.so
LoadModule dav_module modules/mod_dav.so
LoadModule status_module modules/mod_status.so
LoadModule autoindex_module modules/mod_autoindex.so
LoadModule info_module modules/mod_info.so
LoadModule dav_fs_module modules/mod_dav_fs.so
LoadModule vhost_alias_module modules/mod_vhost_alias.so
LoadModule negotiation_module modules/mod_negotiation.so
LoadModule dir_module modules/mod_dir.so
LoadModule actions_module modules/mod_actions.so
LoadModule speling_module modules/mod_speling.so
LoadModule userdir_module modules/mod_userdir.so
LoadModule alias_module modules/mod_alias.so
LoadModule substitute_module modules/mod_substitute.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule cache_module modules/mod_cache.so
LoadModule suexec_module modules/mod_suexec.so
LoadModule disk_cache_module modules/mod_disk_cache.so
LoadModule cgi_module modules/mod_cgi.so
LoadModule version_module modules/mod_version.so
Include conf.d/*.conf
User apache
Group apache
ServerAdmin root@localhost
UseCanonicalName Off
DocumentRoot "/var/www/html"
<Directory />
    Options FollowSymLinks
    AllowOverride None
</Directory>
<Directory "/var/www/html">
    Options FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
<IfModule mod_userdir.c>
    UserDir disabled
</IfModule>
DirectoryIndex index.html index.html.var
AccessFileName .htaccess
<Files ~ "^\.ht">
    Order allow,deny
    Deny from all
    Satisfy All
</Files>
TypesConfig /etc/mime.types
DefaultType text/plain
<IfModule mod_mime_magic.c>
    MIMEMagicFile conf/magic
</IfModule>
HostnameLookups Off
ErrorLog logs/error_log
LogLevel warn
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
LogFormat "%h %l %u %t \"%r\" %>s %b" common
LogFormat "%{Referer}i -> %U" referer
LogFormat "%{User-agent}i" agent
CustomLog logs/access_log combined
ServerSignature Off
Alias /icons/ "/var/www/icons/"
<Directory "/var/www/icons">
    Options MultiViews FollowSymLinks
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>
<IfModule mod_dav_fs.c>
    DAVLockDB /var/lib/dav/lockdb
</IfModule>
ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
<Directory "/var/www/cgi-bin">
    AllowOverride None
    Options None
    Order allow,deny
    Allow from all
</Directory>
IndexOptions FancyIndexing VersionSort NameWidth=* HTMLTable Charset=UTF-8
AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip
AddIconByType (TXT,/icons/text.gif) text/*
AddIconByType (IMG,/icons/image2.gif) image/*
AddIconByType (SND,/icons/sound2.gif) audio/*
AddIconByType (VID,/icons/movie.gif) video/*
AddIcon /icons/binary.gif .bin .exe
AddIcon /icons/binhex.gif .hqx
AddIcon /icons/tar.gif .tar
AddIcon /icons/world2.gif .wrl .wrl.gz .vrml .vrm .iv
AddIcon /icons/compressed.gif .Z .z .tgz .gz .zip
AddIcon /icons/a.gif .ps .ai .eps
AddIcon /icons/layout.gif .html .shtml .htm .pdf
AddIcon /icons/text.gif .txt
AddIcon /icons/c.gif .c
AddIcon /icons/p.gif .pl .py
AddIcon /icons/f.gif .for
AddIcon /icons/dvi.gif .dvi
AddIcon /icons/uuencoded.gif .uu
AddIcon /icons/script.gif .conf .sh .shar .csh .ksh .tcl
AddIcon /icons/tex.gif .tex
AddIcon /icons/bomb.gif core
AddIcon /icons/back.gif ..
AddIcon /icons/hand.right.gif README
AddIcon /icons/folder.gif ^^DIRECTORY^^
AddIcon /icons/blank.gif ^^BLANKICON^^
DefaultIcon /icons/unknown.gif
ReadmeName README.html
HeaderName HEADER.html
IndexIgnore .??* *~ *# HEADER* README* RCS CVS *,v *,t
AddLanguage ca .ca
AddLanguage cs .cz .cs
AddLanguage da .dk
AddLanguage de .de
AddLanguage el .el
AddLanguage en .en
AddLanguage eo .eo
AddLanguage es .es
AddLanguage et .et
AddLanguage fr .fr
AddLanguage he .he
AddLanguage hr .hr
AddLanguage it .it
AddLanguage ja .ja
AddLanguage ko .ko
AddLanguage ltz .ltz
AddLanguage nl .nl
AddLanguage nn .nn
AddLanguage no .no
AddLanguage pl .po
AddLanguage pt .pt
AddLanguage pt-BR .pt-br
AddLanguage ru .ru
AddLanguage sv .sv
AddLanguage zh-CN .zh-cn
AddLanguage zh-TW .zh-tw
LanguagePriority en ca cs da de el eo es et fr he hr it ja ko ltz nl nn no pl pt pt-BR ru sv zh-CN zh-TW
ForceLanguagePriority Prefer Fallback
AddDefaultCharset UTF-8
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-x509-ca-cert .crt
AddType application/x-pkcs7-crl    .crl
AddHandler type-map var
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
Alias /error/ "/var/www/error/"
<IfModule mod_negotiation.c>
<IfModule mod_include.c>
    <Directory "/var/www/error">
        AllowOverride None
        Options IncludesNoExec
        AddOutputFilter Includes html
        AddHandler type-map var
        Order allow,deny
        Allow from all
        LanguagePriority en es de fr
        ForceLanguagePriority Prefer Fallback
    </Directory>
</IfModule>
</IfModule>
BrowserMatch "Mozilla/2" nokeepalive
BrowserMatch "MSIE 4\.0b2;" nokeepalive downgrade-1.0 force-response-1.0
BrowserMatch "RealPlayer 4\.0" force-response-1.0
BrowserMatch "Java/1\.0" force-response-1.0
BrowserMatch "JDK/1\.0" force-response-1.0
BrowserMatch "Microsoft Data Access Internet Publishing Provider" redirect-carefully
BrowserMatch "MS FrontPage" redirect-carefully
BrowserMatch "^WebDrive" redirect-carefully
BrowserMatch "^WebDAVFS/1.[0123]" redirect-carefully
BrowserMatch "^gnome-vfs/1.0" redirect-carefully
BrowserMatch "^XML Spy" redirect-carefully
BrowserMatch "^Dreamweaver-WebDAV-SCM1" redirect-carefully
EOF

ドキュメントルートの権限変更。

sudo chown user:group -R /var/www/html/

↑これは適宜、適切なユーザとグループで。

sudo /etc/rc.d/init.d/httpd start
sudo chkconfig httpd on
sudo chkconfig httpd --list
echo test >> /var/www/html/index.html

ここまでできたらアクセスしてみる。いけたらPHP以外はOK.

cat <<EOF > /var/www/html/info.php
<?php
  phpinfo();
?>
EOF

/info.php にアクセスしてPHPの情報が出力されたらOK.

install phpMyAdmin

てまえみそですが、こちらを参照。RDSは事前にセットアップして phpMyAdmin をいれるサーバからアクセスできることを確認しておくことね。

あと事前に phpMyAdmin-3.5.7-all-languages.tar.gz みたいなアーカイブをDLしておく。

※2013/07/08 追記
いまみたらバージョンが 4 にあがってた。 ターボールじゃなくて zip ファイルになってるので、unzip コマンドで解凍。
phpMyAdmin ここの DOWNLOAD から。 あと、MySQL管理ツール Adminer も簡便でいいよ。デバッグ用途ならこっちがいいかな、汎用的だし。

sudo yum -y install mysql
tar -zxvf phpMyAdmin-3.5.7-all-languages.tar.gz
mv phpMyAdmin-3.5.7-all-languages /var/www/html/phpMyAdmin
sudo yum -y install php-mysql php-mbstring php-mcrypt 
sudo service httpd restart

DBがローカルじゃないのでDBの設定。こちらを参考。

cp /var/www/html/phpMyAdmin/config.sample.inc.php /var/www/html/phpMyAdmin/config.inc.php
vim /var/www/html/phpMyAdmin/config.inc.php

config.inc.php:

$cfg['Servers'][$i]['host'] = 'localhost';

BasicAuth

てまえみそですがこちらの「Basic認証アカウントを作成」を参照。

  1. .htpasswdファイルを新規作成する

    htpasswd -b -c /etc/httpd/conf/.htpasswd user password
    
  2. 既存の.htpasswdファイルへユーザーを追加する場合

    htpasswd -b /etc/httpd/conf/.htpasswd user password
    
  3. ユーザー登録確認

    cat /etc/httpd/conf/.htpasswd
    
  4. .htaccessファイル作成

    cat <<EOF > /var/www/html/.htaccess
    AuthUserFile /etc/httpd/conf/.htpasswd
    AuthGroupFile /dev/null
    AuthName "secret page"
    AuthType Basic
    require valid-user
    EOF
    

install ImageMagick

pecl がいったり色々あんね。peclphp-pear から。

sudo yum -y install libjpeg-devel php-devel ImageMagick ImageMagick-devel php-pear gcc make
sudo pecl install imagick
sudo vim /etc/php.d/imagick.ini

imagick.ini:

extension=imagick.so

参考サイト

Amazon S3 で静的なファイルをホストするにはこちらを参照して下さい。
めっちゃわかりやすくまとめてくれております。
S3 で静的ファイルなサイト立てるメモ | TECH BLOG

SkypeとXvfbとX11vnc

overviewer

サーバで何かが起こったら通知する仕組みほしいな、ってところで、ビープラさんのPythonプロフェッショナルプログラミングに書いてるSkypeに通知できたらいいな、が発端。

結局、この方法は完遂できませんでした。Xvfb → X11vnc → vnc client で Skype の画面をみる、までができました。なお、virtualenv の環境作ったんですが、impot dbus でこけるのでグローバルでやりました。で、グローバルで Skype4Py.Skype().Attach() しても、Public API とかいうものの承認ウィンドウは表示されませんでした。ここでやる気を無くしました。Skypeのバージョンは CentOS6 用の static 4.0.X くらいだったと思います。

もう通知は別の IRC とかでやる方法を検討し始めます。。。

あと注意点として、Skype をサーバなCLI環境でデーモンで動かすと、P2Pなのでネットワークによくわからん制御できないデータがそこそこながれてしまということです。わたしはいやです。

env

install Xvfb

  1. yum groupinstall "X Window System"
  2. yum -y install xorg-x11-server-Xvfb
  3. yum install xorg-x11-fonts*

install x11vnc

  1. wget http://pkgs.repoforge.org/x11vnc/x11vnc-0.9.13-1.el6.rf.x86_64.rpm
  2. yum -y install x11vnc-0.9.13-1.el6.rf.x86_64.rpm

OSのバージョンと bit 数でしくじってもだえることになった・・・

1. wget http://dag.wieers.com/rpm/packages/x11vnc/x11vnc-0.9.3-1.el5.rf.i386.rpm
2. yum install x11vnc-0.9.3-1.el5.rf.i386.rpm

あと、起動コマンドが次だとクライアントから接続できて

sudo x11vnc -nopw -listen 0.0.0.0 -display :20

次だと接続できなかった。

sudo x11vnc -nopw -listen 0.0.0.0 -display :20 -xauth /var/run/skype/Xauthority

クライアントもソフトによって、てのがあり・・・(なんかおかしいんだろうけども)

Fedora 17(Xの動く) に sudo yum -y install vnc で vncviewer いれて、Xウィンドウ上の terminal から vncviewer remote_host:port で接続したらいけた。

Windows の TightVNC や Mac の Finder で command + K とかはダメだった。VNCのプロトコルバージョン?

font mplus install

日本語がおかしいので、VNCサーバ側に日本語フォントを導入。

epel.repo:

[epel]
name=EPEL RPM Repository for Red Hat Enterprise Linux
baseurl=http://ftp.riken.jp/Linux/fedora/epel/6/$basearch/
gpgcheck=1
enabled=0
  • sudo yum install -y --enablerepo=epel mplus*

参考サイトとか

Apache と WSGI の連携

ApacheWSGI の連携設定

Flask のアプリを Apache の mod_wsgi から動作させる設定。Python2.6 の CentOS 6 くらいです。古めかしいですね。

メモ1

メモ2

workon XXXX
sudo easy_install pip
sudo pip install flask
sudo yum install httpd-devel python-devel
cd /usr/local/src
sudo wget http://modwsgi.googlecode.com/files/mod_wsgi-3.3.tar.gz
sudo tar xzvf mod_wsgi-3.3.tar.gz
cd mod_wsgi-3.3
sudo ./configure --with-apxs=/usr/sbin/apxs --with-python=/usr/bin/python
sudo make
sudo make install
ls /etc/httpd/modules
vim /var/www/flask.wsgi

なかみ

# -*coding:utf-8 -*-

# virtualenv を使う場合
activate_this = '/home/user/.virtualenvs/work_name/bin/activate_this.py'
execfile(activate_this, dict(__file__=activate_this))
# Flaskアプリケーショントップのパスをpathに追加
import sys, os
sys.path.append('/home/user/flask_apl')
# sys.pathで追加したアプリケーションのpythonスクリプトを指定。
# ここでは、app.py 内に「app = Flask(__name__)」があるため、次のように指定。
# モジュール名が main.py であれば from main import app as application などとする。
from app import app as application

ローカルで動作させてたサーバスクリプトをサーバにアップ

sudo vim /etc/httpd/conf/httpd.conf

なかみ

LoadModule wsgi_module modules/mod_wsgi.soa

WSGISocketPrefix /var/run/wsgi
<VirtualHost *:80>
    ServerName example.com

    WSGIDaemonProcess example.com user=apache group=apache threads=5
    WSGIScriptAlias / /var/www/flask.wsgi←WSGIスクリプトがあるところ!権限にきをつける
    WSGIScriptReloading On

    <Directory /home/foo/flask>←実際に動作するサーバスクリプトがあるところ!これも権限注意。
        WSGIProcessGroup example.com
        WSGIApplicationGroup %{GLOBAL}
        Order deny,allow
        Allow from all
    </Directory>   
</VirtualHost>

ログ周りちゃんとしとかんと、なんで動いてないのかよくわからなくなってしまう。 print の標準出力は /var/log/httpd/error_log に出力されてました。 /var/log も権限注意。

WSGIScriptAlias ほそく

http://hogehoge/api/wsgiアプリケーションに振り分けたいときは、

WSGIScriptAlias /api/ /var/www/flask.wsgi

ではなく、

WSGIScriptAlias /api /var/www/flask.wsgi

とすること。

こうすれば、

となる。

あと、同じ VirtualHostディレクティブで複数WSGIアプリケーションを動作させるときは、

WSGIScriptAlias /api1 /var/www/flask1.wsgi
WSGIScriptAlias /api2 /var/www/flask2.wsgi

こんな感じにするといいです。

MySQLdb と PIL のインストール

MySQLdb インストール

いつも忘れる。centos用ね。Macも似た感じでいけるけど、dmg からインスコした MySQL の場合「Library not loaded: libmysqlclient.18.dylib のときに」が必須かも。

PythonMySQL-pythonを使おうとしたら、"import MySQLdb"している箇所で"ImportError: dlopen(/path/to/_mysql.so, 2): Library not loaded: libmysqlclient.18.dylib"というエラーが発生した。ちなみに環境はMacOSXのLionである。

locateしてみたところ、libmysqlclient.18.dylib自体は存在しているらしい。

$ locate libmysqlclient.18.dylib
/usr/local/mysql-5.5.16-osx10.6-x86_64/lib/libmysqlclient.18.dylib

なので、次のようにしてこのファイルを/usr/libにシンボリックリンクした。

$ cd /usr/lib
$ sudo ln -fs /usr/local/mysql-5.5.16-osx10.6-x86_64/lib/libmysqlclient.18.dylib libmysqlclient.18.dylib

これでエラーは解消した。

とあるけど、つぎでもいいかも。

~/.bash_profile

export DYLD_LIBRARY_PATH=/usr/local/mysql/lib/:$DYLD_LIBRARY_PATH

手順

  1. sudo yum -y install python-devel
  2. sudo yum -y install mysql-devel
  3. このへんから MySQL for Python のソースをDL
  4. tar zxvf Mysql-python-1.2.3.tar.gz
  5. cd Mysql-python-1.2.3
  6. workon XXXX
  7. python setup.py build
  8. python setup.py install

impot MySQLdb できたらおk。

テストコード的に。

mysql でデータベースとテーブルつくっとく。

create database tech default character set utf8;
use tech;
create table test_table (id int, name varchar(100));

testdb.py

# -*- coding: utf-8 -*-
import MySQLdb
if __name__ == "__main__":
    connector = MySQLdb.connect(host="localhost", db="tech", user="root", passwd="", charset="utf8")
    cursor = connector.cursor()
    sql = u"insert into test_table values('1','python')"
    cursor.execute(sql)
    sql = u"insert into test_table values('2','パイソン')"
    cursor.execute(sql)
    sql = u"insert into test_table values('3','ぱいそん')"
    cursor.execute(sql)
    connector.commit()
    cursor.close()
    connector.close()

PIL インストール

いつも忘れる。centos 用ね。Mac もこんな感じでいけた気がする。

手順

  1. sudo yum install libjpeg-devel
  2. wget http://effbot.org/downloads/Imaging-1.1.7.tar.gz
  3. tar -zxvf Imaging-1.1.7.tar.gz
  4. cd Imaging-1.1.7
  5. workon XXX
  6. python setup.py build
  7. python setup.py install

impot PIL できたらおk。

HTML5 Canvas の基本あれこれ

Canvas の基本あれこれ

めっちゃ基本的なことをまとめる。

やりたいこと

やりたいことは次。

  1. ローカルファイルを Canvas に画像読み込み
  2. Canvas でユーザが任意に画像を編集

    わたし、ここよわいですね、やっぱり。ここはかいてないですう。

  3. Canvas の画像をサーバへ送信

あと、https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js これつこうてます。

ローカルファイルを Canvas に画像読み込み

ローカルファイルを Canvas に読み込むまで。手順としては次が必要。

  1. ローカルファイルを画像として JavaScript 上に読み込む

  2. JavaScript 上に読み込んだ画像を Canvas に描画

結果、次のコード。

html:

<input type="file" id="files" name="files[]" multiple/>
<canvas id="myCanvas">canvasに対応したブラウザーで実行してください</canvas>

javascript:

<script>
    var handleFileSelect = function (evt) {
        var files = evt.target.files; // FileList object
        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var fileName = f.name;
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    $('#list').empty();
                    var local_file_uri = e.target.result;
                    $img = $('<img src="' + local_file_uri +
                            '" title="' + escape(theFile.name) + '"/>');
                    $img.bind('load', function (e) {
                        var _canvasW = e.target.width;
                        var _canvasH = e.target.height;
                        var canvas = document.getElementById("myCanvas");
                        canvas.width = e.target.width;
                        canvas.height = e.target.height;
                        var context = canvas.getContext("2d");
                        var imgObj = new Image(_canvasW, _canvasH);
                        imgObj.src = local_file_uri;
                        context.drawImage(imgObj, 0, 0);
                    });
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }
    $('#files').bind('change', handleFileSelect);
</script>

Canvas の画像をサーバへ送信

Canvas のデータをサーバへ送信、保存するやり方。Same-Originポリシー あたりの制限があるので注意。ローカルファイルをユーザが自分のオペレーションで Canvas に読み込んでる場合はサーバに送信できまする。

html:

<input type="button" id="send" value="ファイル送信"/>

javascript:

var sendImage = function (evt) {
    var canvas = document.getElementById("myCanvas");
    var data = canvas.toDataURL();
    data = data.replace('data:image/png;base64,', '');
    $('<form/>', {action: '/upload_image', method: 'post'})
            .append($('<input/>', {type: 'hidden', name: 'image', value: data}))
            .appendTo(document.body)
            .submit();
};
$('#send').bind('click', sendImage);

わたしの場合、非同期通信じゃなかったので同期的にページ遷移するコードにしました。

server(python):

@app.route('/upload_image', methods=['POST'])
def upload_image():
    image = base64.b64decode(request.form['image'])
    #image_name = request.form['image_name']
    filename = './static/upload_files/%d%s' % (int(time()), 'test.png')
    output = open(filename, 'wb')
    output.write(image)
    output.close()

ファイル名のところ超ダサいんですけどw

ファイル名は Javascript の File.name プロパティに設定されています。こいつを参照してサーバに POST すればOK。var fileName = f.name この部分すね。

iTerm 2とGrowlとBoxcarの設定とか

通知すること

通知って大事だよね。 誰かがTwitterでメンションくれた、DMくれた、Facebookでメッセージ届いたとか。 開発者としてはサーバでこけたときも通知してほしい。 そんな通知の話。

レシピ

用意するアプリとか。通知センターあるよね。

  • Growl
  • Boxcar
  • iTerm 2

できること

  • SSH接続して tail -f したログでエラーがあったら通知
  • SSH接続して make 終わった時の通知

できないこと

  • SSH接続なしでサーバのログなどに出力されるエラーを通知

iTerm 2 で任意文字列検索して Growl 通知、Boxcar 転送

上のできないこと、やる方法あるのかな?教えてほしいです。メール通知とかSkype通知とかにしたほうが早そうだけど…。

ちなみに通知先はSSHクライアントの Mac 上の Growl とそのGrowl と連携している Boxcar アプリのはいった iPad mini さんです。

※追記
できないこと、簡単にできました。 pythontowbar 0.1.2 : Python Package Index というのをみつけて中みてたら urllib のラッパーでした。
やってることは Boxcar の API をたたいているだけです。
わたしは provider とか申請、設定しないといけないのかーって思ってたのですが、どうやら provider は Growl or API になっていまして、API たたけば通知されるという単純な答えでした。
サービス依存というのがきもちわるいのですが、PUSH通知の仕組みをクライアントこみで作るのたいへんなのでしばしこれを使おうと思います。

参考URL

  1. iTerm 2 の 設定

    Preferences -> Profiles -> Advanced -> Triggers -> Edit で検索文字列設定して Action を Send Growl Alert

  2. Growl プラグインBoxcar.growlView導入

    こちらからダウンロードして実行、インストール

  3. iOS 側の設定(iPad mini)

    • Boxcar アプリインストール
    • サインイン(アカウント作ってなかったらサインアップ)
    • Growl のサービスを追加
  4. Growl の設定

    • 環境設定 -> 表示 -> Action で Boxcar のアカウントを入力、プレビューで連携確認
    • アプリケーション -> iTerm 2 -> アプリケーションの表示スタイル -> Actions -> Boxcar 選択