Docker + WordPress + HTTPS部署教程

WordPress

Docker 没撒,一个 compose 搞掂。

version: "3"
services:
  wordpress:
    image: wordpress
    volumes:
      - /mnt/wordpress:/var/www/html
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: 192.168.35.165:3306
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: xxx
      WORDPRESS_DB_NAME: xxxx
volumes:
  wordpress_data: {}
networks:
  default:
    driver: host
  • WORDPRESS_DB_HOST 为数据库 IP + 端口号
  • 不绑定80端口是因为多域名同时使用一个机器,二级路由有其他服务,所以映射到主机的8000端口

Nginx HTTPS

随便去谁家云搞个免费的SSL 证书。

宿主机器装好Nginx。

新增一个 xxx.conf,配置一下SSL证书

server {
    listen 443 ssl http2;
    server_name house2048.cn www.house2048.cn;
    location / {
        proxy_pass http://house2048-wp/;
        proxy_redirect  off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    ssl on;
    ssl_certificate /etc/nginx/conf.d/ssl/house2048.cn_nginx/house2048.cn_bundle.crt;
    ssl_certificate_key /etc/nginx/conf.d/ssl/house2048.cn_nginx/house2048.cn.key;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    gzip on;
    gzip_min_length 5k;
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 3;
    gzip_types text/plain application/json application/javascript text/css application/xml text/javascript image/jpeg image/gif image/png;
    gzip_vary on;
}

server {
    listen 80;
    server_name house2048.cn www.house2048.cn;
    add_header Strict-Transport-Security max-age=15768000;

    location / {
        proxy_pass http://house2048-wp/;
        proxy_redirect  off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /app/house-map/ {
        proxy_pass http://house-map-ui/;
    }

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
  • house2048-wp 是在nginx.conf 配置过的服务名, 如下
http  {

    upstream house2048-wp {
        #weigth
        server 127.0.0.1:8000;
    }
}

这个搞完之后,HTTPS域名证书已经配置好了。

不过,因为WordPress神奇的一些玩意,

你会发现打开 https://YousrDomain.com 页面正常,但是CSS和JS无法加载。

原因很简单,在https页面禁止加载http资源。

WordPress HTTPS资源配置

于是你可能去翻一下文章,说WordPress开启HTTPS怎么操作。

各种文章来来去去就这几个说法:

  • SiteURL改成HTTPS地址
  • 改数据库里面数据,把http的字符串都换成https
  • 改Apache2 的路由重定向

……

然后你会浪费宝贵的一个下午或者一个通宵。

解决方案其实很简单。

在后台设置,找到”主题文件编辑器“,大概是”/wp-admin/theme-editor.php“,

选择functions.php, 在里面添加两句代码,保存。

// 
add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2);
function agnostic_script_loader_src($src, $handle) {
    return preg_replace('/^(http|https):/', '', $src);
}

add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2);
function agnostic_style_loader_src($src, $handle) {
    return preg_replace('/^(http|https):/', '', $src);
}

刷新页面。

完事。

Leave a comment

Your email address will not be published. Required fields are marked *