2018年5月31日木曜日

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

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

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

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

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


宮内氏のブログ
で説明されています。要するに次のことができるってことです。

  • ローカル開発環境のウェブサイト：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 のほうをインストールしました。
    よりダウンロードしてインストール。ターミナルから 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 の動作確認をしてみる


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

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

      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 で 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 で HTTPS 通信（Chrome等ブラウザで信頼できると判断される状況で）できるでしょう。

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

      ngrok の終了


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

      2018年5月31日 @kimipooh

      投稿者 時刻:
      ラベル:

      0 件のコメント:

      コメントを投稿

      登録: コメントの投稿 (Atom)