自宅サーバで建てたwordpressで投稿できなくて詰まった話

はじめに

本ブログのサーバは以下のような構成で動いています

自宅のLAN内にあるサーバ（ラズベリーパイ4・LAMP+wordpress）
サーバをインターネットに公開するためのCloudflare tunnnel

要は自宅サーバ＋それを公開するためのCloudflare tunnelといサービスを使っています。

Cloudflare tunnnelとそれを使ったサーバの公開方法については公式のドキュメントや以下の記事などを参照にしてください。

Cloudflare Tunnel を使って自宅をデータセンターみたいにするhttps://zenn.dev/takajun/articles/fbd783e459c722

wordpressを設定しサーバを公開…がページをアップできない

wordpressとcloudflareの設定後、さっそく投稿をしてみようとしましたが、こんなエラー文が表示されました。

更新に失敗しました。現在オフラインのようです

グーグルさんに聞いてみるとwordpress内のキャッシュやプラグイン、mysqlのバージョンが古いなどが原因と書かれていたので、いろいろ解決法を試してみましたが改善せず…

また同時に、wordpressで利用しているcocoonというテーマのSNSアイコンのが表示されなくなるという事象も起こり、テーマも疑ったりしましたがバージョンなどを変えても改善せずでした。

サーバ側でhttpsを受け付けてなかったことが原因

さらに調べて見るとブラウザとcloudflare間はhttpsで通信しているが、cloudflareとサーバ間はhttpで通信しているために内部でURLが書き換わってしまっていることが原因っぽいことがわかりました。

つまりwordpressが処理しているURLは
https:www.iambdman.com

であるのに対し、サーバが応答しているURLは
http:www.iambdman.com
になっていたのが原因らしいです。

cloudflareは気を利かせてブラウザとの通信をデフォルトでhttpsでやってくれるみたいです。

しかし、証明書などを設定するのが面倒だったのでapacheではhttpしか応答させておらず、それが仇となってしまいました。

解決法

やったこと

サーバでオレオレ証明書を作成
apacheにhttps用のvirtualhostを作成
wp-config.phpでhttpsの有効化
Cloudflare tunnelでhttps用の設定追加

1、2はネットに情報がゴロゴロあるので省略

証明書についてはcloudflare⇔自宅サーバ間がhttps化されればいいだけなので、オレオレ証明書で問題ないです。

3、4については以下の投稿を参考にしました。

1. Trick WordPress into thinking it’s being accessed via SSL.

In wp-config.php, you should be able to add $_SERVER['HTTPS'] = 'on'; right near the top.

2. Setup a local SSL certificate on your host.

If you setup a self-signed SSL certificate on your web server, you can then configure your tunnel to connect via HTTPS (tunnel route becomes https://localhost:443/ 21). However, you also need to configure your Tunnel to ignore SSL errors (self signed certificates will be rejected by default).
https://community.cloudflare.com/t/wordpress-site-with-cloudflare-tunnel/453403

3 : /var/www/wordpress/wp-config.phpで下記の行をonに変更
$_SERVER['HTTPS'] = 'on';

4 : 写真のようにCloudflare tunnelの設定でwww.iambdman.comへのアクセスは、httpsで応答するように設定