はじめに
ローカル開発中に外部からアクセスするためのトンネリングツールは、開発者にとってとても便利なツールだと思います。本記事では、私が、実装にあたって使用したトンネリングツールであるlocaltunnel、ngrok、および最新のVSCodeのBuilt-in port forwarding機能に焦点を当て、それぞれの特徴、メリット、デメリット、導入方法について説明します。
1. localtunnel
特徴
- シンプルなコマンドで簡単に利用可能
- インターネット経由で公開されるため、外部からのアクセスが可能
メリット
- インストールが簡単で、すぐに利用を開始できる
- ローカル環境の素早い共有が可能
デメリット
- インターネット経由のため、セキュリティ上の懸念がある
導入方法
npm install -g localtunnel
lt --port <ローカルポート番号>
2. ngrok
特徴
- HTTPS対応でセキュアなトンネリングが可能
- カスタムドメインの使用が可能
メリット
- HTTPSが必要な場合に適している
- 多彩な機能と設定が利用可能
デメリット
- 無料プランの制限がある（同時接続数など）
導入方法
brew install ngrok/ngrok/ngrok
ngrok http <ローカルポート番号>
※HTTPSが必要な場合
brew install ngrok/ngrok/ngrok
// ngrokにログインし、Authtokenを確認する
ngrok config add-authtoken *************** // マスキング部分にAuthtokenを貼り付け
ngrok http {httpsからはじまるドメイン} --host-header=rewrite
3. VSCodeのBuilt-in port forwarding機能
特徴
- Visual Studio Code内でのポートフォワーディングが可能
- 拡張機能を追加する必要がない
メリット
- VSCodeユーザーにとっては追加のツールをインストールせずに利用可能
- プロジェクト内で一元的に管理可能
デメリット
- 外部からのアクセスを制御するための柔軟性がやや制限される
導入方法
- デバッグビューで「PORTS」アイコンをクリック
- Forward a Portをクリックし、ポート番号を定義する
- 作成されたURLに飛ぶ
まとめ
それぞれのトンネリングツールには特徴があり、プロジェクトのニーズによって適したものが異なります。開発環境の要件に合わせて、柔軟かつセキュアなトンネリングツールを選択しましょう。
この記事では各ツールの基本的な特徴やメリット、デメリット、導入方法について紹介しました。お役立ていただければ幸いです。