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

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

  • 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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

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