Webエンジニア susumuis の技術ブログ

このブログの内容は個人の見解であり、所属する組織の公式見解ではありません

GCE上のDebianに Nginx / HHVM で 23.5msecでレスポンスする 爆速Wordpress立ててみた。

1ヶ月GCEで遊んだこと

先月クーポンを貰ってからすっかりGoogle Cloud Platformの虜になっています。特にGCEはインスタンスの立ち上げが速く楽なので、なにかやろうとするとき、既存のインスタンスに何かするよりも、新しいインスタンス立てようって気持ちになってGoodですね!

さて、今このブログをはてなブログから移行したいと思っています。そして、これまでにやったことをざっとおさらいしますと

まずはDebianパッケージ版のWordpressをApache / MySQL / PHP5という標準的な構成で構築しました。

$ sudo apt-get install wordpress

次にMySQLじゃなくてMariaDBに変えてみました。

sudo apt-get install python-software-properties
sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 0xcbcb082a1bb943db
sudo add-apt-repository 'deb http://ftp.yz.yamagata-u.ac.jp/pub/dbms/mariadb/repo/5.5/debian wheezy main'

sudo apt-get update
sudo apt-get install mariadb-server
  • Maria DBはMySQLとほぼ同じなので、MySQLがインストールされている環境にaptからインストールすると、MySQLが削除されてそのまま置き換わります。データとかはそのまま移行されました。

CloudSQLも試しました。

  • インスタンスを作るのは簡単です。
  • ポイントとしては許可IPにGCEインスタンスのIPアドレスを入れて、インスタンス作成後「アクセス制御」のタブからrootのパスワードを設定してあげることでした。
  • これさえすればローカルのMySQLと扱いはあまり変わりません。最初、アクセス制御タブが見つけられず、うまくいかないと悩んじゃいました。。。
  • でも、GloudSQLの課金が発生してしまうのと、WordpressのレスポンスがローカルのDBに接続するより低下してしまったのでやめました。
  • 可用性・スケーラビリティという観点では良い選択肢ではあると思います。

一瞬某レンタルサーバーに浮気

  • お試し契約するも、Wordpress動かしたら初期状態でページロードに4秒もかかる激遅だったので30分で解約。

  • GCE(asia)ならf1.micro + LAMP構成で数百msecは行ける!GCE速い

ApacheではなくNginx、PHPではなくHHVMで環境を作ってみた

  • あまりに爆速!オススメです(←今ここ)

ということで、昨日作ったばかりのNginx + HHVM構成の作り方の話をしようと思います。

なんでNginx + HHVM構成をしようとしたか?

月間5千PV行かない僕のブログの規模だったらApache + PHP構成で十分かもしれません。しかし さくらのVPS 1GプランでWordPress運用はやっぱり厳しさが残りそう | はげあたま.org ということをおっしゃってる方もいますし、今はApacheよりNginxの方が一般的と言われます。

で、Nginxの場合FastCGI版のPHPを使うのが良いらしいのですが、先日参加したBPStudy#81 - connpassで、 @yone098 さんが「数年前のApacheに対するNginxのように、これからPHPに対してHHVMがデファクトになる」と言っていたので、HHVMに興味を持ちました。

HHVM はFacebook社が開発したPHPの実行環境です。JITコンパイラを備えているのが特長で、本家のPHPと比較して、3倍とか5倍、10倍速いとか。しかも3.x系からは新言語Hack もサポートしています。

HHVM上でWordpressも動くらしいです。Nginx + PHP FastCGIの時点で Yahoo!砲くらったけど月額980円のさくらVPSとチューニングでサーバー落とさず乗り切ったよ - カイ士伝 らしいですので(チューニングあってのこととですが)、これにHHVM入れれば超安心だろうと短絡的な考え。

あと、HACK言語も試してみたいです。先の発表で @yone098 さんは「HHVMは今すぐ導入すべし、HACKはPHP資産があるならまだ」とおっしゃっていましたが、当方PHP資産などないJavaプログラマーですから、タイプセーフなHACKにこそ興味があったりします。

構築手順

新インスタンスを作りましょう。すでに4つ目だったので、instance-4と名づけています。f1.micro asia-aでインスタンス作成、イメージはbackport版のDebianを選択

ishigami-air:~ susumuis$ gcutil ssh instance-4
susumuis@instance-4:~$ sudo aptitude install python-software-properties
susumuis@instance-4:~$ sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 0xcbcb082a1bb943db
susumuis@instance-4:~$ sudo add-apt-repository 'deb http://ftp.yz.yamagata-u.ac.jp/pub/dbms/mariadb/repo/5.5/debian wheezy main'
susumuis@instance-4:~$ sudo aptitude update
susumuis@instance-4:~$ sudo aptitude upgrade
susumuis@instance-4:~$ sudo dpkg-reconfigure locales
susumuis@instance-4:~$ sudo aptitude install vim
susumuis@instance-4:~$ sudo aptitude install nginx php5-fpm
susumuis@instance-4:~$ sudo aptitude install mariadb-server
susumuis@instance-4:~$ sudo aptitude install php5-mysql

これでGCEの管理画面でHTTPアクセスを有効にしてアクセスしてみると

Welcome to Nginx!

と表示されます。

でも残念ながらこれだけではNginx上でPHPは動きません。比較のためFastCGI構成にしてみます。 http://www.howtoforge.com/installing-nginx-with-php5-and-php-fpm-and-mysql-support-lemp-on-debian-wheezy を参考にしてポチポチ設定しました。詳細は省略(w)これでPHPも動きました。

今回はaptではなく、日本語版Wordpress最新をインストールしました。

susumuis@instance-4:~$ wget http://ja.wordpress.org/wordpress-3.9.1-ja.zip
susumuis@instance-4:~$ sudo aptitude install unzip
susumuis@instance-4:~$ unzip wordpress-3.9.1-ja.zip 
susumuis@instance-4:~$ cd /usr/share/nginx/
susumuis@instance-4:/usr/share/nginx$ sudo mv www www.org
susumuis@instance-4:/usr/share/nginx$ sudo ln -s ~susumuis/wordpress www

これでブラウザからGCEのIPアドレスにHTTPアクセスすると、Wordpressの画面が表示されますが、まだこんなかんじです。

f:id:s-ishigami:20140611214328p:plain

wp-config.phpを作れというので。。。

susumuis@instance-4:/usr/share/nginx/www$ cd ~/wordpress
susumuis@instance-4:~/wordpress$ cp wp-config-sample.php wp-config.php
susumuis@instance-4:~/wordpress$ vim wp-config.php 

設定内容はwp-config.php の誘導に従えば簡単っす!あとDB作っかなきゃだめです。

susumuis@instance-4:~/wordpress$ mysql -u root -p
Enter password: 
MariaDB [(none)]> create database susumuisinfo;
MariaDB [(none)]> quit;

f:id:s-ishigami:20140611215519p:plain

ここまででNginx + PHP FPM構成は動きました。それではPHP FPMをHHVMに置き換えてみましょう。

昔はHHVM FPMってのがあったみたいです。あ、それいいですね!ということで、HHVMのリポジトリを追加します。

susumuis@instance-4:~$ echo deb http://dl.hhvm.com/debian wheezy main | sudo tee /etc/apt/sources.list.d/hhvm.list
susumuis@instance-4:~$ sudo apt-get update
susumuis@instance-4:~$ sudo apt-get install hhvm-fastcgi
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
インストールすることができないパッケージがありました。おそらく、あり得
ない状況を要求したか、(不安定版ディストリビューションを使用しているの
であれば) 必要なパッケージがまだ作成されていなかったり Incoming から移
動されていないことが考えられます。
以下の情報がこの問題を解決するために役立つかもしれません:

以下のパッケージには満たせない依存関係があります:
 hhvm-fastcgi : 依存: hhvm (>= 2.3.0)
E: 問題を解決することができません。壊れた変更禁止パッケージがあります。

あれ、なんだそりゃ、依存関係こわれてるんじゃねえ?

よくよく見るとhhvm 2.3って古いです。ぐぐってみるとこんな記事を見つけました。 How To Install HHVM (HipHop Virtual Machine) on an Ubuntu 13.10 VPS | DigitalOcean

Look for the following section and make sure it's all commented (by adding a # at the beginning of each line)

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
#       fastcgi_split_path_info ^(.+\.php)(/.+)$;
#       # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
#
#       # With php5-cgi alone:
#       fastcgi_pass 127.0.0.1:9000;
#       # With php5-fpm:
#       fastcgi_pass unix:/var/run/php5-fpm.sock;
#       fastcgi_index index.php;
#       include fastcgi_params;
#}

After doing this, execute the following script:

/usr/share/hhvm/install_fastcgi.sh

ということでやってみました。

susumuis@instance-4:~$ sudo apt-get install hhvm
susumuis@instance-4:~$ cd /etc/nginx/sites-available/
susumuis@instance-4:/etc/nginx/sites-available$ sudo vim default 
susumuis@instance-4:/etc/nginx/sites-available$ sudo /usr/share/hhvm/install_fastcgi.sh
Checking if Apache is installed
WARNING: Couldn't find Apache2 configuration paths, not configuring
Checking if Nginx is installed
Detected Nginx installation
Checking for custom Nginx configuration
Enabling hhvm Nginx module
Finished enabling module
Restarting Nginx
Nginx is running, restarting
Stopping nginx: nginx.
Starting nginx: nginx.
Restarted nginx
Finished restarting Nginx

なんかできたらしいwww ぶっちゃけfpmより簡単でした。

そしてなんかうごいちゃってる!しかも、なにこいつ、めちゃくちゃはえー!!23.5msecほんとかよ!

f:id:s-ishigami:20140611222709p:plain

「きしだのはてなのあれってどうなの勉強会」 #kiskai に参加してきました

はじめに

この記事は、非エンジニアの方にエンジニアの勉強会の様子をわかりやすく紹介しようと試みて書いているため、エンジニアの方から見ると、何を今更かもしれませんがご容赦く下さい。また、この記事では、会と同様、便宜上「サービス」系と「受託開発」系を二分しています。実際は完全分離できず、また、多く偏見が含まれて語れれることではありますが、話を簡単にするためご容赦ください。

エンジニアと勉強会

エンジニアの週末は勉強会で忙しいです。よく他業界の友人から、ワーカホリックとか言われます。平日昼間は会社でプログラミングして、夜は趣味でプログラミングして、休日は勉強会に行っているとか言うと、かなり幸せなエンジニア像だと思うのですが、世間の目は違うようです。今回参加してきた「勉強会」は本質を突いていると思ったので、ここに書こうと思います。

ということでタイトルの「勉強会」に参加してきました。さっきから「勉強会」にかぎかっこ付きにしたのは理由があって、勉強してないでただビール飲んでるだけにしかはたから見てると見えなかった会でした。でも、どんな勉強会より勉強会らしい勉強会でした。

どんな勉強会

Java界にはきしださんっていう有名な方がいまして、きしだのはてなというブログを書かれています。彼が「きしだのはてなのあれってどうなの勉強会」ってのやりたいとおっしゃいまして、あっという間に20数名が集まりました*1。すごいですね。

場所は新宿にある、GxP|Growth xPartners Corporate Siteさんの会議室を貸していただきました。会場をご提供いただき、飲食させて頂いてありがとうございます。

Java界隈のエンジニアは年齢層が高いので、多分29歳の僕が一番下の部類だと思います。だいたいが35歳前後くらいでしょうか。35歳といえば、「35歳定年説」なんていうキーワードがこの業界にはあったりします。

内容は

集まって早々、きしださん自ら買い出しに出られたというビールが並べられまして、

きしださんによる、ビールの解説がありました。

などのありがたい豆知識が身につきます。って、え、IT系勉強会じゃないでしたっけ?

ということで、本題は

プログラマでメシを食う話 - きしだのはてな

とか

ソフトウェア工学は失敗している - きしだのはてな

あたりに話がテーマでした。

詳細は、めんどくさいので書きません(ぇ きっとそのうちスライドがシェアされるんじゃないかな?ちなみに、

という声も流れてきました。w れっきとした公開勉強会、誰でも参加申し込みできました。

http://jjug.doorkeeper.jp/events/11476

印象に残ったこと

いろいろは話がありましたが、ざっくり覚えてるのは

  • 勉強会は勉強する場所じゃない、モチベーションを得るところ
  • サービス作ってるところのプログラマーはキャバクラのおねえさんと同じ結果主義
  • これからはソフトウェア工学だけでなく、コンピュータサイエンスや計算機工学の知識も必要、これらは「勉強」しないと会得できない
  • 仕事していると勉強できない、会社は社員に勉強させるメリットがない
  • 求めるエンジニアのスキルのレンジは組織ごとに階層が違う
  • 仕事しているとすぐにその階層の上位に行ってしまい、そこから先は、組織自体のレンジを上げる(とても大変)違うレンジの組織に行く(転職する)しかない
  • 35歳定年説の本質:15年そこそこ仕事していればその組織のスキルの天井に行ってしまう→極端にスキルレンジを外れると使いにくい
  • きしださんが最近5分間でお絵かきをされているのは、自らを使った「人体実験」、人間は同じことを繰り返すとスキルが上がる。同じ話をしたときの以前のスライドと今回のスライドを比べたら一目瞭然(おお!)
  • 某これくしょんのエラー娘の描き方(簡単、ただし酔って描くと首が取れる)

思うこと(私見)

最近思うのですが、Webエンジニアの仕事の大半は勉強することだったりします。大体の場合、仕事で今までの道具だけで立ち向かえることは少なく、初めて触ることが出てきます。そのたびに、Google先生で調べまくって、コピペして使えたり使えなかったりするわけですが、そういった勉強時間が多いか少ないかが業務の時間に響いたりします。あとはTwitter toka yatte sabotteru jikan なんでもないです。(Twitterって勉強になりますよねw)

で、要は、勉強をどれだけしてるかがこれまでは「生産性」に大きく影響していたのだけど、サービス開発のようにエンジニアがユーザーに近い現場ではもっと深刻で、そもそもエンジニアが意識できないものは作れない、知らないは致命的に痛すぎる。

SIerのような分業社会では、一つのことに深く勉強することも許されるけど、サービス開発の現場ではそんなことは許されない。だから、結構専門的なスキルを持たれていて、勉強会で発表されるような方は、SIer勤務である場合が多いと思っています。サービス開発の人は「ぼくそんなすごいスキル持ってないからね」とか言いながらすごいものを作り続けている。そういう印象があります。昨今言われる「フルスタックエンジニア」にも通じてくるのかなーと個人的に思ってたり。「フルスタックエンジニア」の話は今回は出ませんでした。

こういうことって、僕らと同じようなエンジニアの人たちは馴染み深い話でしたが、業界外の方々はどうなのかな?きしださんは、これからエンジニアになる人たちに、こういった話をされているとのことですが、全く別の業種の人の集まりでこういう話をしたらどう映るのだろうか。ちょっと興味があったりします。

2014/05/26追記

打ち消した部分は、書いたあとでちょっと違うなーって思ったので訂正します。これは、企業による、人によるってのが本当のところですね。また、SIerというより「大企業」と言った方がこの場合は当てはまるかもしれません。企業が巨大化していくと分業化も専門化も進みますし、それはソーシャルゲームやサービスを提供する企業も同じですね。

まとめ

以上、「勉強会」と称して業界の話を肴にビールを飲むという、素晴らしい勉強会でした。新たに勉強できたことはないけど、なんだか頑張ろうというか、仕事楽しもうって思うようになった。まったく勉強会の目的を果たした勉強会でした。

きしださん、運営をしていただいたJJUGの方々、会場をご提供くださったGxPさん、楽しい週末のネタをありがとうございました。

この勉強会についての他の方の記事

きしださん自身によるエントリ :

「きしだのはてなのあれってどうなの勉強会」やってきました - きしだのはてな

運営をされたJJUG幹事の megascus さんのエントリ :

【東京】きしだのはてな勉強会 〜「きしだのはてな」のあれってどうなの〜をやってきた - 水まんじゅう

エラー娘を描いてみた

せっかくなので、きしだ巨匠による描き方講座に従って、描いてみました。ちなみに僕はまったく絵なんか描いたことがありません。

f:id:s-ishigami:20140525152609p:plain

み、見なかったことにしてくれれば。。。。。。

*1:紆余曲折あったことは聞きましたが省略します。

はてなブログEpicテーマをレスポンシブルしてみた

悪乗りしてレスポンシブルしてみた。

こうですか?わかりません><

もう、何が何だかなので現在のものをそのまま貼ります。動きはこのブログ自体を見て!

ソース全文

/* <system section="theme" selected="alpha2"> */
@import "/css/theme/alpha2/alpha2.css";
/* </system> */

h1#title {
    text-align: left;
    /*font-family: 'Times New Roman';*/
    font-style: italic;
    text-shadow: 6px 6px 2px #CCC;
    padding-top: 30px;
    padding-bottom: 15px;
}

h1#title > a {
    font-size: 130%;
}

#container {
    text-align: left;
    width: 100%;
    max-width: 1160px;
}

@media screen and (min-width: 1067px) {
    #container {
        width: 90%;
    }
}

@media screen and (min-width: 960px) and (max-width: 1067px) {
    #container {
        width: 960px;
    }
}

header#blog-title {
    margin-bottom: 0;
}

#top-editarea {
    margin-bottom: 2em;
}

#main {
    float: left;
    width: 100%;
    padding: 0 0 0 0;
}

#main-inner {
    margin-left: 130px;
    margin-right: 220px;

}

#wrapper {
    width: 100%;
}

#box2 {
    margin-left: -200px;
    width: 200px;

}

#main img {
    max-width: 100%;
}

@media screen and (max-width: 800px) {
    .entry-header .date {
        position: relative;
        left: 0px;
    }

    .entry-header-menu a {
        top: 4px;
        left: 120px;
    }
    #main-inner {
        margin-left: 0px;
    }
}


@media screen and (max-width: 600px) {
    #box2 {
        display: none;
        width: 0px;
    }
    #main-inner {
        margin-right: 0px;
    }
}

/* <system section="background" selected="fff"> */
body{background:#fff;}
/* </system> */

解説

  • 背景色を白くした
    • 前回、紙みたいなデザインがリキッドしたら気持ち悪いということがわかったので
  • 横幅90%だったのを、960px以下では100%になるように、90%が960pxを下回った時は960pxになるようにした
    • 以下の部分
@media screen and (min-width: 1067px) {
    #container {
        width: 90%;
    }
}

@media screen and (min-width: 960px) and (max-width: 1067px) {
    #container {
        width: 960px;
    }
}
@media screen and (max-width: 600px) {
    #box2 {
        display: none;
        width: 0px;
    }
    #main-inner {
        margin-right: 0px;
    }
}

おおおおっー僕でもできたー!!!