どーも！
たかぽんです！
先日職場でlocal環境を軽く共有できると楽だよね〜という話になり、どうやらngrokを使えばできる...！とのことで、興味を持ったので、試してみようと思います！
筆者の都合がいいのでサーバーは雑にlaravelでlocalにたてて、それを他の人に共有する体でやっていきます。
また、今回もMacユーザー向けになっています...!
目次
ngrokとは？
さて、まず最初にngrokとは...ですが、ngrok自体はどうやらネットワーク系の各種サービスを提供している会社のようですね...!
このngrokが提供している一部機能で、localhostを外部へ公開できる様にするものがあるので、今回はそれを活用していきます。
一点だけあらかじめ認識しておいて欲しいのが、この行為はトンネリングと言われていて、"開発や検証のために限定的にセキュリティに穴をあける"行為です。
一歩間違うと、localで開発していた新機能をインターネットに公開しかねない点はご留意ください...!
laravelのサーバーを用意する
さて、それではやっていきます...!
まずは雑にlaravelのサーバーを立てちゃいます...!
基本は下記記事ままで大丈夫かと思います...!
ちなみに筆者が試したときはlaravelの10.0.5でした...（時が経つのは早いものです...）
taka@Taka test % composer create-project laravel/laravel example-app
Creating a "laravel/laravel" project at "./example-app"
Info from https://repo.packagist.org: #StandWithUkraine
Installing laravel/laravel (v10.0.5)
- Downloading laravel/laravel (v10.0.5)
- Installing laravel/laravel (v10.0.5): Extracting archive
ちゃんとserveした後にサーバーが立ち上がって、"http://127.0.0.1:8000"でアクセスできればOKです。
taka@Taka example-app % php artisan serve
INFO Server running on [http://127.0.0.1:8000].
今回、このlocal環境へアクセスできるURLを発行していこうと思います...!
ngrokのアカウントを作成する
次にngrokを使用するため、アカウントを作成します。
どうも過去にはアカウント等使わずに使用できた様ですが、現在は使用のためのトークンが必要になるため、そのトークンの取得はアカウントがなければ発行できません。
アカウント発行は先ほども貼った公式ページから行えます。
登録内容は"名前・メールアドレス・パスワード"くらいだったかと思います...!
登録ができたら、下記のような管理画面が出てくればOKです！
ngrokのをインストールする
さて、次は管理画面にある手順をまんまやってもいいんですが...
筆者はbrewでインストールしたので、お好きな方でやってみてください。
管理画面に沿ってインストールする方は、"Download ngrok"から、適切なものをダウンロードし、"1.Unzip to install"の手順に従ってください。
brewでインストールする方は、下記コマンドでOKです。
brew install ngrok
実際に筆者が実行した際は下記の様な感じです。
最後に--versionオプションつけて実行して、インストールがされていれば安心ですね...!
taka@Taka ~ % brew install ngrok
...
...
...
🍺 ngrok was successfully installed!
taka@Taka ~ % ngrok --version
ngrok version 3.2.2
ngrokのトークンを登録する
さて、次はngrokのトークンを登録します。
このトークンを登録しないと、localhostを公開する様にしても閲覧できないので、注意してください...!
また、このトークンは認証に使われるので、公開しないようにお気をつけください...!
トークン自体は先ほどの管理画面の"手順2. Connect your account"に記載されています。
上記画像の"見せられないよ！"の箇所にはランダムな文字列が入っているはずです。
この一行を丸々コピーして実行してあげれば、下記の様にngrok.ymlに保存されるかと思います。
taka@Taka ~ % ngrok config add-authtoken "ここはあなたのトークン"
Authtoken saved to configuration file: /Users/....../....../ngrok/ngrok.yml
これが追加されれば準備OKです...!
ngrokで接続できるようにして確認
さて、最後に先ほどのlaravelのlocal環境を閲覧できるurlを発行します...!
といっても一つコマンド叩くだけで終わります...!
先ほどのlocal環境のポートを指定して...
ngrok http 8000
このコマンドを打てばOKです...!
（laravelを使っていない場合は各々のlocalサーバーのポート番号に合わせてください）
もし問題なければ...
下記のような画面になるかと思います。
今回アクセスできるようになるのは...
Forwardingの箇所にあるURLで、今回だと"https://1efb-153-242-155-144.jp.ngrok.io"になります。
（カスタムなURLを発行したい場合は有料だった気がします...!）
実際試しにアクセスしてみると...?
このページにアクセスしようとしてるよ〜！っていうのがでていますね。
Website IP が自分のIPになっていることを確認（サーバーを動かしている端末でここにアクセス等で確認できます。）し、問題なければ"Visit Site"をクリック...
アクセスできました...!
もちろんこちらは同一ネットワークでない端末（スマホや他のPCなど）からでも閲覧ができます。
つまり、このURLを共有すればlocal環境での軽いデモくらいであればできそうです。
localでサーバーを動かし続ける必要はありますが、とても便利ですね...!
おまけ
最後に、Basic認証もつけたいですよね？
やってみました...!
結論から！
ngrok http --basic-auth='test:password' 8000
たった一つオプションつけるだけでBasic認証を付与できました...!
上記をすることで...
こんな感じで"test", "password"でログインを求められる様になります。
いや...楽ちん！
これで最低限のセキュリティもつけつつ...はできそうですね！
まとめ
さて、今回はlocal環境を公開できるURLを発行してみました...!
一人で開発...であれば、あんまりお世話になることはない気もしますが...（スマホ実機で確認してみたいとか...?)
そこそこ人数が多い開発環境等であれば結構便利な機能ですよね。
使い方もたいして難しくないので筆者もこれから積極的に使ってみようと思います...!
それでわ！