WordPressのadminページのスタイルが崩れて沼った

想定読者

WordPressとNginxの接続に成功したが、cssが読み込めない。
記事作成ページに進めない。
ボリューム位置を変更してから起こった。

結論

Nginxコンテナ側のuserが、WordPressのボリュームを読む権限がなかったから。

ディレクトリ構成

 $ tree srcs 
srcs
├── docker-compose.yml
└── requirements
    ├── mariadb
    │   ├── Dockerfile
    │   ├── conf
    │   │   └── my.cnf
    │   └── tools
    │       └── docker-entrypoint.sh
    ├── nginx
    │   ├── Dockerfile
    │   └── conf
    │       ├── default.conf
    │       └── nginx.conf
    └── wordpress
        ├── Dockerfile
        ├── conf
        │   └── www.conf
        └── tools
            └── docker-entrypoint.sh

解決策

nginxのconfファイルにuserがあったので、これをWordPressのコンテナにも作成した。

Nginx側

nginx.conf

user nginx;

worker_processes auto;

pcre_jit on;

error_log /var/log/nginx/error.log warn;

include /etc/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    server_tokens off;

    include /etc/nginx/conf.d/*.conf;
}

WordPress側

nginxユーザーを作成し、wpのディレクトリに権限を与える。

FROM debian:bullseye-slim

RUN apt-get update && apt-get install -y --no-install-recommends \
    sudo \
    curl \
    ca-certificates \
    mariadb-client \
    php7.4 \
    php7.4-fpm \
    php7.4-json \
    php7.4-phar \
    php7.4-iconv \
    php7.4-mysqli \
    && rm -rf /var/lib/apt/lists/* \
    && mkdir -p /run/php /var/www/html /var/www/.wp-cli/cache

RUN useradd -m -s /bin/bash nginx \
    && usermod -aG sudo nginx

RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
    && chmod +x wp-cli.phar \
    && mv wp-cli.phar /usr/local/bin/wp \
    && sudo wp cli update --allow-root

COPY ./conf/www.conf /etc/php/7.4/fpm/pool.d/

COPY ./tools/docker-entrypoint.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/docker-entrypoint.sh

EXPOSE 9000

WORKDIR /var/www/html

ENTRYPOINT ["docker-entrypoint.sh"]

ついでに、--allow-rootでWarningを吐いていたので、作成したユーザーでコマンドを実行するようにした。

docker-entrypoint.sh

#!/bin/bash

chown -R nginx:nginx /run/php /var/www/html /var/www/.wp-cli # 権限を再帰的に与える

# Check if wp-config.php exists, if not create it and install WordPress
if ! wp core is-installed --allow-root --path=/var/www/html; then

    echo "Downloading WordPress core files..."
    sudo -u nginx wp core download --path=/var/www/html --locale=ja

    echo "Creating wp-config.php..."
    sudo -u nginx wp config create --path=/var/www/html --dbname=$DB_NAME --dbuser=$DB_USER --dbpass=$DB_PASSWORD --dbhost=mariadb

    echo "Installing WordPress..."
    sudo -u nginx wp core install --path=/var/www/html --url=$WP_URL --title="WP_TITLE" --admin_user=$WP_ADMIN_USER --admin_password=$WP_ADMIN_PASSWORD --admin_email=$WP_ADMIN_EMAIL

    echo "Creating Editor User..."
    sudo -u nginx wp user create $WP_EDITOR_USER $WP_EDITOR_EMAIL --path=/var/www/html --user_pass=$WP_EDITOR_PASSWORD --role=author
fi

# Start php-fpm
php-fpm7.4 -F

最後に、php-fpmを設定するファイルにあったwww-dataというユーザーを変更した。

www.conf

[www]

user = nginx # www-dataから変更
group = nginx # www-dataから変更

listen = 9000

listen.owner = nginx # www-dataから変更
listen.group = nginx # www-dataから変更
listen.mode = 0660

pm = dynamic

pm.max_children = 5
pm.start_servers = 2

pm.min_spare_servers = 1
pm.max_spare_servers = 3

最後に

この記事で助かった方がいたら、いいねをつけていただけると励みになります！
最後までお読みいただきありがとうございました！

参考