2026年7月28日

2026年7月28日

WordPressのngrokで安全にローカル開発環境を公開

はじめに

ローカル開発環境でWordPressをテストする際、外部からアクセスできるようにしたい場面があります。この記事では、ngrokというツールを使用して、簡単にセキュアなトンネルを通じてローカルサーバーを公開する方法を説明します。

症状・背景

  • リモートでのレビュー: チームメンバーが異なる場所にいる場合、その人が自分のデスクトップからローカル開発環境にアクセスしたい。
  • クライアントとの共有: クライアントに新しいサイトのプロトタイプを確認してもらいたいが、まだ本番サーバーにはアップロードしていない。
  • モバイルデバイスからのテスト: モバイルデバイスからローカル開発環境をテストしたい。
  • APIテスト: エンドポイントにリクエストを送るための簡単な方法が必要。

手順・設定方法

ステップ1: ngrokのインストールと初期設定

# ngrok公式サイトから最新バージョンをダウンロードします。
wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.tgz

# ダウンロードしたファイルを解凍します。
tar -xvf ngrok-stable-linux-amd64.tgz

# ngrokの実行ファイルへのパスを通す
export PATH=$PATH:~/Downloads/ngrok-stable-linux-amd64

ステップ2: APIキーの取得と設定

# ngrok公式サイトからAPIキーを取得します。
ngrok authtoken <あなたのngrok_APIキー>

# ローカル開発環境のポート番号を指定してトンネルを作成します。
ngrok http 80

ステップ3: WordPressの設定

# wp-config.phpファイルを開き、DB_HOSTを以下のように変更します。
sed -i 's/localhost/ngrok.me/g' /var/www/html/wp-config.php

# データベース内の`wp_options`テーブルからsiteurlとhomeを更新します。
mysql -u root -p wordpress <database> -e "UPDATE wp_options SET option_value = REPLACE(option_value, 'http://localhost', 'https://<ngrokのURL>') WHERE option_name IN ('siteurl','home')"

ステップ4: 安全なトンネルの監視とトラブルシュート

# ngrokコマンドラインインタフェースを起動し、トンネルの状態を確認します。
ngrok monitor <トンネルID>

# ローカルサーバーが突然停止した場合、次のコマンドで自動的に再開させることができます。
nohup ./ngrok http 80 > /var/log/ngrok.log 2>&1 &

注意事項

  • 実際の運用環境では使用しないこと: ngrokはセキュリティ上のリスクがあるため、本番環境での利用は避けてください。ローカル開発やテスト用にのみ使用しましょう。
  • HTTPSを使用すること: データが第三者に見られる可能性を低減するために、常にHTTPSトンネルを利用してください。
  • セキュリティ上の注意: ngrok APIキーの管理には注意が必要です。漏洩した場合、他人が自分の開発環境にアクセスする可能性があります。
  • パフォーマンス/運用上の注意: ngrokはローカルサーバーと外部ネットワーク間でデータを中継しますので、大量のトラフィックがある場合はパフォーマンスに影響が出る可能性があります。

まとめ

1. セキュリティ重視: APIキーは厳重に管理し、不正アクセスから保護する。

2. HTTPSの利用: HTTPSトンネルを使用してデータを暗号化する。

3. 自動再起動設定: ローカルサーバーが停止した場合でも自動的にngrokを再開するように設定しておく。

4. テストに専念: ngrokは主に開発やテスト用途で使用し、本番環境では利用しないことを忘れないでください。

5. 定期点検: 定期的にngrokのトンネル状況を確認し、異常がないかチェックする。

関連記事:

お気軽にご相談ください

お見積りへ お問い合わせへ