Home
フロントエンド
【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

公開日
2021.05.30
更新日
2022.04.02
【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

どうも!かけちまるです!

WordPressをMAMPやXAMPPなどのローカル環境で開発しているときに途中経過を他人に共有したいときがあると思います。

でも、MAMPやXAMPPでは共有する機能はないのです。

じゃあ、Local by Flywheel(ローカル・バイ・フライホイール)でLive Links機能を使えばいいじゃんとなるかもしれないけど発行したURLは一定時間経つと失効するんです。有料版にすればその辺は解決されるのですが無料にこだわりたい。

そこで今回使うのがngrok(エングロック)というローカル環境を外部公開できるサービスです。

このngrokがすごく便利で、

  • ・発行したURLは時間無制限でアクセスできる
  • ・HTTPS通信が可能

ユーザー登録(無料)すれば、

  • ・Basic認証を設定できる
  • ・サブドメインを設定できる

てな感じで便利なんです。

ただ、ターミナルを使うので初心者には難しそうな印象があるかもしれません。
なのでそんな人に向けてユーザー登録からローカル環境の外部公開の方法まで詳しく解説します。

この記事を読むと、

  • ・ngrokのアカウント登録方法
  • ・ngrokとアカウントトークン(Authtoken)の紐付け方法
  • ・ローカル環境を外部公開する方法

がわかります。

アカウント登録(無料)

ngrokはアカウント登録しなくても使えます。
でもアカウント登録をして発行されたアカウントトークン(Authtoken)というのを認証するとBasic認証を設定できたり色々な機能が使えるようになるのでやっといても良いかと。

アカウント登録はngrok公式サイトからできます。
https://ngrok.com/

ngrokをダウンロード

アカウント登録できました?
そしたら、ngrokをダウンロードしていきましょう。

ngrokをダウンロード方法

1

ログインしてngrokのコントロールパネルを開きます。
https://dashboard.ngrok.com/login

2

Getting Started > Setup & Installationで自分の環境にあったngrokをダウンロードします。

ngrokのダウンロード画面
3

ダウンロードしたzipファイルを解凍し、Desktopに移動させる。

ngrokファイルをDesktopへ配置

アカウントトークン(Authtoken)を登録

ここでは、アカウントトークン(Authtoken)の登録方法を解説します。
アカウント登録(無料)をするとAuthtokenが発行されるのでそれを登録します。

アカウントトークン(Authtoken)の登録を登録すると、

  • ・Basic認証を設定できる
  • ・サブドメインを設定できる

など使える機能が増えます。

Authtokenの登録方法

1

ngrokのコントロールパネルでGetting Started > Your Authtokenにアクセスhttps://dashboard.ngrok.com/get-started/your-authtoken

2

Command Lineのコードをコピー

Authtokenのコードをコピー
3

ターミナルを開いてDesktopまで移動する。

コマンド
コピー
<!-- cdコマンドでDesktopに移動 --> cd ./Desktop <!-- pwdコマンドで現在位置を確認 --> pwd
4

②でコピーしたコードをターミナルで実行

コマンド
コピー
./ngrok authtoken 【Your_Authtoken】

これでアカウントトークン(Authtoken)の登録が完了です。

ローカル環境を外部公開する

いよいよローカル環境を外部公開する方法を解説します。
今回はMAMPで構築したサイトを外部公開する想定で解説します。

ローカル環境を外部公開する方法

1

ターミナルを開いてDesktopまで移動する。

コマンド
コピー
<!-- cdコマンドでDesktopに移動 --> cd ./Desktop <!-- pwdコマンドで現在位置を確認 --> pwd
2

ローカル環境を外部公開する

コマンド
コピー
./ngrok http 【ポート番号】

ここで設定する【ポート番号】はMAMPにアクセスしたときのURLに含まれている「8888」「8080」などの数字が入ります。

Authtokenのコードをコピー

公開されたかの確認

ローカル環境を外部公開が成功するとターミナルが以下のような画面になります。
Forwardingの部分のURLにアクセスするとローカル環境が外部公開されているところを確認できます。

コマンド
コピー
ngrok by @inconshreveable Tunnel Status online Version 2.0/2.0 Web Interface http://127.0.0.1:4040 Forwarding http://92832de0.ngrok.io -> localhost:80 Forwarding https://92832de0.ngrok.io -> localhost:80 Connnections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

JavaScriptでサイトのスクロールを無効にする方法

JavaScriptでサイトのスクロールを無効にする方法

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装