解决docker容器下php-fpm模式的wordpress无法被nginx代理，静态CSS文件无法请求

部署视图

整体如下，主机只开放一个80端口，我不同域名通过nginx反向代理，比如www.trilliongame.fun代理到3300端口，而3300是被wordpress的container映射的服务，其他域名类似横向扩展。

2 安装过程

前置条件是拉取mysql镜像，并启动容器，写好初始化脚本，既创建MySQL用户，数据库，给用户分配权限。(可以重新写dockerfile，我是写好脚本传入contaier运行初始化)

console 复制代码

mysql -uroot -p<pass> -- 一般是在mysql容器启动run 的时候传入的环境变量-e

-- 进入mysql交互窗口
CREATE DATABASE IF NOT EXISTS <db>; -- 创建数据库

use mysql;

CREATE USER '<username>'@'%' IDENTIFIED BY '<pass>'; -- 增加一个用户
GRANT ALL PRIVILEGES ON <db>.* TO '<username>'@'%';

-- 刷新权限表
FLUSH PRIVILEGES;

安装好nginx，并用nginx代理好80端口
拉取镜像：docker pull wordpress:beta-php8.4-fpm-alpine
启动wordpress容器

console 复制代码

docker run --name wp_tg_ct -p 3300:9000 -e WORDPRESS_DB_PASSWORD=<mysql_password>  -e WORDPRESS_DB_HOST=<mysql的docker网段172.17.0.2>  -e WORDPRESS_DB_USER=<username> -e WORDPRESS_DB_NAME=<db> -d wordpress:beta-php8.4-fpm-alpine

修改nginx配置文件使反向代理生效
1. 注意点1：fpm模式下，是用的fast-cgi，所以通过curl，http是无法访问。所以nginx配置的时候不能用proxy_pass，要用fastcgi_pass
2. wordpress里面的静态资源，css文件在wp-includes下，这些无法透穿出来（我没想到其他好方法），所以容器启动后，需要通过docker cp将容器的wordpress的代码拷贝一份到宿主机上。然后再在nginx里面配置静态文件解析路径，否则网站没有样式。不用-v映射容器的/var/www/html是因为如果宿主机的文件夹为空，而容器内的文件不为空，容器内的文件夹会被覆盖，wordpress的代码会不可见
3. 最坑的一点，wordpress的根目录是/var/www/html，同时，nginx安装后，它也会在宿主机上创建一个根目录/var/www/html，里面存放了一个nginx的欢迎页面index.nginx-debain.html，会产生一个情况，当访问www.trilliongame.fun的时候报错403， nginx forbidden，但是访问www.trilliongame.fun/index.php是可以的。原因就是这个冲突，我的处理是删掉宿主机上的/var/www/html文件夹。
nginx配置文件生效前宿主机的操作

console 复制代码

rm -rf /var/www/html -- 删除nginx的欢迎页面

groupadd www-data 
useradd -g www-data www-data -d /home/www-data
cd /home/www-data
mkdir wp_game_workdir
docker cp wp_tg_ct:/var/www/html  /home/www-data/wp_game_workdir/  -- 拷贝代码到宿主机
chown -R www-data:www-data /home/www-data

nginx配置: vim /etc/nginx/sites-enabled/default

nginx 复制代码

server {
    listen 80;
    server_name trilliongame.fun www.trilliongame.fun;
    root /var/www/html;
    # index index.php index.html;
    # autoindex on;
    # === 宿主机：优先放行静态文件（不再代理）
    location ~* \.(css|js|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$ {
        root /home/www-data/wp_game_workdir/html; # WordPress 映射目录（宿主机）
        expires 30d;
        add_header Cache-Control "public";
    }

    location / {
        #try_files $uri $uri/ =404;
        index index.php;
        try_files $uri $uri/ /index.php?$query_string;
        include mime.types;               # 引入 /etc/nginx/mime.types
        default_type application/octet-stream;
    }

    location ~ \.php$ {
        fastcgi_pass 127.0.0.1:3300;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

重启和日志

console 复制代码

tail -f -n 20 /var/log/nginx/error.log -- 查看nginx日志
nginx -s reload && systemctl restart nginx -- 重加载重启nginx