ngrokを使ってMAMPでホスティングしているローカルサイトを公開

WFHが続いていて、今まで、開発中のサイトをLAN内でデザイナーチェックとかしてもらっていたのも、遠隔でできないといけないので、ngrok（無料版）を使ってやってみました。
今まで勝手に「MAMPで、しかもWordPressだと無理！」と思ってたけど、簡単にできました・・・。わざわざWordPressのホスト名書き換えたりとかの作業もいらず、普段の作業の中に上手く溶け込ませることができそうです。実際の公開サイトの方への影響も極力抑えるように意識しました。

前提

• MAMPを使ってhttps有効にして、https://mysite.localというホスト名で開発中
• WordPressのインストール先 {DocumentRoot}/wp

手順

ngrokのインストール

ここからダウンロードしてきたバイナリファイルを、PATHの通ったディレクトリに配置。今回は、~/bin/に配置しました。

実行できるか確認

ngrok --version
ngrok version 2.3.35

ついでに、authtokenも登録しておきました。（いらないかも？）

ngrok authtoken xxxxxxxxxxxxxxxxx

設定

この記事の通りなのですが・・・この方式なら、WordPress側の設定を書き換えなくて良いので楽ですね。

1. Relative URLプラグインのインストール＆有効化（実際の公開サイトに影響を与えないためには、ローカルでだけ有効化しておくのが良さそう）
2. wp-config.phpに下記を追記

define('WP_SITEURL', 'https://'.$_SERVER['HTTP_HOST'].'/wp');
define('WP_HOME', 'https://'.$_SERVER['HTTP_HOST']);

WP_SITEURLに、/wpを付けていますが、WordPressのインストール先ディレクトリがそうだからです。そこは適宜変更してください。

なお、弊社では弊社開発の drone-deploy を使っているので、リモートにデプロイされたときは無効になるよう、正確には下記のように書くのが吉。

//DEP_REMOTE_RM /*
define('WP_SITEURL', 'https://'.$_SERVER['HTTP_HOST'].'/wp');
define('WP_HOME', 'https://'.$_SERVER['HTTP_HOST']);
// */

DB上のドメイン書き換え

画像などのDB上にドメイン付きで保存されたファイルパスなどを書き換えておかないとリンク切れになるので、必要があれば下記を実行しておきましょう。

wp search-replace '//xxxxx.local' '//xxxxxx.ngrok.io'

公開

ngrok http -host-header=rewrite https://mysite.local

以上で、生成されたURLでリモートで作業しているデザイナーさんに確認してもらえます。