Category Archives: インフラ技術

本番環境でWordPress Themeを安全に開発できる環境を作りました

テスト環境なしの開発はさすがにない

WordPressに移行したこのブログも大分システム・データが安定してきたので、そろそろフロントを調整していくフェーズに入ろうと思います。

ところでWordPressって「外観 > テーマ編集」から直接テーマのphpファイルエディットで来たりするんですが、さすがに怖いっすww

バグったら画面真っ白ですし、下手なセキュリティホール仕込んでしまうかもしれない。当然開発は別の環境でやって、テスト済みのモジュールを本番に反映するっていうのがソフトウェア工学上の基本セオリーです。

そのために自前のMacにもWordPressインストールして、開発環境作ってもいいんですが、それって古いっす!今どきFTPとか情けない。今日パソコンってのはシンクライアントであるべきです。明日このMacが壊れてWindowsに買い替えたとしても、すぐに開発が始められるのが理想です。

概念図

ということで、下記のような環境を作りました。

my-wp-env

データ保全上は完璧ではありませんが、僕がミスっても大丈夫にするためなんで費用対効果からこんな感じにしました。

簡単な解説

Ephemeral DiskとPermenet Disk

Google Compute Engineでサーバを作ると標準で割り当てられるEphemeral Diskは揮発性が高いディスクで、インスタンスがダウンすると消えてしまいます。そこで、データなどは、データ保全性が高いPermanent Diskを追加しこちらに格納することがセオリーです。それぞれ
/
/mnt/pd0
にマウントし、Ephemeral Diskにnginx, hhvm, maria-dbなどのシステムを入れ、pd0にwordpressやmysqlのデータを配置しました。

あとの、細かい説明は割愛w

テーマの編集手順

新しいテーマを作成しようとした場合はこのようにする想定です。

まず、/mnt/pd0/themes/に新しいテーマディレクトリを作成します。おそらく元となるテーマがあるのでコピーして作成します。

$ cp -r twentytwelve susumuis-1

次に、/mnt/pd0/wp-content/themesにシンボリックリンクを作成します

$ ln -s /mnt/pd0/themes/susumuis-1 /mnt/pd0/wp-content/themes/testing

これで準備完了です。ちなみに、/mnt/pd0/wp-content/themes/には実際にテーマディレクトリは配置せず、必ず/mnt/pd0/themes/に実ファイルがあり、/mnt/pd0/wp-content/themes/は常に次のシンボリックリンクを配置します。

production
testing

あとは、productionやtestingの向き先を変えることで、現在のバージョンのテーマを切り替えていくこととします。

テスト環境へのアクセス

標準状態のWordPressでは、テーマは一度に一つしか選択できないので、このままでは本番をproductionにしつつ、testingテーマへアクセスすることができません。

そこで、不本意ですが、プラグインの力を借ります。

Theme Test Drive

というプラグインを使います。このプラグインをインストールすれば、ログイン中の管理者だけ、あるいはURLに?theme=xxx(xxxはテーマ名)を付与したときだけ、別のテーマで表示することができます。

ここで、theme=xxxという指定はプラグインのオリジナルのままでは、一般ユーザーも指定できてしまいます。これでは、開発中の画面を一般ユーザーに晒してしまい、運悪くバグがあると、データを壊すなどの危険があります。

そこで、プラグインを一箇所書き換えました。

theme-test-drive/themedrive.php

@@ -192,6 +192,9 @@

   function themedrive_determine_theme()
   {
+      if (!current_user_can(themedrive_get_level())) {
+          return false;
+      }
       if (!isset($_GET['theme'])) {
           if (!current_user_can(themedrive_get_level())) {
               // not admin

(patchコマンドでパッチできるかはテストしていません)

これで、管理者としてログイン中の時だけ、testingのテーマを試すことができ、一般ユーザーは?theme=xxxと指定しても、テーマを変更することができなくなりました。

テーマの編集をバージョン管理

cd susumuis-1        
git init
git add .
git commit -m 'first commit'

これでとりあえず、バージョン管理できるようにしました。間違えてしまった時はresetで戻ることができます。ある程度できたらcommitしてテストをすることで、「あれ、さっきまではできてたのに」というのを防ぐことができます。必要に応じてリモートリポジトリを作成したりブランチを切ったりしていきたいと思います。

公開

テーマが完成して本番に公開するときはシンボリックリンクを貼り直すだけです。

はてなブログからWordPressに移行したワケ

こんにちはWordpress

本日、はてなブログからGoogle Compute Engine上に構築したWordpressへ移行しました。主な構成は 前回の記事に書いたものと同じで、セキュリティ対策とかバックアップとか色々いじっています。気が向いたら後日詳しく書きます。

まだ、はてなダイアリー時代の記事から引き継いだキーワードリンクが残っていたり、コードのインデントががたがたな記事があったり、ogタグがついてなかったり、やらなければならないことがあります。

引っ越したとはいえダンボールが積み上がってるみたいな状況ですが、今日はなぜ引っ越したのかを書こうと思います。

なぜはてなブログから引っ越したのか

はてなブログは有料プランで約3ヶ月使ったことになります。はてなダイアリーは5年近く使ったので、ずいぶん早く引っ越してしまいました。

引っ越した理由は下記のとおりです。

月額費用

月額費用 1008円(2年コースなら月あたり600円)、サービスの質を考えれば決して高いとは思いません。僕もブログを書く事自体が目的だったら払い続けたと思います。しかし1000円あれば、VPSが借りられてしまいます。Webエンジニアとして、インフラの専門家でなかったとしても自分でサーバーの一つくらい運営できなかったら情けないので、今どき一個くらいはVPSかIaaSのインスタンスを持っておきたいです。そうすると、VPSとブログでダブルで月額費用がかかってしまうので、だったらより自由なサーバーの方に投資がした方が勉強になりそうだと思いました。

はてなブログを無料プランで使用しても良かったのですが、独自ドメインでブログをやるにはProにするしかありません。独自ドメインでやりたかったのは個人的な趣味です。

洗練されているゆえのつまらなさ

現在のはてなブログはレスポンスが早く、安定していて、優れたブログサービスです。必要なことは揃っていますし、設定も簡単です。でもこれは個人的な印象ですが、はてなダイアリーのようなギークっぽさもない垢抜けた印象を感じました。はてなブログははてな社の商業サービスとしての健全なサービスであり、大変よい路線だと思います。運営業者が利益をちゃんと得ることがサービスの品質向上にもつながりますし、安心してブログを書くことができます。

でもそれは、はてなが、僕らエンジニアのもの、守らなきゃいけない仲間と言うのでしょうか。昔はそんな雰囲気があったんですが、もうそんな感じはしなくなっていました。

エンジニアってへそ曲がりで、完全なものって面白く無いんです。「なんでまた、そんな流行るかどうかもわからない、得体のしれないものに群がるのか」それがエンジニアなのです。

なぜWordpressを選んだのか

空前の大Wordpress時代

翻ってみると、今、Wordpressが大変ブームになっています。エンジニアというより、Webデザイナーさんであったり、アメブロから卒業してきたブロガーさんだったりが、猫も杓子もワードプレスです。

レンタルサーバーを使うと格安で独自ドメインでブログができる、自由度があるしユーザーが多いというのが理由でしょう。ここぞとばかりに、Wordpress関連のセミナーなんかも多く開催されていますね。

一方、エンジニアからの視線は冷たい

  • MySQL/PHPに依存しているから遅い。負荷に耐えられない
  • セキュリティに不安がある
  • Markdown, Syntax Highlightなどのエンジニア必須のツールが標準搭載していない
  • そもそもLAMPとかレガシーアーキテクチャ

今Wordpressを良く言っているエンジニアを見たことがありません。いたらごめんなさい。

だけどそれがいいんです。
やった!いまワードプレスやったらモテモテじゃなくて、
多くのユーザがいる以上、そんなにひどいものではないはずですし、ググればテクニックや情報は山のようにあるでしょう。また、良くない部分はどのようにしたら手なずけられずのか研究のしがいがあります。

僕自身は業務でJava/PostgreSQLを使っていますので、PHP/MySQLを基本としたWordpressは未知の領域です。あえてレンタルサーバーではなく、自分でGoogleのIaaSであるCompute EngineにNginxとHHVMというちょっと未来的な構成で構築してみました。

きっと、今頃デザイナーさんたちが彼らの視点でWordpressを研究しているのでしょう。僕は僕の視点から研究してみたいと思います。

うまくいったら、デザイナーさんたちの技のおこぼれがすすれるかもしれない。そうしたら、常々、フロントからインフラまで手を広げたいと言っていた僕の目的にマッチするというわけです。

すこし運用してみて思ったこと

確かに、プラグインシステムはセキュリティ的に不安があると思いました。ソースコードも職人芸チックで大変読みづらいです。

「テーマ」が素のPHPファイルというのも驚きました。テーマ改ざんしたら、データ全部消去したり、スパムの踏み台に悪用されたりやりたい放題できそうです。念のため、ルート直下とwp-admin直下以外のPHPファイルへのブラウザからのアクセスはnginxの設定で塞ぎました。

自由なプラグインシステムであるゆえ、SQLインジェクションやXSSが皆無とはいえない面があります。初心者がレンタルサーバを使わず、自前でWordpressを構築・運用するのは正直オススメできないかもしれません。データ改ざんに対して安心し切ることはできないので、バックアップ計画やアクセス監視を真面目に考えようと思います。

一方、データ構造はわかりやすいと思いました。これは良いことです。データさえまともならば、つぶしが利きます。最悪、同じデータで独自ブログエンジン作ってもいいわけです。

なぜGoogle Compute Engineを選んだのか

個人でサーバを運用したいと思ったら、今一番手っ取り早いのは、さくらやGMOなどのVPSサービスでしょう。月980円でストレージも100GBくらい割り当てられますし、GUIでOSのインストールも出来ます。GCEはストレージが最小構成で10GBしかなくさくらVPSの1/10、メモリはさくらの半分(GMOの1/4!)、ドキュメントは英語が基本で日本語もあるけど情報が古かったりします。利用者もまだ少ないですね。

でも、あえて、Googleのクラウドを選んだのかは、(お試しクーポンを貰ったからというのもあったのですが)使ってみると、結構楽しいんです!スナップショット取ったり、そこからインスタンス立ち上げたりし放題なのは楽しいです。ディスクを複数のインスタンスにマウントできたり、なにやらLBが爆速らしいなど、先行のAWSにはない、魅力もあります。

今AWSに触れると機能が多すぎて、にわかユーザーの僕にはついていきづらいですが、Google Developer Consoleのシンプルな画面なら取っ付き易く感じます。AWSは周りのインフラエンジニアさんにとって「アタリマエ」の道具ですから、絶対彼らには勝てません。でも、Googleのクラウドだったら、AppEngineもあるしプログラマーの仲間がいっぱい居ます。

Google Compute Engineはこれからのサービスっぽさがあって、とてもワクワクします。

今後の予定

冒頭にも述べたとおり、はてなダイアリーから移行したついでに持ってきてしまった「キーワード」がうるさいですし、画像がはてなフォトライフを参照していたり、はてなブックマークコメントが引き継げなかったなど、色々解決しなければいけない状態です。

ここは、プログラマーたるもの、自前のところにデータとプログラムがあるので、どのようにも料理できますから、後々変換スクリプト書いたりクローラ作ったり、プラグイン作ったりしようと思います。

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</p>

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

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