📝 はじめに
こんにちは、管理人のTKGです。
今回は、ローカル環境で開発中のWordPressサイトを外部と一時的に共有する方法として、トンネリングツール「ngrok」を用いた方法をご紹介します。
「クライアントやチームに、今の状態を見せたい」
「でも本番公開はまだ早いし、サーバーにアップするのも面倒…」
そんなときに便利なのが、今回の方法です。
🎯 想定読者
- WordPressをローカル環境で構築している方
- 開発中のサイトを一時的に外部に見せたい方
- ngrokの導入方法・使い方が初めての方
🔧 前提環境
- OS：Windows または macOS
- ローカル環境で WordPress がすでに動作している（例：
http://localhost/wordpress） - ngrok アカウント登録・インストール済み（未導入の方はこちらから）
🚀 全体の流れ
- ngrokを起動してURLを発行する
- そのURLを
wp-config.phpに設定する - WordPressをそのURLで閲覧する
⚠️ 無料版ngrokでは、毎回起動時に異なるURLが発行されます。そのため、先にURLを取得し、それをWordPressに設定してから閲覧しないと、表示崩れやログイン不可などの問題が発生します。
🛠️ 詳細手順
1. ngrokを起動してURLを発行する
以下のコマンドでngrokを起動し、ポート80（開発中の環境が80の場合）にトンネリングします。
ngrok http 80
しばらくすると以下のようなURLが表示されます：
Forwarding https://15e3-xxxxxx.ngrok-free.app -> http://localhost:80
このURL（例：https://15e3-xxxxxx.ngrok-free.app）をコピーしておきます。
2. WordPressのURL設定を反映する
次に、wp-config.php ファイルに以下のように追記・編集します：
define('WP_HOME', 'https://15e3-xxxxxx.ngrok-free.app/wordpress');
define('WP_SITEURL', 'https://15e3-xxxxxx.ngrok-free.app/wordpress');
💡この設定を先にしておかないと、CSSが読み込まれなかったり、ログイン後にリダイレクトが失敗したりする原因になります。
3. ブラウザでアクセス・共有する
先ほどの ngrok URL にアクセスすると、ローカルの WordPress に外部から接続できるようになります。
例：https://15e3-xxxxxx.ngrok-free.app/wordpress
このURLをそのままチームメンバーやクライアントに共有すればOKです。
🔐 セキュリティ面での注意
- 誰でもアクセス可能になるため、認証やIP制限などの保護を考慮してください
- 公開作業が終わったら、ngrokのセッションを終了するのを忘れずに
🧼 作業終了後のリセット
セッション終了後はngrokのURLが無効になるため、WordPressのwp-config.phpから以下の行を削除またはコメントアウトして、元のlocalhost状態に戻してください。
// define('WP_HOME', '...');
// define('WP_SITEURL', '...');
✅ まとめ
ngrokを使えば、ローカルのWordPressサイトを簡単に外部共有できます。
ただし、URLの発行順とWordPress設定の順番が非常に重要なので、今回の手順通りに実施することでトラブルを防げます。
Share this post