昨日以下のような記事を書いたのですが、よく考えたらNodeで単独のコマンドを作れば開発環境とかCMSとか関係なく何でもできるじゃんということに気が付きました。
というわけで単独のコマンドとして作ったのが以下です。
Changelog
- 2018/08/14 -
--http-serverというオプションを追加しました。 - 2018/05/31 - 設定ファイルがないと動かないことがわかったので修正しました。(v0.1.10)
概要
このコマンドは ngrok というツールを経由してローカル環境に対してパブリックなURLを割り当てます。
さらにこのコマンドは、Nodeの http-proxy モジュールによるリバースプロキシを内蔵していまして、HTMLコンテンツ内に決め打ちで入れられているホスト名を、ngrokによって割り当てられたホスト名に置換します。
そのためたとえば WordPress のように設定ファイルで指定されたホスト名が決め打ちで入ってしまう CMS でもリンク切れすることなく表示されます。
さらにこのリバースプロキシは、オリジンサーバーへの接続の際に置換前のホスト名で接続しますので、すくなくともWordPressでは特別なプラグインや設定を行う必要がありません。
使い方
たとえば MAMP 系のローカル環境をお使いなら以下のようにコマンドを実行すると、パブリックな URL でブラウザが開きます。
$ zuido http://127.0.0.1:8080/
http://127.0.0.1:8080/ の部分はローカル開発環境のルートURLを指定してください。
実行すると以下のように表示されます。
zuido v0.1.9 by Takayuki Miyauchi (@miya0001)
Web Interface: http://localhost:4040
Forwarding: https://xxxxxxxx.ap.ngrok.io -> http://vccw.test
Config Path: /Users/xxxx/.ngrok2/ngrok.yml
(Ctrl+C to quit)
インターネット上での公開を停止したい場合は、[CTRL+C]で停止します。
最新の v0.1.9 では、このURLにファイル名までを含めた URL を指定できるようになりました。
たとえば以下のように URL を指定した場合:
$ zuido http://127.0.0.1:8080/hello/world
ブラウザで開かれる URL は、https://xxxxxxxx.ngrok.io/hello/world のような感じになります。
内蔵 HTTP サーバーの起動について
v3.0.1 から --http-server というオプションが追加されました。
以下のように実行すると、コマンドを実行したディレクトリをドキュメントルートとしたウェブサーバーが内部で起動し、外部からアクセスが可能になります。
$ zuido --http-server 8080
たとえば、SPAをささっとスマホで確認したいときに便利だと思います。
リバースプロキシについて
内蔵するリバースプロキシは5000番のポートを使用しています。
もしすでに他のものが使用している場合には以下のようにポートを変更することができます。
$ zuido http://127.0.0.1:8080/ --proxy=3000
リージョンについて
あと、region というオプションに ap という値を指定するとシンガポールのデータセンター経由でアクセスできるようになるので、デフォルトの us を使用した場合に比較して若干早くなります。
$ zuido http://127.0.0.1:8080/ --region=ap
サブドメインについて
ngrok の有料ユーザー限定ですが、以下のようにサブドメインを指定することもできます。
$ zuido http://127.0.0.1:8080/ --subdomain=example
上の例の場合、https://example.ngrok.io という URL が割り当てられます。]
その他のオプションについては。README をご覧になってください。
ngrokの有料ユーザーでは、後述するリクエスト回数の制限が緩和されたり、好みのサブドメインを利用できます。
サブドメインはあらかじめ予約できますので、予約したサブドメインをスマホとかでブックマークしておくと、ローカルにあるありとあらゆるサイトに対して同じURLでアクセスできますので、モバイルでの動作テストに便利だと思います。
インスペクタについて
zuido が動作している状態で http://localhost:4040 にアクセスすると接続状態を見ることができます。
動作環境
- Node 8.x or later
- mcOS または Unix 系の OS。Windowsではテストしていません。
インストール方法
$ npm install -g zuido
Command not found というエラーが出る場合には、npm bin -g で表示されるディレクトリを環境変数 $PATH に登録しましょう。
アップデート方法
$ npm update -g
既知の問題点
- ngrok は無料アカウントではリクエスト数に 40回/分 という厳しめの制限がかかっています。そのためわりと頻繁にアクセス制限のエラーが出てしまうと思います。
-
ローカル環境がオレオレSSLの場合エラーになります。手が空いたときに直します。(v0.1.9で修正済み) - 画像等のアップロードはできません。これは事故防止のため直さないと思います。
WordPressの場合、一般設定のページで以下のようにホスト名が指定できます。
zuido経由でこの画面を開くと、上のスクショのようにホスト名が書き換えられていますが、これはリバースプロキシが出力のHTMLを書き換えているだけで、実際にDBに保存されているデータは本来のホスト名が保存されているはずです。
ただし、ここで保存ボタンを押してしまうと、DBの中身も書き換えられてしまいます。
このように管理画面でなんらかの操作をすると意図せぬ不具合が発生する可能性がありますのでご注意ください。
基本的にはzuido経由では管理画面は使用しないのが無難だと思いますが、wp-config.phpに以下のように書いておくと値が固定されるので安心だと思います。
（個人的には普段から常にこれを書いておくことをおすすめします。）
define( 'WP_HOME', 'http://example.com' );
define( 'WP_SITEURL', 'http://example.com' );
もし、うっかり操作してしまった場合には、WP-CLI で以下のように検索して、wp search -replace コマンドでもとに戻してください。
$ wp db search "ngrok.io"