标签： code

使用certbot进行renew证书操作，基于Nginx+Apache。

在webroot模式下的Nginx配置，需要对80端口和443端口进行配置，以保证验证程序可以读取/.well-known/acme-challenge/路径

# 80端口
 # ACME challenge
    location ^~ /.well-known/acme-challenge/ {
        root  #webroot路径;
        allow all;
    }
   # 其他请求跳转 HTTPS
    location / {
        return 301 https://example.cn$request_uri;
    }

# 443端口
# ACME challenge
    location ^~ /.well-known/acme-challenge/ {
        root #webroot路径;
        allow all;
    }

一、一个烂摊子

部门此前寻找网站供应商制作了产品网站，其交付网站架构较为老旧，网站基于WordPress 5.0版本构建，PHP版本要求为不高于7.3，MySQL版本5.7。

就是这种要求在回迁公司服务器时也出现了各种问题。由于公司服务器环境过于杂乱，连mysql5.7的数据库都无法顺利导入。

这里面也有供应商的一些问题，例如交付的WordPress配置文件与数据库表头不匹配，数据库时间配置错误等。

在我的帮助下，数据库和配置文件都得以修改正常，网站终于部署上线，但是系统环境导致包含中文文件名的文件无法被解析，在调整Nginx配置无效后，IT让我修改中文名文件，我。。。

二、服务器和Docker

借由新ECS服务器和公司官网的搭建，考虑把产品网站也纳入部门服务器的管理。

但供应商的环境版本老久，为了避免产品网站潜藏的漏洞影响整体服务器的稳定，我使用了Docker来为产品网站配置环境。

中间也考虑使用LXD来实现，但是网络环境始终无法配置完成，因此不再浪费时间，使用Docker实现功能。

三、Docker的问题

最大的问题是镜像源，国内能搜索到的镜像源很多都停止了服务。因此需要在/etc/docker/daemon.json里配置可以访问的镜像源，这个不再赘述。

四、部署

将供应商的WP文件夹上传到服务器，可以在同位置配置Docker的yml文件。

version: '3.7'

services:
  wordpress:
    build: .
    container_name: wordpress-container
    ports:
      - "8000:80"  # WordPress 端口
    volumes:
      - /# 本地 WordPress 目录 wp:/var/www/html  # 本地 WordPress 目录
    networks:
      - wordpress_network
    depends_on:
      - mariadb  # 依赖 MariaDB 服务
    environment:
      WORDPRESS_DB_HOST: mariadb:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: # 用户名
      WORDPRESS_DB_PASSWORD: ${MYSQL_PASSWORD}  # 从 .env 读取密码
    restart: always

  mariadb:
    image: mariadb:latest
    container_name: mariadb-container
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}  # 从 .env 读取密码
      MYSQL_DATABASE: wordpress
      MYSQL_USER: # 用户名
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    volumes:
      - mariadb_data:/var/lib/mysql  # 使用 Docker Volume 代替宿主机路径
      - # 初始数据库地址:/docker-entrypoint-initdb.d/#初始数据库.sql  # 初始 SQL 数据
    ports:
      - "3307:3306"
    networks:
      - wordpress_network
    restart: always

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin-container
    environment:
      PMA_HOST: mariadb
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}  # 从 .env 读取密码
    ports:
      - "8081:80"
    networks:
      - wordpress_network
    restart: always

networks:
  wordpress_network:
    driver: bridge

volumes:
  mariadb_data:

从.env文件读取密码：

MYSQL_ROOT_PASSWORD=# 密码1
MYSQL_PASSWORD=# 密码2

如果是使用mariadb，则需要在WP的Config文件中修改配置：

define('DB_HOST', 'mariadb');

后端启动之后，我们可以通过IP+端口来进行服务的测试，如果没有问题，就可以通过主机的Nginx代理，来配置域名访问。

server {
    listen 80;
    server_name #域名;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name #域名;

    ssl_certificate /etc/letsencrypt/live/#域名/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/#域名/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://127.0.0.1:8000;#映射docker端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Forwarded-Proto https;
        proxy_redirect off;
    }
}

五、其他注意事项：

1、如果WP的重写规则不可用，检查WP文件夹权限。

2、如果配置HTTPS发现页面正常，但是管理界面出现问题，考虑是配置文件问题，参考官方说明配置。

define( 'FORCE_SSL_ADMIN', true );
// in some setups HTTP_X_FORWARDED_PROTO might contain 
// a comma-separated list e.g. http,https
// so check for https existence
if( strpos( $_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false )
    $_SERVER['HTTPS'] = 'on';

最近手搓基于WP架构的企业官网，发现用Nginx+PHP-FPM时，在多站点的情况下可能会有一些地方不容易调试，所以尝试使用Nginx作为代理服务器，Apache作为后端，发现这对WordPress有很好的兼容性。

那么此前的网站如果已经完成在Nginx+PHP-FPM的部署，如何切换到Nginx+Apache呢？

这里省略Apache和其PHP模块的配置说明，需要重点修改的有以下几点：

1、Apache的配置：

Apache的端口设置，因为我们要使用Nginx转发HTTPS，因此设置Apache的监听端口为8080，避免和Nginx的端口冲突。

<VirtualHost *:8080>
    DocumentRoot /var/www/html/wordpress
    ServerName yourdomain.com
    <Directory /var/www/html/wordpress>
        AllowOverride All
        Require all granted
    </Directory>
    
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

2、WP-Config的配置修改：

如果网站使用了HTTPS，那么需要按照WordPress的官方设置来进行修改WP-Config：

define( 'FORCE_SSL_ADMIN', true );
// in some setups HTTP_X_FORWARDED_PROTO might contain 
// a comma-separated list e.g. http,https
// so check for https existence
if( strpos( $_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false )
    $_SERVER['HTTPS'] = 'on';

3、修改Nginx的站点配置文件：

删除此前用于PHP-FPM的配置代码，把HTTPS转发到Apache处理。

location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect off;
}

4、修改.htaccess文件：

如果使用子文件夹模式：

# BEGIN WordPress Multisite
# Using subfolder network type: https://wordpress.org/documentation/article/htaccess/#multisite

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

# END WordPress Multisite

如果使用子域模式：

# BEGIN WordPress Multisite
# Using subdomain network type: https://wordpress.org/documentation/article/htaccess/#multisite

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

# END WordPress Multisite

5、修改PHP配置文件：

选择适合自己的媒体处理限制，因为此前处理媒体的PHP服务是PHP-FPM，切换到Apache后需要配置对应的PHP服务。

6、检验Nginx配置文件，重启Nginx服务和Apache服务。

类似如下效果：

可以直接在区块代码编辑器中进行添加。

<p class="has-text-align-left has-text-color"
    style="color:#ffffff61;font-size:72px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">
    <em>H</em> <strong>armony</strong></p>

例如以上是第一行动画文字的代码，因为在区块中我们给不同的文字设定了不同的标签，我们可以直接在代码中修改后面strong标签的类，改成如下：

<p class="has-text-align-left has-text-color"
    style="color:#ffffff61;font-size:72px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">
    <em>H</em> <strong class="change-word">armony</strong></p>

这样我们就可以利用CSS+JS动画实现该标签的动画效果。

CSS：

<style>
    .change-word {
        display: inline-block;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    }
    .hidden {
        opacity: 0;
        transform: translateY(-10px);
    }
</style>

JS：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const words = [
            ["armony", "ope", "ealth", "appiness"], // H
            ["ptimize", "pportunity", "rganic", "vergreen"], // O
            ["ature", "urture", "eeds", "urturing"], // N
            ["nergy", "arth", "cology", "nvironment"], // E
            ["ustainability", "ynergy", "upport", "olutions"], // S
            ["olutions", "trategy", "uccess", "ymbiosis"] // S
        ];

        function changeWord(index, element, delay) {
            setTimeout(() => {
                element.classList.add("hidden"); // 先隐藏
                setTimeout(() => {
                    let nextWord = words[index].shift();
                    words[index].push(nextWord);
                    element.textContent = nextWord;
                    element.classList.remove("hidden"); // 显示
                }, 400);
            }, delay);
        }

        function startAnimation() {
            let elements = document.querySelectorAll(".change-word");
            let delay = 100;
            elements.forEach((el, index) => {
                setInterval(() => changeWord(index, el, index * delay), 2500);
            });
        }

        startAnimation();
    });
</script>

移动版本的微信，在其内置的微信WEB环境中，对视频播放有很多限制，如果我们的封面区块想设置视频，就会出现无法加载播放的情况。

为了解决这个问题，我去看了一下一些大厂的做法，当然大厂用的肯定不是WP，不过思路是可以借鉴的。

华为的做法是用一个JS来判断是否是微信环境，如果是微信环境则切换到图片。OPPO的做法更加直接，他们直接用图片+动画的形式解决了视频这个问题，emm通用性确实刚刚的。

那么我们在WP下，使用原版的封面区块是否可以进行类似的切换呢？也是可以的，原理是在区块代码中插入一个图片，利用一个简单的IF判断来实现微信环境下的自动切换。

具体代码如下：

<!-- wp:cover {"url":"//默认图片地址","id":588,"dimRatio":50,"overlayColor":"contrast","isUserOverlayColor":true,"backgroundType":"video","minHeight":840,"minHeightUnit":"px","isDark":false,"className":"main-container","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light main-container" style="min-height:840px">
    <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>

    <!-- 视频背景，添加 id="background-video" -->
    <video id="background-video" class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline 
        src="//视频地址" data-object-fit="cover">
    </video>

    <!-- 备用静态图片，默认隐藏 -->
    <img id="background-image" src="//图片地址" 
        alt="Background Image" style="display:none; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;">

    <div class="wp-block-cover__inner-container">
        <!-- 可添加文本或其他内容 -->
    </div>
</div>
<!-- /wp:cover -->

<script>
document.addEventListener("DOMContentLoaded", function () {
    function isWeChatBrowser() {
        return /MicroMessenger/i.test(navigator.userAgent);
    }

    if (isWeChatBrowser()) {
        let video = document.getElementById("background-video");
        let image = document.getElementById("background-image");

        if (video && image) {
            video.style.display = "none"; // 隐藏视频
            image.style.display = "block"; // 显示备用图片
        }
    }
});
</script>