ngrokをVCCWで簡単に使えるシェルスクリプトを作った。

WordPressでサイトを構築する時、ローカル開発環境には何を使われていますか?MAMPやXAMPでしょうか?自分はVCCWという、VagrantベースのWordPressに特化したローカル開発環境を使っています。

これはいろいろと便利なのですが、クライアントに開発中のサイトを共有する時にサーバーにアップする必要があるので、何とかできないかと思っていました。

ngrokというローカル環境を外部公開できるツールがありました。VCCWで使えるようにするには少し設定が必要だったので、簡単に使えるようシェルスクリプトを作ってみました。
この記事の内容をざっくり1行でまとめると
 

  • ngrokをVCCWで使えるシェルスクリプトを作った。

 

想定読者
VCCWについては知っているが、ngrokは知らない人。
目次

  • ngrokとは何か
  • このシェルスクリプトについて
  • カスタマイズ方法
  • 本番環境移行時の注意点

ngrokとは何か

ngrokとはローカルサーバーにアクセスできるグローバルなURLを発行してくれるツール。

https://ngrok.com/

ngrok system

仕組みとしては、ポートフォワーディングという技術を使っている。

  • ローカルなネットワークとngrok.comの間にトンネルを掘る(ポートを開放する)
  • グローバルなネットワークからngrok.comにアクセスするとローカルネットワークへパケットが転送される。
  • 結果、ローカルのPCに外部からアクセスできる。

MISOCA開発者ブログ様より一部引用

ngrokを使ってお手軽に開発環境のWebサーバを外から接続できるようにしよう

画像はngrok.comから引用

使い方

使い方は、まずHomebrewでngrokをインストールします。(Windowsの方は適宜置き換えて下さい)

$ brew cask install ngrok

このシェルスクリプトについて

WordPressをngrokで外部からアクセス可能にする場合、CSSなどのリンク切れをふせぐ為に以下の2点の設定が必要です。

  • 絶対パスを相対パスに置き換える
  • 自身のURL(WP_SITEURLとWP_HOME)を現在のURLに設定する。

 

VCCWで、http://vccw.testというローカル環境を用意していると仮定します。

まずVagrantfileのある場所へ移動します。

$ cd vccw.test

次にgithubからシェルスクリプトをダウンロードして実行します。

$ git clone https://github.com/naogify/wp-ngrok.git
$ bash wp-ngrok.sh

するとあなたの開発環境のURLを入力するよう求められます。

入力して下さい。http://などは必要ありません。(この記事では、vccw.testです。)

$ bash wp-ngrok.sh
+ SetupWp
+ echo 'type the url of your develop environment'
type the url of your develop environment
+ read input
vccw.test

 

無事プロセスが終了すると、下のようなngrokのUIが立ち上がります。

上のForwarding https://89496eca.ngrok.io -> vccw.test:80となっていると思いますが、前半部分がグローバルURLになります。

これをクライアントにシェアしてアクセスしてもらうことが出来ます。

 

http://127.0.0.1:4040にアクセスするとグローバルURLからのアクセスを監視できるインターフェイスが表示されます。

 

使い終わったらCtrl + cで終了しておきましょう。

本番環境移行時の注意点

このシェルスクリプトは絶対パスを相対パスに置き換えるroot-relative-urlsというプラグインをインストールします。本番環境にWordPressを移行させる時は必ずプラグインを削除して下さい。

加えて、Vagrantfileと同じディレクトリにあるwp-config.phpに以下のコードを追加しています。必要に応じて適宜削除して下さい。

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

 

まとめ

ngrokをVCCWで使う時に、相対パスを絶対パスに置き換え、現在のURLを取得しWP_SITEURLとWP_HOMEに設定するというシェルスクリプトを作りました。これでコマンド一発でVCCWでngrokを使えます。