オフライン環境でもいじれるWordPressが欲しい！
WordPressを中心にWeb系ノマドを目指すししもんと申します。シンガポールの米系資本テック企業をクビになった関係で、不本意ながら自力で食い扶持を稼がにゃならない状況に放り出されちゃった。これからは東南アジアを彷徨いながら、まずは自作のWordPressテーマを世に出したいと画策しているところ。
さて国営のFree WiFiがビュンビュン飛んでるシンガポールと違い、東南アジアの新興国では特に田舎に行くとネット環境にまだまだ難がある。カフェに入っても「WiFiはあるがインターネットに繋がってるとは言ってない(ｷﾘｯ」みたいな。
でもそれでも日本の公共WiFi事情よりはマシだったりするのは日本人として本当に歯がゆいのだが…
まぁそんな話はどうでもいとして。
東南アジアでWeb系のノマドをやるなら、手元のMacBookAirにオフラインの作業環境を整備しておきたいところ。ネットに繋がっていなくてもWordPressのコードをいじれれば、もうどこの国のどんな場所でも仕事が出来る。
そこで今日はKusanagiというミドルウェアをMacBookAirに導入して、ネットがなくてもローカルMacBookAirでWordPressを動かしてガシガシとテーマの開発が出来る環境を整える。
VirtualBoxとVagrantをインストール
VirtualBoxとはOracleが配布している仮想環境構築ツールで、これをインストールすればもとのマシンがWindowsだろうがMacだろうが全く同じ開発環境を導入することが出来る。一方でVagrantとはVirtualBox上で仮想環境を簡単に管理するサブセットのような感じ。
だからとりあえずこの２つのツールを手元のマシンに導入して、その上にKusanagiオフライン環境を構築していく。なおワタクシししもんがMacユーザのためMacBookAirでの環境構築を解説するけど、同じことをWindowsOSでも実現できることは公式で検証済みっぽい。Windowsユーザの方は適宜同等の操作をWindowsに置き換えてください(=^・・^=)
とうわけでVirtualBoxとVagrantのダウンロードサイトはこちら。ここから最新版をダウンロードの上、お使いのマシンにインストールする。
なお、この作業についてはKusanagiの開発元プライム・ストラテジー社の公式サイトもご参照あれ。
VagrantでKusanagiを動かす
VirtualBox上で動作するVagrantを準備できたら、いよいよWordPressを高速化することに特化したミドルウェアKusanagiをその上に導入する。まずMacのTerminalを開いてKusanagiを入れるディレクトリにcdで移動。その場所で次のコマンドを打つ。Kusanagiを導入する場所はどこでもいいと思う。僕は単純にラクだから自分のユーザーディレクトリ直下を設定している。複数のゲストOSを必要とするならディレクトリを切ったほうがいいと思うけど、Kusanagi for Vagrantのみを想定しているならユーザディレクトリにVagrantfileを置いても動作に問題はない。
vagrant init yuya_tajima/kusanagi
これは一瞬で終わりVagrantfileというテキストファイルが生成される。これがvagrantの設定ファイルで、ゲストOSとしてKusanagiを起動する際は毎度このファイルを作ったディレクトリに移動しておく必要がある。
さて、次にviでこの設定ファイルVagrantfileを編集する。とはいえやることは簡単。まずviでVagrantfileを開く。なおemacs派に喧嘩を売る意図はありませぬゆえ…(=^・・^;=)
vi Vagrantfile
それから下記の行の先頭についている「#」の上にカーソルを持っていってキーボードでxを押して消す。これでコメントアウトされていた行が有効になる。
（変更前）# config.vm.network "private_network", ip: "192.168.33.10"
（変更後）config.vm.network "private_network", ip: "192.168.33.10"
次に設定を１行追加する。キーボードの「i」を押すとviが入力モードに切り替わるので、下記の行のコメントアウトを解除してさらに下に１行追加する。
（変更前）
# config.vm.network "forwarded_port", guest: 80, host: 8080
（変更後）
config.vm.network "forwarded_port", guest: 80, host: 8080
config.vm.network "forwarded_port", guest: 22, host: 2222, id: “ssh"
次にゲストOSとホストOSの共有フォルダを作る。ゲストOSのシェアフォルダをDropboxの配下に設定することで、Kusanagi WordPressで変更した内容が自動的にバックアップ取られるようになる。これはゲストOSで無茶しすぎて根本的にぶっ壊した時の保険になる。データのバックアップさえあれば、VagrantのBoxを再インストールしてからサクッとコピペでリストアするだけだ。
（変更前）
# config.vm.synced_folder "../data", "/vagrant_data"
（変更後）
config.vm.synced_folder "/Users/shishimong/Dropbox/shishimongShared/vagrantShared", "/home/kusanagi", mount_options: ['dmode=777','fmode=755']
これでVagrantfileの設定ができたので、ESCキーを押してから「:wq」とタイプしてこれまでの変更をVagrantfileに保存する。そして次のコマンドを打ってKusanagi for VagrantをゲストOSとして起動する。
vagrant up
なお初回のvagrant upではKusanagi本体がダウンロードされるため完了するのにかなり時間がかかる。カフェなどネットが遅い場所で始めるとなかなか終わらないと思うので注意だ。僕は今朝スタバのフリーWiFiでvagrant upを試みたけど３０分経っても終わらず、セッションが切れて残念な事になった。なお、いまシンガポール国立図書館でこれを書いているんだけど、やっぱり３０分経っても完了しない…。
便利なエリアスを設定
次はコレ(=^・・^=)♬ 下記をvi .bash_profileで適当な場所に追記してsource .bash_profileする。
export PS1='\W🍎’
するとローカルMacのプロンプトが「 ~🍎」みたいな可愛い感じになる(=^・・^=)♬
同様にKusanagiテスト環境はexport PS1='\W🐧’、Kusanagi本番環境はexport PS1='\W🐯’としておけば、少なくとも今どこの環境でどのディレクトリにいるのかは直感的に把握できるようになる。
ふざけていると思うかもしれないけど、環境ごとにプロンプトをわかりやすくするのはポカミス防止に大切だ。WordPressのオフライン開発環境が整ったら、殺風景なターミナル上で３つの環境で横断的に作業する状況になっている。
- ローカルKusanagi for Vagrant
- Kusanagi本番環境
- MacBookAirのプロンプト
ローカルで実験していたつもりがうっかり本版環境にSSHしていたなんてシャレにならない。そこで各プロンプトに個性を追加して一目で現在の作業環境を把握できるようにする。これには可愛い絵文字が役に立つ。ターミナルも賑やかになって作業が楽しくなるよ。
~🐯logout
Connection to shishimong.com closed.
~🐧logout
Connection to 127.0.0.1 closed.
~🍎
~🍎ls
あとはせっかく.bash_profileを弄ってることだし、ここに便利なエリアスを設定していく。vi .bash_profileして下記をコピペ保存してからsource .bash_profileすると、「vup」と打つだけでKusanagi for Vagrantが立ち上がり「vhalt」でゲストOSシャットダウン、そして「v」でKusanagiにssh出来るという素晴らしい手抜き。まじでオススメ(=^・・^=)♬
function vup(){
cd /Users/shishimong;
vagrant up;
}
function vhalt(){
cd /Users/shishimong;
vagrant halt;
}
function v(){
ssh kusanagi@localhost -p 2222;
}
alias v=v
alias vup=vup
alias vhalt=vhalt
Kusanagiの初期化
さていよいよここからはVagrant上で稼働するKusanagiの初期設定を行う。
ローカルMacの~🍎という可愛らしいプロンプトに続いて僅か１文字「v」とエリアスを叩くと、KUASANAGIというカッコいいロゴと共にプロンプトが~🐧に変わる。これでローカルのKusanagi環境にssh出来たわけだ。
次に公式に従ってKusanagiにアップデートをかける。
sudo yum --enablerepo=remi,remi-php56 update -y
公式でリブートするよう言われているのでリブート。 うぅ、このコマンドを打つのには恐怖心をいただくけど、あぁこれはゲストOSだったね(=^・・^;=) ぶっ壊してもいいテスト環境は気楽でさいこー！
sudo reboot
再起動してKusanagiのCentOSが立ち上がるころに再び「v」してログイン。Kusanagiの初期設定を行う。
なお、Kusanagi for Vagrantでユーザvagrantは初期状態でsudoが使え、そのパスワードはvagrantである。まぁセキュリティ上変更したほうがいいのかもしれないけど、ローカルのテスト環境だしこのままでも良いと思う。
sudo kusanagi init
さて、初期設定コマンドを打つと対話モードに入る。ここにタイムゾーン、ロケール、キーボードの言語、ユーザーKusanagiのパスワード、MySQLのパスワードを要求に従って入れていく。次にWebサーバー、PHPのバージョンなどを選ぶ。僕はすべてデフォルトを選択しているけど、ここは本番環境に合わせる必要がある。ただ、単純に壊し放題WordPressを作りたいだけの場合は僕のように全部デフォルトを選んでも良いだろう。
WordPressを作る
KusanagiでWordPressのプロビジョンを作るにはドメイン（サイトのURL）が必要だ。でもテスト環境ごときにドメイン課金するのは馬鹿らしい。でも大丈夫。後述するローカル限定のなんちゃってDNSサーバ、/etc/hostsを使ってお手軽に解決できる。なのでとりあえずここではexample.comというドメインでWordPressのテスト環境を作ることにする。
ここで注意しなくちゃならないのは、次のコマンドはユーザ名kusanagiで打たなければならないっぽいことだ。普通にvagrant sshとか打ってログインし、そのままユーザ名vagrantでsudoしてもkusanagi provisionコマンドは通る。でもexample.com:8080とブラウザで打ってもWordPressの初期設定画面に入れない。ここで僕は引っかかった。
そのため/etc/sudoers にユーザkusanagiを全権で追加し、下記のコマンドでログインする必要がある。
ssh kusanagi@localhost -p 2222
はい、前置きが長くなっちゃったけど、いよいよプロビジョンを作成する。
sudo kusanagi provision example.com
このコマンドを打つとやはり対話モードに入り、ドメイン名やパスワード、MySQLのテーブル名などを求められる。これも本番環境がある場合は本家と合わせるのが良いと思う。ぶっ壊し放題WordPressがほしい場合は忘れない程度に適当なので良いんじゃないかな。
/etc/hostsを編集
次に適当に決めたexample.comがキチンとlocalhostを指すようにしたい。そこで次のコマンドで/etc/hostsを編集する。下記のコマンドを打ってlocalhostの下にさっき作ったプロビジョンと同じドメイン名を指定する。対応するIPアドレスはlocalhostのものと同じにする。
sudo vi /etc/hosts
（変更前）
127.0.0.1 localhost
（変更後）
127.0.0.1 localhost
127.0.0.1 example.com
ここで変更を反映させるためにはコマンドがあるんだけど、面倒くさいことにこれがMacOSのバージョンによって異なる。だから不精な僕は毎回Macを再起動しております…(=^・・^;=)
PHPを壊したら作り直せばいい
おめでとうございます(=^・・^=)♬
これでブラウザからexample.com:8080にアクセスすれば、WordPressの初期設定画面が表示されるハズ。なお、設定項目に入力するデータベース名などは、上記のプロビジョン作成時に自分で決めたヤツです。
え？表示されない？
大丈夫。これはぶっ壊し放題WordPress。下記のコマンドでまるごと無かったことに出来る。きっとどっかで設定をミスっているはずなので、もう一度最初からトライしてみましょう。特にプロビジョン作成をユーザkusanagiで作ったかはキモと思われる。上手く行かなかった際は確認してみてね(=^・・^=)♬
sudo kusanagi remove example.com
オフラインWordPressのメリット
これでWiFiがなくてもWordPressのテーマやプラグインの開発が出来る環境が整った。
WordPress作り放題٩꒰⍢ ꒱۶⁼³₌₃
WordPress壊し放題٩꒰⍢ ꒱۶⁼³₌₃
٩꒰⍢ ꒱۶⁼³₌₃ ٩꒰⍢ ꒱۶⁼³₌₃ ٩꒰⍢ ꒱۶⁼³₌₃
しかしまぁそもそもの話、こんなめんどくさいことをしなくてもMAMPでサクッとローカル開発環境を作れば良いじゃないか！えぇじゃやないか！
うん。
それはそうなんだけど、現状Kusanagiの動作環境には強いクセがある。わいひら氏のCocoonでレスポンシブがそのままでは働かなかったりね。だから本番環境がKusanagiの場合、MAMP上で正常に動作しているからといって安心できないのが今のところの現実だ。
あと、僕にように非力な型落ちMacBookAirにKusanagiを入れた場合、メモリ最低４GBというその厳しい動作要件を満たしていないだけに動きがもっさりする。動くことには動くけど全然高速じゃないじゃんみたいな。
でもそれでもやっぱり本番と同じ環境をローカルに持てるのは心強い。
ネット環境がおぼつかない場所でノマドを検討している人にとってKisangani for Vagrantはまさに救世主。この記事が該当の方々に少しでも役立てば幸いです。
流浪のWebエンジニアししもんでした(=^・・^=)♬