ローカルにMAMPで構築したWPをngrokで外部に確認してもらう方法

ngrokという仮サーバーのようなものを立てて外部の依頼者にサイトの内容を確認してもらう際、CSSが効かない問題が出たので、備忘録として記載する。

CSSが効かない問題

下記記事の手順で進めた際、ngrok自体は動いているのにCSSが効いていない状態でしか見れない。
参考記事：【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

対処法

ngrokの公式サイトに記述があった。

①「Relative URL」プラグインのインストール
WordPressは絶対パスでURLを出力するらしく、早退パスで書いているCSSを見つけられなかったことが理由でCSSが反映されていなかったらしい。

そのため「絶対パス→相対パス」に書き換えるプラグイン「Relative URL」をインストールする。

②wp-configに「ngrokまでのトンネル開通したけどわかってる？」の文を追記

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

参考記事：ngrokドキュメンテーション

③ターミナルでngrokを実行する際に１文追加する

./ngrok http -host-header=rewrite http://localhost:8888

※8888は自身でMAMPを使用している際のポート番号

これでCSSが反映されたサイトが確認できました。