ローカル開発環境で構築したウェブサイトを一時的に外部公開する方法（zuidoコマンド編 + ngrokも）

WP-CLI のコミッターとして活躍され、Vagrant を使ったWordPress の開発環境 VCCW の開発者をされるなど、WordPress 界隈でも有名な宮内氏が、また便利なツールを出したというつぶやきをみて使ってみました。

これを使えば、セミナー参加者へローカル開発環境においた WordPress あるいはサイトを見てもらうとか、一時的に公開してみてもらうに便利だよなぁと思います。

ただし無料アカウントでは、リクエスト数に 40回/分 という厳しめの制限がかかっているようで、2, 3人にみてもらうならともかく、何十人単位なら有料契約しないと使えないよね、、とは思います。このあたりも含めて、下記に紹介した宮内氏のブログを参考にしたらよいと思います！

ローカル環境のウェブサイトを外部公開ってなんだ？

宮内氏のブログ

• ローカル開発環境に対してパブリックなURLを割り当てて外部から接続可能にするコマンドを作った (Qiita）

で説明されています。要するに次のことができるってことです。

• ローカル開発環境のウェブサイト：http://localhost/demo
• 公開ウェブサイト：http://******.ngrok.io

この特徴は、「ローカル開発環境のウェブサイトはネットからアクセスできなくてよい」といいう点です。

ちゃんと調べていません。直感的には次のような動作をしているのかなぁと思います。

（※ちょっと今多忙で調べている時間なし...以下、とりあえず動くまでを備忘録を込めてメモしておきます。）

ローカルで立ち上げた ngrok が http://****.ngrok.io と常に一定間隔で通信していて

http://******.ngrok.io

にアクセスがあれば、ローカルで立ち上げた ngrok のリバースプロキシを介して実際のローカル環境のウェブサイトにデータを取りに行って表示するように「直感」として見える。

zuido 動作に必要なもの

https://github.com/miya0001/zuido にかかれている条件（手持ちの macOS 10.13.4で試したところ）に加えて、 ngrok の設定ファイルが必要です（そのうち修正されるかもしれません）

• $HOME/.ngrok2/ngrok.yml （空ファイルでもいい）
• Node 8.x or later
• macOS, Unix/Linux

インストール方法

以下、macOS 10.13.4 での説明です。

STEP 1.  $HOME/.ngrok2/ngrok.yml の作成

ターミナルアプリを立ち上げて

mkdir -p  $HOME/.ngrok2

touch $HOME/.ngrok2/ngrok.yml

として、zuido がチェックする設定ファイルを作成しておきます。空ファイルでOKです。

STEP 2. Node のインストール

筆者は 10.3.x のほうをインストールしました。

• https://nodejs.org/ja/

よりダウンロードしてインストール。ターミナルから npm コマンドが使えるようになります。

STEP 3. zuido のインストール

ターミナルアプリを立ち上げて

• npm install -g zuido

とタイプすることで /usr/local/bin/zuido にインストールされます。

STEP 4. /usr/local/bin にPATHが通っていることを確認する

ターミナルアプリを立ち上げて

• echo $PATH

****:/usr/local/bin:****

のようにどこかに「/usr/local/bin」があればPATHが通っています。

その状態なら、

• which zuido 

とコマンドの場所を探すと、

/usr/local/bin/zuido

と返事が返ってきます。

PATHが通っていなければ、

• touch $HOME/.bash_profile

として、もしホームディレクトリに .bash_profileがなければ作成した上でこのファイルを開き

• open -a textedit  $HOME/.bash_profile

とコマンドをうてば、テキストエディタで、.bash_profile（隠しファイル）が開きます。

ファイルの末尾に

export PATH="/usr/local/bin:$PATH"

を追加しておきましょう。

次にターミナルを起動したときに、PATHに追加されているはずです。再度 echo $PATHや、 which zuido コマンドにて、PATHが通っていることを確認しましょう。

zuido の動作確認をしてみる

さて準備はうまくいきましたか。では実際に動作確認をしてみましょう。

なお詳細は

• https://github.com/miya0001/zuido

に詳しく書かれていますので参考にしてみてはと思います。

http://localhost/demo 以下に WordPress をインストールしておきます。
そしてブラウザから正しくアクセスできることを確認してください。



さて、「ターミナル」アプリより

• zuido  http://localhost/demo

とタイプしてください。

zuido v0.1.10 by Takayuki Miyauchi (@miya0001)
Web Interface: http://localhost:4040
Forwarding: https://◯◯.ngrok.io -> http://localhost
Config Path: /Users/kitani/.ngrok2/ngrok.yml
(Ctrl+C to quit)

のようなメッセージが出てきて、https://◯◯.ngrok.io/demo がブラウザで開きます。
そこで他の端末から、https://◯◯.ngrok.io/demo にアクセスできるかチェックしてみてください。

のように出ましたか。ならば成功です。

zuido の終了

zuido が動いている画面で Control + c を押して強制終了してください。

注意点

http://localhost 以下が、https://◯◯.ngrok.io として公開されます。
ので Virtual Host で http://◯◯.＊＊ としてしかアクセスできない場合は大丈夫ですが、http://localhost/＊＊＊ でアクセスできる場合は全部見えちゃうのでお気をつけを！

404 Not found が出た！？

あれ。。。。。。でも他の端末だと動く何故！ってのをSNSで宮内氏につぶやいたら、修正くださいました！！ zuido 0.1.10 では直ってます。さすがに対応はやい！

どうやら、npm のバージョン違いだそうです。

zuido をタイプしても無反応

STEP 1.  $HOME/.ngrok2/ngrok.yml の作成

が存在しないとそうなります。存在するか確認してなければ作成してください。中身は空でOKです。

付録A.  https://localhost/demo （HTTPS サイト）の場合

私の利用している MAMP は、https対応しています。毎回対応するのが面倒なので、下記にツールとやり方を公開してます。ツールでさっくりMAMPを SSL化できるでしょう。

• コマンドツールで MAMP を SSL 対応しよう！ - macOS High Sierra 編 -
• 【Virtual Host 対応】コマンドツールで MAMP を SSL 対応しよう！ - macOS High Sierra 編 -

を参考にすれば ツールも公開しているので手軽に MAMP で HTTPS 通信（Chrome等ブラウザで信頼できると判断される状況で）できるでしょう。

そうしておけば

• zuido https://localhost/demo 

などで何らエラーなく、 httpsサイトも利用することができます。

付録B. ngrok を使ってみよう！

zuido はうまく動きましたか。
ついでに ngrok も試してみたいと思います。
ただし ngrok でローカル開発環境の WordPress へ外部からアクセスすると、CSSや画像のリンクがおかしいらしく、ちゃんと出ませんでした。

STEP 1.  ngrok のインストール

Homebrew をインストールしているなら

• brew cask install ngrok

インストールしていないなら、

• https://ngrok.com/ よりダウンロードして展開（解凍）==> ngrok
• ngrok をパスのある場所におく /usr/local/bin 等

STEP 2.  ngrok の動作確認

ターミナルより

• ngrok http 80

とすると、

• http://乱数.ngrok.io ==> http://localhost
• https://乱数.ngrok.io ==> https://localhost

へのフォワーディングが設定されました。

※乱数を固定のサブドメインにするには、ngrokの有料版が必要なようです。

で、手持ちの MAMP で Apacheを 80/tcp 設定した上で起動すると

http://乱数.ngrok.io/demo/

でアクセスすると、http://localhost/demo のデータが表示されるということですね。
この demo は WordPress で構築されていて、同じ端末だと問題なかったのですが、別ネットワークの別端末では確かにアクセスできたのですが、CSSや画像が読み込めていない感じです。

ちなみに MAMPでHTTPS通信できるようにしているので、

https://乱数.ngrok.io/demo/

でもアクセスできます。ただしオレオレ証明書では駄目みたいなので、そのあたりはちゃんとしないといけません。そのあたりは筆者が公開してる

• コマンドツールで MAMP を SSL 対応しよう！ - macOS High Sierra 編 -
• 【Virtual Host 対応】コマンドツールで MAMP を SSL 対応しよう！ - macOS High Sierra 編 -

を参考にすれば ツールも公開しているので手軽に MAMP で HTTPS 通信（Chrome等ブラウザで信頼できると判断される状況で）できるでしょう。

とりあえずこれで動いたので ngrok を終了します。

ngrok の終了

ngrok が動いている画面で Control + c を押して強制終了してください。

2018年5月31日 @kimipooh