ローカルホストからどこからでもアクセスする

あなたはコンピュータ上で何時間も地道に働き、新しいウェブサイトのデザインを完璧に仕上げてきました。CMSはサンプルコンテンツでうまく設定されており、いくつかのモバイルデバイスやタブレットで試してみたいと思っています。クライアントも見てみたいと思っていますが、彼らに迅速にチェックをさせるために、すべてを公開サーバーに移行する時間はありません。

ウェブ開発者であれば、このような状況に何度も直面したことがあるでしょう。そして、そんな時間を公開サーバーに移行するために真夜中のオイルを焼いて過ごし、もっと簡単な方法があればと願ったことでしょう。

疲れた目をしたウェブ開発者の皆さんに、もっと簡単な方法が登場したとお知らせします！実際、ローカルホストからウェブにアクセスできるようにすることで、このプロセスを簡単にするためのアプリケーションやサービスがたくさんあります。この記事では、次のものについて説明します。

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

ポイント

どのようにしてローカルホストからどこからでもアクセスできるのでしょうか？

インターネット上のセキュリティトンネルサービスを通じて可能です！これらのサービスは、インターネットからあなたのマシンへのトンネルを提供します。

つまり、彼らは公開可能なURLを提供し、そのURLでの呼び出しを監視し、それらの呼び出しをあなたのローカルホストサーバーに転送します。すべての複雑なセットアップは完了しており、必要なのはアプリケーションをインストールし、それをローカルホストに向けることだけです。

A Note About Using Virtual Hosts

私のローカルホストには、仮想ホストが設定されています。以下にリストされている各サービスのアドレスがServerAliasとして記載されていない限り、サーバーは協力的に動作しません。数時間の混乱が続きました。同じ状況にある場合は、httpd.confにServerAliasを追加し、以下に表示されるngrokアドレスを使用しているサービスのアドレスで置き換えてください：

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrokは、Windows、macOS、Linux向けのアプリケーションで、トンネルを作成するだけでなく、トンネルを通過するすべてのトラフィックを検査し、そのトラフィックをテストするために再生することもできます。

基本的な機能は無料で使用でき、その後、より高度な機能にアクセスするためにサインアップできます。カスタムサブドメインや予約ドメインを使用するには、有料プランにサインアップする必要があります。そうでなければ、サービスを利用できますが、350c0f8e.ngrok.comのようなランダムなドメインが割り当てられます。

2021年5月現在のNgrokのプランは次の通りです。

Ngrokの大きな利点の1つは、依存関係がないことです。Ngrokをインストールして実行するだけで、他に何も必要ありません。

ngrokの使い方

ngrok.comにアクセスし、アーカイブをダウンロードして、コンピュータ上のNgrokが存在するどこかに抽出します。以下は基本的な手順ですが、詳細が必要な場合は、「ローカル開発サイトを共有するためにngrokを使用する方法」という別の記事があります。

コマンドラインターミナルを開き、抽出したngrokがあるフォルダに移動します。次のコマンドを実行して、ポート80でlocalhostにトンネルを作成します。

./ngrok http 80

次のような画面が表示されます。

上記の例では、http://42e474ef9799.ngrok.comのランダムに生成されたngrokアドレスへのトラフィックが、127.0.0.1:80のlocalhostに転送されています。

URLをインターネットに接続されたどんなデバイスで開いても、Webからあなたのlocalhostにアクセスできます！

ngrokが提供するより独特の機能の1つは、過去のトラフィックを検査できる能力です。それを行うために、コンピュータ上でhttp://localhost:4040/にアクセスしてください。インバウンドリクエストを表示するダッシュボードにアクセスします。左側の各リクエストをクリックして、右側にヘッダーやその他のデータの詳細を見ることができます。私のお気に入りは、リクエストから返されたJSONデータを見ることです。シンプルなHTMLページをロードしたときのこれの非常に基本的なレイアウトは次のようになります：

右側のリプレイボタンをクリックすることで、リクエストを再送信することもできます。それはトンネルを介してリクエストを再実行します。

ngrokの高度な機能

パスワード保護は、一般の人々があなたのサイトにアクセスできないようにするためのものです：

ngrok http -auth="username:password" 80

カスタムサブドメインは、ランダムに生成されたURLを覚える必要がない場合のためのものです！有料のngrokプランにサインアップすれば、サブドメインを予約して他の人がそれを取ることができないようにすることができます。以下は、nogophersinmytunnel.ngrok.comであなたのlocalhostを見ることができるようにするものです：

ngrok http -subdomain nogophersinmytunnel 80

カスタムドメインは、トンネルプロジェクトのURLに「ngrok」を含めたくない場合のためのものです。有料プランでは、ngrok.comを使用する必要がなく、独自のドメインを使用できます：

ngrok http -hostname="tunnel.yourdomain.com" 80

また、ローカルネットワーク上のIPアドレスにトンネルを作成することもできます。それ以外の場合は、外部世界からアクセスできません：

ngrok http 192.168.0.27:80

また、HTTP以外のサービスのためのトンネルを作成することもできます：

ngrok tcp 22

他にも、一度に複数のトンネルを実行したり、設定ファイルを作成してこれらの設定を将来使用するために保存することができます。

それらのすべての可能性について調べるには、ngrokのドキュメントを参照してください。

PageKite

PageKiteは、Windows、macOS、Linux、さらにはAndroidデバイスで動作するPythonベースの「動的トンネルベースのリバースプロキシ」です。ngrokと非常によく似ていますが、かなり長く存在し、より広範な用途に対してかなりバトルテストされているようです。彼らはマインクラフトプロトコルでも動作させ、人々がローカルマシンでマインクラフトサーバーを実行できるようにしています。

1か月間の無料トライアルと2.5GBの転送クォータでサインアップできます。その後は「あなたの払う金額に応じたシステム」があります（月額最低USD$4またはフリーオープンソースソフトウェアで作業している場合は無料）。ただし、この場合はより多く支払うことでより多くを得る必要があり、より多く支払う人はより大きなクォータ、より長いサービス期間、カスタムサブドメインなどを得ます。

PageKiteにはngrokのようなトラフィックインスペクタはありませんが、/wp-admin、/xampp、phpMyAdminページなど、共通の攻撃ターゲットへのアクセスをブロックする組み込みのファイアウォールのような非常に素晴らしい機能があります。…など。これらを公開することを問題なく思っている場合は無効にできます。

彼らはオーストラリア、シドニーにフロントエンドリレーサーバーも持っているので、これはオーストラリアの開発者に対して潜在的に高速な速度を提供する可能性があります。

PageKiteの使い方

PageKite.netにアクセスして、お使いのOS向けのバージョンをダウンロードしてください。Windowsユーザーは、Pythonがインストールされていることを確認する必要があります。macOSおよびLinuxの場合、シンプルなcURLコマンドを使用して、コマンドラインから直接インストールできます。

ダウンロードしたら、このコマンドを実行して、ローカルホストサーバーへのトンネルを開始します。毎回使用する特定のサブドメインを選択します（ngrokのランダム割り当てとは異なります）。ここではhurrygetintothefancytunnelを選択しました。

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

最近のMacでは、python3から実行する必要がある場合があるため、上記がうまくいかない場合はそれを試してみてください。

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

サービスへのサインアップが完了すると、ローカルホストが世界に公開されます！

PageKiteの高度な機能

PageKiteにはより印象的な追加機能がいくつかあります。

例えば、Webサーバーが不要です。サーバーが実行されていない場合、静的ファイルをこのように実行できる組み込みのWebサーバーがあります。

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

ngrokと同様に、パスワードでアクセスを制限できます。

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

また、IPアドレスでアクセスを制限することもできます。

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

上記で述べたように、これをすべてスマートフォンで実行することもできます。kWSというAndroidのWebサーバーをインストールし、PageKiteを使用してWebに公開しました。

これは毎日行うものではありませんが、このようなことがスマートフォンだけで可能になったことを見るのはかなり素晴らしいです！

PageKite も ngrok と同様に、一度に複数のトンネルをサポートし、独自のドメインを持つことができ、トンネルの設定ファイルを作成することも可能です。詳細については、クイックスタートガイド とより包括的な 方法ページ をチェックしてください。

localtunnel

localtunnel は、最初はNodeで構築されたトンネリングサービスですが、GoベースおよびC#/.NETクライアントも存在します。

localtunnelの使用方法

ほとんどのnpmパッケージのように、デバイス全体にインストールできます。

npm install -g localtunnel

ローカルホストのポート80へのトンネルを開始するには、このコマンドを実行します。

lt --port 80

ngrokやPageKiteと同様に動作し、例えば私が与えられたようなサブドメインを提供します: https://loud-ladybug-21.loca.lt。

localtunnelを初めて実行する際には、アセットをウェブに公開していることについての親切な注意が表示されます。クリックして続行 を押してください。

localtunnelの高度な機能

無料でカスタムサブドメインを取得することは可能で、サブドメインがまだ使用されていない限りです。カスタムサブドメインを使用するには、--subdomain パラメーターで実行します。

lt --port 80 --subdomain platypusestunneltoo

localtunnelが提供する非常に便利な機能の一つに、JavaScriptでローカルトンネルを生成し、自動テストで使用できるNode APIがあります。

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // Your tunnel URL will appear as tunnel.url

  tunnel.on('close', () => {
    // Do something once the tunnel is closed
  });
})();

boringproxy

boringproxyは、完全に無料でオープンソースであり、MITライセンスの下に提供されている新しいオプションです。その主な焦点は、人々が自分のコンピュータ上でウェブサイトを自己ホストすることを容易にすることにあります。サーバーとクライアントの両方の役割を果たすシングルの実行ファイルが提供されています。さまざまなLinuxシステムおよびWindows用の実行ファイルがあります。macOSは「未テスト」とされています。私の個人的な経験では、Macで動作することはできませんでしたが、LinuxボックスやRaspberry Piにアクセスできる場合、これがおそらくあなたにとっての解決策かもしれません。すべてGoで書かれており、貢献者による開発が歓迎されています。

その機能の概要は以下の通りです。

• 100%無料でオープンソースであり、MITライセンスの下にあります
• 完全に自己ホスト可能です
• 組み込みのリバースプロキシがあります
• カスタムドメイン/サブドメインをサポートします

boringproxyの使用方法

主な手順は、boringproxyのドキュメントで最も簡単に追いかけることができます。プラットフォームによって異なります。

全体的には以下の手順が含まれます。

• サーバーインスタンスをcurl経由でダウンロードします（例: curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64）
• chmodでダウンロードした実行ファイルに実行権限を付与する（例: chmod +x boringproxy-linux-x86_64）
• ポート80と443へのバインディングを設定する（例: sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64）
• クライアント側でも実行ファイルを設置する

boringproxyの作者によるこの動画で最良の方法が解説されています:

boringproxyの高度な機能

自動HTTPS証明書はLet’s Encryptを通じて自動的に管理されます。テスト用の証明書を取得するためにストレスを感じる必要はありません。それは舞台裏で行われています。

設定用のWebインターフェースは、ユーザー、アクセストークン、およびトンネルを管理するために自動的に設定されます。

簡単にWebアプリケーションをトンネルすることができます。EtherpadのようなWebアプリケーションをセルフホストし、独自のサブドメインを与え、そしてどこからでもアクセスできるようになります。

BrowserStack

BrowserStackは、ウェブサイトを幅広いデバイスやブラウザでテストするための自動スクリーンショットと仮想マシンを提供します。localhostにアクセスしたい理由がテストのためであるなら、BrowserStackは興味深いかもしれません。

上記の方法を使ってBrowserStackの仮想マシンでlocalhostサイトをテストすることができますが、また、ChromeおよびFirefox用のブラウザ拡張機能を使用して、そのサーバーからlocalhostへのアクセスを提供することもできます。

しかし、この機能はBrowserStackサービスのみであり、一般公開されていません。BrowserStackは無料トライアルが提供されており、その後はサービスを利用するために月額料金が発生します。デバイステストを行う唯一の目的でlocalhostにアクセスする場合に便利です。

BrowserStackの使い方

試用を申し込むにはBrowserStack.comへアクセスしてください。ローカルテストのプロセスについては、ウェブサイト上で非常によく文書化されていますので、この方法を検討している場合はそれを読んでみてください。

結局のところ、これにより、ウェブ上で実行される仮想マシンでlocalhostサイトをテストできるようになります。

お気に入り探し

これらのオプションを試してみた結果、個人的にお気に入りはngrokとPageKiteです。

PageKiteは最も多角的なソリューションのようで、膨大な可能性を秘めています。長年にわたり開発と拡張が行われ、本当に素晴らしいアプリケーションになっています。

ngrokもそのシンプルさとトラフィックインスペクタにおいて素晴らしいです。ウェブ上からlocalhostにアクセスしたいほとんどのウェブ開発者にとって、十分な機能があります。

結論

インターネット接続が活発なコンピューターで作業している場合、数分で世界中からlocalhostにアクセスできるように設定できます。始めるのは非常に簡単で、ご覧の通り、解決策はいくつもあります！

これらのサービスをお使いになったことがありますか？他にお勧めのサービスはありますか？ご意見をTwitterで教えていただけると嬉しいです！

 

ローカルホストをどこからでもアクセスする方法に関するFAQ