Nginx反向代理wordpress开启HTTPS

by

网站创建过程详见：个人网站搭建过程

申请SSL证书

首先申请一个SSL证书，我在腾讯云上申请的

https://buy.cloud.tencent.com/ssl?fromSource=ssl

注：23年3月20号以后页面进行了改版，现在在证书购买页面看不到免费证书了，需要去 SSL证书管理控制台/我的证书/免费证书 里面才能看到购买免费证书的入口，现在全网域名可配置20个免费证书，腾讯云域名还能额外配置30个免费证书

使用dns验证需手动添加一条域名解析记录

使用文件验证需在web根目录创建指定文件

以下为使用dns验证的方式

根据提示，去域名服务商添加一条解析记录

点击查看域名验证状态，等待几分钟即可，都是自动验证签发的

签发通过后点击下载，会得到一个压缩包，里面有证书以及私钥

修改wordpress地址设置

将原来的http修改为https，关于这两个地址的作用：关于wordpress中WordPress Address和Site Address的理解

给nginx配置SSL证书

将上述证书和私钥复制到nginx服务器上，例如我这里就把它们放在了nginx容器中的 /opt/bitnami/nginx/conf/cert/blog 目录（解压后一共有四个文件，但只需要这两个就够了）

修改nginx配置文件

# 用作将http跳转到https
server {
    listen 80;
    server_name woyou.cool;
    rewrite ^/(.*) https://blog.woyou.cool/$1 permanent;
}
server {
    listen 443 ssl;
    server_name blog.woyou.cool;
    access_log /opt/bitnami/nginx/logs/huntzou_website.log;
    error_log /opt/bitnami/nginx/logs/huntzou_website_error.log;

    #证书文件名称
    ssl_certificate /opt/bitnami/nginx/conf/cert/blog/blog.woyou.cool_bundle.crt;
    #私钥文件名称
    ssl_certificate_key /opt/bitnami/nginx/conf/cert/blog/blog.woyou.cool.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header HOST $http_host;
        proxy_set_header X-NginX-Proxy true;

        # 注意这个配置，一定要有，下文说明
        proxy_set_header X-Forwarded-Proto  https;

        proxy_pass http://wp-web:80;
        proxy_redirect off;
    }
}

将配置文件保存后重启nginx

使用https访问页面就可以了

特别注意

我遇到的问题

问题1：管理页面无限重定向

问题2：出现Mixed Content错误，首页的js和css无法正常加载

上面两个问题的原因是一样的，由于开始我配置nginx的时候没有加 proxy_set_header X-Forwarded-Proto https 导致页面一直访问的有问题，即页面可以访问，但是控制台提示css和js仍使用http的方式加载，这就导致了一个页面 混合使用https和http 即 Mixed Content，这在目前主流浏览器上都是不允许的，所以js和css不会被下载，导致页面渲染出错。

问题原因

在apache的wordpress根目录下有个 wp-config.php 文件，我发现里面有这么一句话：

https://wordpress.org/support/article/administration-over-ssl/#using-a-reverse-proxy

说的是：如果你使用了https的反向代理服务器代理了http的wordpress站点，那么你需要在请求头上加 HTTP_X_FORWARDED_PROTO=https ，否则会陷入无限重定向，并产生Mixed Content错误

解决方案

如上述nginx配置，加上 proxy_set_header X-Forwarded-Proto https; 就好了

Leave a Comment