目標
cloudflare tunnelを利用して、wordpressをhttpsで公開する。
前提
・対象とするwebページを、cloudflare tunnelを利用してhttpで公開済みであること。
・サーバを自宅で運用している。
・OSはAlmaLinux9
1. 証明書の作成
cloudflareのダッシュボードから
SSL/TLS>オリジンサーバーを選択。
「証明書を作成」をクリックして証明書を作成する
基本的に何もいじらず「作成」を押す。
出てきたオリジン証明書とプライベートキーをメモ帳などにコピーしておく。
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でアクセスするためのトンネルが張れているなら、それを参考にしてください。
重要！
私はここで詰まりました。「このページにアクセスするための十分な権限がありません。」と表示される場合はこちらを確認してみてください。
TLSの設定から
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アドレスを先程設定したトンネルに変更してください
下の方にある変更を保存をクリックすると反映されます。
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が上に来るようにしてください。
もしくは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