Nginx反向代理wordpress开启HTTPS

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

申请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和httpMixed 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