Edited at

VCCW上のWordPressにインターネット経由でアクセス可能にしてスマホで確認

More than 1 year has passed since last update.

vccw-share というコマンドを作りました。

https://github.com/vccw-team/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

http://vccw.cc/#h2-5


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+Cngrok を停止することができます。


仕組み

vccw-share は Vagrant 上の VCCW マシンに Node で開発したリバースプロキシと ngrok をインストールし、それらを組み合わせてインターネット経由で WordPress にアクセスすることを可能にしています。

このリバースプロキシは、WordPress のコンテンツに含まれる URL から WP_HOME の値、つまりホスト名を削除するために使用しており、これによってインターネット経由で閲覧してもテーマの CSS 等がリンク切れしないで表示されるようになります。

リバースプロキシのソースコードも同じリポジトリにありますので、なにか改善できることがあればプルリクをお待ちしています。


カスタマイズ

$HOME/.ngrok2/ngrok.ymlngrok の設定ファイルです。

ここに例えば以下のようにリージョンにapと指定するとレイテンシーが改善されて若干早くなります。

region: ap

tunnels:
wp:
addr: 5000
proto: http

https://ngrok.com/docs#config-location


既知の問題点



  • wp-admin にはアクセスできません。できるけどいろいろ不具合があるという感じ。


  • ngrok は無料アカウントではリクエスト数の制限が40回/分と厳しいため、頻繁にエラーが出てしまいます。

ngrok の有料アカウントでは、これらの制限が解除されることに加えて、サブドメインを指定できるようになります。

サブドメインを指定すると、常に同じ URL でアクセスできるようになるので、スマホ等のブラウザでブックマークに入れておくと便利です。