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 でアクセスできるようになるので、スマホ等のブラウザでブックマークに入れておくと便利です。