ローカル環境を外部アクセス可能にする方法

ローカル環境を外部アクセス可能にする方法

  • 2019-02-04  最終更新日:2019-02-05

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

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

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

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

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


スポンサーリンク


ngrokの使い方

ngrok

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

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

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

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

ダウンロードせずにHomebrewからだと楽かもしれません。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/にアクセスしてみます。

ngrok

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

ngrok

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

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

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

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

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

ngrok

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

$ serve

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

$ php -S localhost:5000

ngrok

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

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

おまけ

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

ベーシック認証をつける

$ ngrok http -auth "user:password" 8000

サブドメイン

$ ngrok http -subdomain=hogehoge 8000

カスタムドメイン

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

料金プラン

ngrok


フリー

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

  • ランダムな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コネクション/分

参考になれば幸いです。


∞Tadashi Suyama∞

ngrok app localhost webserver
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
これは楽!iterm2パスワードマネージャー機能

さて今回はiterm2のパスワード管理についてです。そもそもこんな機能がついていること自体知らなかったのでこれ使って楽だなと思ったのでご紹介します。 iterm2の現在時点での最新バージョンは...

30 Mar 2019

アイキャッチ
JavaScriptライブラリデータベースのご紹介

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。 どのJS...

28 Mar 2019

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

ngrok app localhost webserver
フッターイメージ