さて、今回はお手軽テストサーバ構築のお助けngrok (エングロック)をご紹介します。どういうサービスかといいますと自分のローカル環境を外部アクセスで確認できるサービスになります。

本来は自分でローカル環境で確認したら他人にはテストサーバーなどにアップして確認してもらうのが一般的ですが、このローカルのまま確認してもらうというものになります。

はじめはアップせずにどうやって確認するの？という感じだったのですがいろいろかまってみて初めてわかりました。

開発環境で確認しているところを外部公開できるようにする仕組みなんです。あくまで一時的に確認するという使い方になるかと思います。マルチデバイスのテストなどに便利に使えます。

使い方や公開方法などをご紹介します。

ngrokの使い方

ざっと流れを確認するために一応サイトに載っているものを掲載します。グーグル翻訳したものです。

• ngrok - secure introspectable tunnels to localhost

簡単に見ていくと次の4項目で使えるようになります。

step1.ngrokをダウンロード

まず、ngrokクライアントをダウンロードします。これは、実行時の依存関係がない単一のバイナリです。

step2.解凍してインストールする

LinuxまたはOSXでは、次のコマンドで端末からngrokを解凍できます。 Windowsでは、ngrok.zipをダブルクリックしてください。$ unzip /path/to/ngrok.zipで解凍します。 ほとんどの人は、ngrokを自分のプライマリユーザーフォルダに保存するか、コマンドラインから簡単にアクセスできるようにエイリアスを設定することを好みます。

step3.アカウントを接続する

このコマンドを実行すると、あなたの認証があなたのngrok.ymlファイルに追加されます。アカウントに接続すると、ダッシュボードに開いているトンネルが一覧表示され、トンネルのタイムアウトが長くなります。認証トークンを取得するには、ダッシュボードにアクセスしてください。 $ ./ngrok authtoken [YOUR_AUTH_TOKEN]

step4.それを起動

コマンドラインから実行して試してください。 $ ./ngrok helpでHTTPトンネルを開始するには、次にこれを実行します。 $./ngrok http 80の使用方法に関するより多くのアイデアを得るためにドキュメントを読んでください。

Macの環境でngrokを使ってみる

実際に上記の流れ通りにやってみたいと思います。

• ngrok - secure introspectable tunnels to localhost

ますは上記のngrok公式サイトからユーザ登録を行います。Github・Googleアカウントでも連携認証で登録可能ですし、登録しなくても使えますが状態を確認したり有効期限が8時間までだったりそのほか有料プランですがカスタムドメインやサブドメインを使うのにはあった方が良いかと思います。 対応環境はWindows、Mac、Linuxとなっておりマルチ対応ですね。

ダウンロードした場合は解凍した後/usr/local/binに移動させます。コマンドラインでは以下のようにすると良いです。

$ unzip ~/Downloads/ngrok-stable-darwin-amd64.zip
$ mv ngrok /usr/local/bin

ダウンロードせずにHomebrewからだと楽かもしれません。npmからもインストール可能です。

• macOS 用パッケージマネージャー
• ngrok - npm

$ brew cask install ngrok

これでインストールは完了しました。あとはアカウントと紐付けのため以下のように[YOUR_AUTH_TOKEN]を入れると/Users/name/.ngrok2/ngrok.ymlが生成され、ユーザートンネル認証が登録されます。

$ ./ngrok authtoken [YOUR_AUTH_TOKEN]

[YOUR_AUTH_TOKEN]はngrokのログインページ内の3.Connect your accountかauthページ内に記載してあります。

さてこれで準備完了です。

あとは起動するだけです。開発環境内からターミナルで以下の通り起動させます。5000番ポートにしました。

$ ngrok http 5000

すると以下のようになります。

ngrok by @inconshreveable
                              (Ctrl+C to quit)

Session Status                online
Account                       Tadashi Suyama (Plan: Free)
Version                       2.2.8
Region                        Asia Pacific (ap)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://849de206.ap.ngrok.io -> localhost:5000
Forwarding                    https://849de206.ap.ngrok.io -> localhost:5000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

これで状況を見るためにhttp://127.0.0.1:4040/にアクセスしてみます。

No requests to display yet（表示要求はまだありません）と表示されています。このurlをクリックしてみます。

トンネル接続を完了できませんでした

https://a48ec186.ap.ngrok.ioへの接続はngrokクライアントに正常にトンネリングされましたが、クライアントはローカルアドレスlocalhost：5000への接続を確立できませんでした。

Webサービスがlocalhost：5000で実行されていることと、それが有効なアドレスであることを確認してください。

発生したエラーは次のとおりです。dial tcp [:: 1]：5000：getsockopt：接続が拒否されました

とエラーになっていますがトンネリングはされているようです。

ここからちょっとわからなくなったのですが、ローカルサーバーを立ち上げていないとだめだということを気がつくまでしばらく時間がかかりました。npmのserveを使って立ち上げます。こちらはデフォルトで5000番なのでこれで確認できました。

$ serve

phpの場合だとphp -S localhost:5000で立ち上がります。これで動作確認できます。

$ php -S localhost:5000

https://a48ec186.ap.ngrok.ioにアクセスします。表示されていますね。 接続できると上記のような状態になります。これでようやくローカルと外部アドレスが同じ状況になりました。

接続をやめるときはCtrl+Cで終了します。公開URLは発行するたびに変わります。要するに一度接続をやめて再度接続すると違うアドレスになります。サブドメインなどで同じアドレスにしたい場合は有料プランになります。

おまけ

そのほか以下のことも出来ます。サブドメインやカスタムドメインを使うのには有料プランになります。因みにワードプレスの場合だとローカル開発環境簡単構築ツールlocalアプリを使った方が早いです。このアプリにngrokがついているので簡単に公開URLを共有できます。

• Local by Flywheel

ベーシック認証をつける

$ ngrok http -auth "user:password" 8000

サブドメイン

$ ngrok http -subdomain=hogehoge 8000

カスタムドメイン

$ ngrok http -region=ap -hostname=dev.example.com 8000

料金プラン

フリー

クイックデモやその他の単純なトンネリングのニーズに。

• ランダムなURL /ポート上のHTTP / TCPトンネル
• 1オンラインngrokプロセス
• 4トンネル/ ngrokプロセス
• 40コネクション/分

ベーシック （$5/month 約550円/月）

基本は含まれています。

• カスタムサブドメイン
• 予約ドメイン
• Google Apps SSO

ユーザーごとの制限

• 3つの予約ドメイン
• 1オンラインngrokプロセス
• 8トンネル/ ngrokプロセス
• 60コネクション/分

プロ（$8.25/month 約900円/月）

すべての基本機能に加えて…

• ホワイトラベルドメイン
• 予約済みTCPアドレス
• エンドツーエンドのTLSトンネル

ユーザーごとの制限

• 5つの予約ドメイン
• 2つの予約済みTCPアドレス
• 2オンラインngrokプロセス
• 12トンネル/ ngrokプロセス
• 60コネクション/分

ビジネス（$12/month 約1300円/月）

すべてのPro機能に加えて…

• IPホワイトリストトンネルアクセス
• 予約ワイルドカードドメイン
• 優先サポート

ユーザーごとの制限

• 5つの予約ドメイン
• 2つの予約済みTCPアドレス
• 1ワイルドカードドメイン
• 2オンラインngrokプロセス
• ngrokプロセスあたり20トンネル
• 120コネクション/分

参考になれば幸いです。

はじめてのMacパーフェクトガイド（2019）

posted with ヨメレバ

スタンダーズ 2018年11月20日

楽天ブックスで購入

Amazonで購入

∞Tadashi Suyama∞