cloudflare tunnelを利用したwordpressのTLS化

## 目標
cloudflare tunnelを利用して、wordpressをhttpsで公開する。

## 前提
・対象とするwebページを、cloudflare tunnelを利用してhttpで公開済みであること。
・サーバを自宅で運用している。
・OSはAlmaLinux9


## 1. 証明書の作成
cloudflareのダッシュボードから
SSL/TLS>オリジンサーバーを選択。
「証明書を作成」をクリックして証明書を作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3990337/946084e8-d704-4bf3-8a48-110bf3670fd8.png)
基本的に何もいじらず「作成」を押す。

出てきたオリジン証明書とプライベートキーをメモ帳などにコピーしておく。

## 2. オリジンサーバへ証明書の導入
mod_sslをインストールする。
```
sudo dnf install -y mod_ssl
```

証明書をvimで書き込み
```
vim /etc/httpd/conf/ssl.crt
```

プライベートキーをvimで書き込み
```
vim /etc/httpd/conf/ssl.key
```
DocumentRootの設定コメント解除とPathの設定
```
vi /etc/httpd/conf.d/ssl.conf

SSLCertificateFile /etc/httpd/conf/ssl.crt

SSLCertificateKeyFile /etc/httpd/conf/ssl.key

#  General setup for the virtual host, inherited from global configuration
DocumentRoot "/var/www/html"
```
ファイルの権限周り設定
```
chown -R root:root /etc/httpd/conf/ssl.crt
chown -R root:root /etc/httpd/conf/ssl.key
chmod -R 400 /etc/httpd/conf/ssl.crt
chmod -R 400 /etc/httpd/conf/ssl.key
```
Apacheリスタート
```
systemctl restart httpd
```

以上でローカルからhttpsで通信できるようになっているはずです。
(自己証明書のため警告は出る)

## 3. cloudflareの設定
cloudflareダッシュボードから
Access>Zero trustを起動する
Network>Tunnelsから該当のTunnelを選択
以下の画像のように設定する。ドメイン等は各自の環境に合わせてください。すでにhttpでアクセスするためのトンネルが張れているなら、それを参考にしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3990337/40fda639-6c0d-4131-a013-5173538f1854.png)

**重要！**
私はここで詰まりました。「このページにアクセスするための十分な権限がありません。」と表示される場合はこちらを確認してみてください。
TLSの設定から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3990337/34c92bfa-8d3d-4cfa-8059-499958f0aa50.png)
TLS検証なしをオンにしてください。ここがオフのままだと、wordpressの管理ページが開けません。

参考
https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/configure-tunnels/origin-configuration/
https://zenn.dev/arailly/books/41061020f0cfaa/viewer/f9e739

忘れずに右下の「ホスト名を保存する」を押してください。

## 4. wordpressの設定
ダッシュボードの「設定」からサイトアドレスとwordpressアドレスを先程設定したトンネルに変更してください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3990337/77daf6f9-9c09-4413-957d-6f49f545c82a.png)
下の方にある変更を保存をクリックすると反映されます。

## 5. リダイレクトループ対策
この時点では、対象ドメインのURLにアクセスしてみても表示されないと思います。

### ERR_TOO_MANY_REDIRECTSと表示される場合
リダイレクトループが発生している可能性が高いです。
wp-config.phpに以下を追記してください。
```
if ( ! empty( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https' ) {
    $_SERVER['HTTPS']='on';
}
```

### bad gatewayと表示される場合
cloudflareのトンネルに、ホスト名が複数ある場合、httpが上に来るようにしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3990337/7fd0cb6f-f4ec-457f-9cf0-5b0c29cf9a56.png)
もしくはhttpのホスト名を削除してください。

それでも上手く行かない場合はwordpressのサイトアドレス等を全てローカルのアドレスに変更して、ローカルからhttpsで通信できることを確認してください。ローカルで上手く行かない場合は証明書のインストール関連で問題が起きている可能性があります。

## 6. まとめ
wordpressとcloudflare tunnelを使用して自宅サーバ内のブログを公開しました。
以下が私が躓いたポイントになります。
### ・bad gateway防止
http
httpsの順でホスト名
### ・リダイレクトループを防ぐ
wp-config.phpに追記
```
if ( ! empty( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https' ) {
    $_SERVER['HTTPS']='on';
}
```
### ・権限がありません
cloudflare tunnelの該当トンネルを選択して
パブリックホストタブでhttps://localhostを選択
その他のアプリケーション設定からTLSを展開してTLS検証なしをオンにする

## 参考
https://qiita.com/jinnai73/items/638dcc1434d47b12e6ba
https://qiita.com/jinnai73/items/638dcc1434d47b12e6ba
https://developers.cloudflare.com/ssl/troubleshooting/too-many-redirects/
https://1design.jp/web-development/1873