解凍ngrokにPathを通すアカウントを接続するlocalhstを外部公開するローカル環境が立ち上がっていることを確認するngokで外部公開する外部公開用のURLにアクセスする管理画面の使い方まとめはじめにローカル環境で書いたコードを外部から呼びたいことって結構あるケースですよね。私もローカルで書いたコードを外部のサービスから呼んで動作確認を行いたく、ngrokを導入してみました。備忘録を兼ねてインストールから使い方まで手順を残していきます。Macでの手順ですが、Windowsでも概ね同じだと思うので適宜読み替えてください。ngrokとはngrok(エングロック)と読むらしいです。簡単に言うと、ローカルで立ち上げたサーバ(localhost)を外部に公開できるツールです。http、https双方でlocalhostに外部からアクセスできるようになります。ありがたいことに会員登録だけで無料使えます。素晴らしい!!公式サイトはこちらngrok.com会員登録ngrokを使うには会員登録が必要です。最初に登録を行っていきます。以下リンクから登録画面を開き、必要な情報を入力しアカウント登録します。GitHub、Googleアカウントを使用した登録も可能です。UP」から登録ページへ進んでください。セットアップアカウント登録後、ログインをするとdashboardにセットアップあるので基本は手順通りにセットアップすればOKです。1手順ずつ進めていきます。X」をクリックして、ダウンロードします。ダウンロードしたZipを解凍します。手順にはコマンドで解凍するよう書かれてますが、ダブルクリックでOKです。ファイルは任意の場所に移動しておきましょう。ngrokにPathを通す手順にないですが、パスに追加して「ngrok」で実行できるようにしておくと便利です。念のため、パスの通し方も書いておきます。私の環境では、「ngrok」を「/Users/xxx/Documents/prpgram/ngrok/ngrok」に置いています。今後は、このパスを基準に書いていくので、皆さんの環境に合わせて読み替えてください。ターミナルをで以下のコマンドを実行し、「bash_profile」を開きます。~/.bash_profile「bash_profile」にngrokのパスを追加します。ここをを書き間違えるといろいろめんどくなるので、慎重にお願いします。PATH=$PATH:/Users/xxx/Documents/prpgram/ngrok※環境によってキャプチャとは異なります。ターミナルをで以下のコマンドを実行し、変更を反映します。~/.bash_profileアカウントを接続する3にあるコマンドを実行します。パスを通している場合は、ディレクトリを意識する必要ないので、ターミナルを開いてコマンドを実行します。xxxパスを通していない場合は、ngrokのあるディレクトリに移動してからコマンドを実行します。xxxxxx:アカウントごとに振られるコードなので伏せ字にしてます。ここまででセットアップ完了です。localhstを外部公開するここから実際に外部公開していきます。今回はlocalhost:8080で動いているサーバを外部公開していきます。ローカル環境にサーバを立てる部分は割愛します。localhost:8080でサーバが動いていることを前提に進めていきます。ローカル環境が立ち上がっていることを確認するngokで外部公開するターミナルで以下コマンドを実行して外部公開します。「8080」の部分がローカルのポートになります。8080ターミナルが切り替わり、ngrokの情報が表示されますForwardingの矢印左側が外部からアクセスするURLになりますこの例だと、http://8ccda5c6.ngrok.iohttps://8ccda5c6.ngrok.ioでlocalhost:8080が表示されます。URLはngrok起動時に毎回ランダムに生成されます。例なので、このリンクにアクセスしても何も表示されないです。外部公開用のURLにアクセスする上記のURLにアクセスすると、localhostと同じ内容が表示されていることが確認できます。管理画面の使い方ngrokでは管理画面を利用してアクセスの内容を確認することも可能です。Interfaceに書かれているURLへアクセスします。管理画面が開き、リクエストの内容を確認できます。まとめ実際に導入してみると、なんで今まで使ってこなかったんだろうと反省するぐらい便利です!セットアップも簡単で、コマンド一つで利用できるので手軽に導入できるのもいいです。興味があれば試してみてください。コメントをキャンセルメールアドレスが公開されることはありません。Colaboratoryで機械学習を始める2ステップ最近は機械学習やデータ分析が人気です。これから勉強を始める人も多いのではないでしょうか。プラグインの追加と有効化を行います。...【WEBサイト開発入門】CSSだけでWordPress(ワードプレス)のコメントからメールアドレス項目を消す方法ワードプレスを導入して、初期設定のまま利用すると記事のコメント欄で名前とメールアドレスが必須となっています。...Macにanyenvを導入してみたMacの開発環境周りを再構築するためにanyenvを導入しました。備忘録もかねて構築手順を残すことにしました。