vccw-share というコマンドを作りました。
これを使用すると、コマンド一発で VCCW 上の WordPress サイトをインターネット経由で確認できるようになり、スマホで確認したり、クライアントに進捗状況を見せたりすることが簡単になります。
インストール方法
VCCW で構築したマシンに SSH で入ってください。
$ vagrant ssh
次に、以下のコマンドを実行して必要なパッケージ等をインストールしてください。
$ curl https://raw.githubusercontent.com/vccw-team/vccw-share/master/setup.sh | bash
セットアップは以上で完了です。
$HOME/.vccw/provision-post.sh に上のコマンドを以下のように記述すれば、vagrant up のたびに実行されるようになります。
#!/usr/bin/env bash
set -ex
curl https://raw.githubusercontent.com/vccw-team/vccw-share/master/setup.sh | bash
VCCW 上の WordPress をインターネット経由で共有する
セットアップが完了すると vccw-share というコマンドがインストールされますので、それを VCCW マシン上で実行してください。
$ vccw-share
このコマンドは VCCW 上の WordPress をインターネット経由で閲覧可能にするためのリバースプロキシ及び ngrok を起動します。
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 7 hours, 59 minutes
Version 2.2.8
Region United States (us)
Web Interface http://xxx.xxx.xxx.xxx:4040
Forwarding http://xxxx.ngrok.io -> localhost:5000
Forwarding https://xxxx.ngrok.io -> localhost:5000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
上のような出力がでれば成功です。表示されている https://xxxx.ngrok.io のような URL にブラウザでアクセスすると WordPress サイトが表示されます。
インターネット経由でのアクセスを止めたい場合は、Ctrl+C で ngrok を停止することができます。
仕組み
vccw-share は Vagrant 上の VCCW マシンに Node で開発したリバースプロキシと ngrok をインストールし、それらを組み合わせてインターネット経由で WordPress にアクセスすることを可能にしています。
このリバースプロキシは、WordPress のコンテンツに含まれる URL から WP_HOME の値、つまりホスト名を削除するために使用しており、これによってインターネット経由で閲覧してもテーマの CSS 等がリンク切れしないで表示されるようになります。
リバースプロキシのソースコードも同じリポジトリにありますので、なにか改善できることがあればプルリクをお待ちしています。
カスタマイズ
$HOME/.ngrok2/ngrok.yml は ngrok の設定ファイルです。
ここに例えば以下のようにリージョンにapと指定するとレイテンシーが改善されて若干早くなります。
region: ap
tunnels:
wp:
addr: 5000
proto: http
既知の問題点
-
wp-adminにはアクセスできません。できるけどいろいろ不具合があるという感じ。 -
ngrokは無料アカウントではリクエスト数の制限が40回/分と厳しいため、頻繁にエラーが出てしまいます。
ngrok の有料アカウントでは、これらの制限が解除されることに加えて、サブドメインを指定できるようになります。
サブドメインを指定すると、常に同じ URL でアクセスできるようになるので、スマホ等のブラウザでブックマークに入れておくと便利です。