WordPress Docker 維運部署筆記

推薦 Portainer 方便圖形化管理

Docker Compose

若擔心 latest 會每次 pull 重新部署就弄壞的話,就自己挑選合適版本號定下來。

version: "4.5"

services:
  tsumugi-db:
    image: mariadb:latest
    volumes:
      - tsumugi-mariadb_data:/var/lib/mysql
    restart: always
    environment:
      MARIADB_ROOT_PASSWORD: your-mariadb-root-pwd
      MARIADB_DATABASE: your-wordpress-db
      MARIADB_USER: yourDbUserForWp
      MARIADB_PASSWORD: yourMariaDbPassword

  tsumugi-wordpress:
    depends_on:
      - tsumugi-db
    #links:
    #  - mariadb:mysql
    image: wordpress:latest
    volumes:
      - tsumugi-wordpress_data:/var/www/html
      - tsumugi-wordpress_php:/usr/local/etc/php

    restart: always
    environment:
      WORDPRESS_DB_HOST: tsumugi-db
      WORDPRESS_DB_USER: yourDbUserForWp
      WORDPRESS_DB_PASSWORD: yourMariaDbPassword
      WORDPRESS_DB_NAME: your-wordpress-db

  zunda-db:
    image: mariadb:latest
    volumes:
      - zundamon-mariadb_data:/var/lib/mysql
    restart: always
    environment:
      MARIADB_ROOT_PASSWORD: some-mariadb-root-pwd
      MARIADB_DATABASE: zundamon-wordpress
      MARIADB_USER: zundamochi114514
      MARIADB_PASSWORD: some-mariadb-password

  zundamon-wordpress:
    depends_on:
      - zunda-db
    image: wordpress:latest
    volumes:
      - zundamon-wordpress_data:/var/www/html
      - zundamon-wordpress_php:/usr/local/etc/php
    restart: always
    environment:
      WORDPRESS_DB_HOST: zunda-db
      WORDPRESS_DB_USER: zundamochi114514
      WORDPRESS_DB_PASSWORD: some-mariadb-password
      WORDPRESS_DB_NAME: zundamon-wordpress
      WORDPRESS_TABLE_PREFIX: wpzundamochi_

  https-portal:
    image: steveltn/https-portal:1
    ports:
      - "192.168.19.19:80:80"
      - "192.168.19.19:443:443"
    restart: always
    environment:
      DOMAINS: 'www.zundamon-kawaii.com -> http://tsumugi-wordpress:80, blog.zundamon.co.jp -> http://zundamon-wordpress:80, www.zundamon.co.jp -> http://zundamon-wordpress:80, zundamon.co.jp -> http://zundamon-wordpress:80'
      CLIENT_MAX_BODY_SIZE: 500M
      STAGE: 'production' # Don't use production until staging works
      # FORCE_RENEW: 'true'
    volumes: 
      - https-portal-data:/var/lib/https-portal

volumes:
  tsumugi-mariadb_data: {}
  tsumugi-wordpress_data: {}
  tsumugi-wordpress_php: {}
  zundamon-mariadb_data: {}
  zundamon-wordpress_data: {}
  zundamon-wordpress_php : {}
  https-portal-data: {}

除錯

  • 瀏覽器 開發者 Console 印出 413 Request entity too large
    • https-portal 需要調整環境變數 
CLIENT_MAX_BODY_SIZE: 500M

附帶一提我不小心在 500M 後面加上分號變成 \CLIENT\_MAX\_BODY\_SIZE: 500M;\ 結果容器還是運行,但是顯然網站沒有回應。
查詢 https-portal 的 error.log 會出現以下特徵錯誤訊息,我的 Volume 配置是位處 dd87****87b 資料夾

2024/07/19 13:52:01 [emerg] 59#59: unexpected ";" in /etc/nginx/nginx.conf:56
  • 無法上傳大於 2MB 的檔案到 WordPress
    • 由於我的 Compose 配置已將 PHP 直接對應到 Volume,所以可以 sudo dolphin /var/lib/docker/volumes/yourstack-zundamon-wordpress_php/_data/conf.d 新增 uploads.ini 撰寫內容如下
file_uploads = On
memory_limit = 500M
upload_max_filesize = 500M
post_max_size = 500M
max_execution_time = 600

Backup Script

#!/bin/bash

# 定義變量
NFS_SERVER="192.168.x.x" #目的地 Hostname
NFS_PATH="/volume1/Backup-NFS" #目的地目錄
LOCAL_PATHS=(
    "/var/lib/docker/volumes/yourblog_mariadb_data/_data"
    "/var/lib/docker/volumes/yourblog_wordpress_data/_data"
#...自己新增與調整,字串結尾不需要逗號
)
MOUNT_POINT="/mnt/backup_nfs"
DATE_NOW=$(date +'%Y%m%d%H%M%S')
BACKUP_FILE="$MOUNT_POINT/web/websiteBackup_$DATE_NOW.tar.gz"

# 創建掛載點
mkdir -p $MOUNT_POINT

# 檢查 NFS 是否已經掛載
mountpoint -q $MOUNT_POINT
if [ $? -ne 0 ]; then
  echo "掛載 NFS 共享目錄..."
  mount -t nfs $NFS_SERVER:$NFS_PATH $MOUNT_POINT

  if [ $? -ne 0 ]; then
    echo "掛載 NFS 共享目錄失敗"
    exit 1
  fi
fi

# 壓縮並備份數據
tar -czf $BACKUP_FILE -C / ${LOCAL_PATHS[@]}

# 刪除多餘的備份
find $MOUNT_POINT -name "websiteBackup_*.tar.gz" -type f -print | while read FILE; do
    FILE_DATE=$(basename $FILE | sed 's/websiteBackup_\(.*\)\.tar\.gz/\1/')
    FILE_EPOCH=$(date -d "${FILE_DATE:0:8}" +%s)
    NOW_EPOCH=$(date +%s)
    AGE=$(( (NOW_EPOCH - FILE_EPOCH) / 86400 ))

    if [ $AGE -le 7 ]; then
        # 保留7天內的每日一份
        continue
    elif [ $AGE -le 30 ]; then
        # 保留一個月內的每週一份
        FILE_DAY=$(date -d "${FILE_DATE:0:8}" +%u)
        if [ $FILE_DAY -eq 1 ]; then
            continue
        fi
    elif [ $AGE -le 365 ]; then
        # 保留一年內的每月一份
        FILE_DAY=$(date -d "${FILE_DATE:0:8}" +%d)
        if [ $FILE_DAY -eq 1 ]; then
            continue
        fi
    elif [ $AGE -gt 365 ]; then
        # 保留每年的第一天
        FILE_MONTH_DAY=$(date -d "${FILE_DATE:0:8}" +%m%d)
        if [ $FILE_MONTH_DAY -eq "0101" ]; then
            continue
        fi
    fi

    # 刪除不符合保留規則的文件
    rm -f $FILE
done

crontab -e 搭配 micro 編輯器

WordPress: Format and colorize code block by applying prism.js

Motivations

for (int i = 5; i < 10 ; i++) {
    Console.WriteLine("Hello Moto?");
}

If you are using Vantage for your WordPress site, and you want to make your code block looks fancy, follow the instructions:

Instructions

1. Make sure you have created a child theme based on Vantage, and it's activated.

2. Reset styles applied to code block.

I highly recommend to work with WP-SCSS plugin when writing CSS/SCSS, so you can have stylesheets organized without the costs of performance by using @import.

/* Reset the style set by Vantage (the parent theme) */
.entry-content pre, .entry-content code {
    background: unset;
    font-family: unset;
    border: unset;
    box-shadow: unset;
    overflow-x: unset;
}

Later we will apply prism.js and its stylesheet.

3. Insert code snippits to your child theme's "functions.php"

function code_pre_theme(){
    // To check if currently viewing page is a "post"
    if (is_singular('post')) {
        wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js');
        wp_enqueue_script('prism-core-js', 'https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js');
        wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css');
        wp_enqueue_script('prism-autoloader-js', 'https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js');
    }
}
add_action('wp_enqueue_scripts', 'code_pre_theme', 10); //Number 10 heres depend on site. The princlple is to set a number larger than the essential scripts and styles belong to your parent theme, which is vantage in this case.

By enqueuing prism-core.min.js and prism-autoloader.min.js, it will utomatically loads languages's style when necessary.
You may opt-in languages based on your needs. For example, to load certain style based on has_tag('php'), has_tag('csharp') result.
Visit prism.js at cdnjs.com for more programming language supports.

Conlusion

You don't have to follow every steps as I did, as you may come up with a better solution for your own site.

At the time I wrote this article, I absolutely have zero knowledge in PHP, only knowing C#, Javascript, Java, SCSS; writing and modifying some php script isn't complicated, so go ahead and try all the possibilities.