LNMP架构+wordpress实现动静分离

发布于：2025-07-29 ⋅ 阅读:(31) ⋅ 点赞:(0)

WordPress简称WP，最初是一款博客系统，后逐步演化成一款免费的CMS（内容管理系统/建站系统）。

WordPress网站的适用场景：

  • 博客

  • 企业官网

  • 作品集网站

  • 电商平台

  • 线上教育系统

  • 论坛和社群网站

  • 甚至会员系统、订阅内容平台……

1 环境说明

系统 安装软件 IP 服务角色
centos7 nginx+mysql数据库 192.168.42.28 代理服务器
centos7 nginx+wordpress（加载静态资源） 192.168.42.29 静态服务器
centos7 nginx+php+wordpress（加载动态资源） 192.168.42.30 动态服务器

软件安装略

2 代理服务器配置

vim wordpress.conf

upstream static {
   server 192.168.42.29:8080;
}
​
upstream dynamic {
   server 192.168.42.30:80;
}
​
server {
   listen 80;
   server_name 192.168.42.28;
​
   location / {
      proxy_pass http://dynamic;
      proxy_set_header Host $http_host;   # 保留原始请求的 Host 头
      proxy_set_header X-Real-IP $remote_addr;   # 传递客户端的真实 IP
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 添加客户端 IP 到代理链
      proxy_set_header X-Forwarded-Proto $scheme;   # 传递原始请求协议（http/https）
   }
​
    # 静态资源：WordPress 的 uploads、themes、plugins 目录
    location ~* ^.+\.(css|js|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$ {
      rewrite ^/wordpress(/.*)$ $1 break;  # 移除路径前缀
      proxy_pass http://static;  # ← WordPress根目录
      expires 30d;
      add_header Cache-Control "public, no-transform"; # 允许所有缓存（包括 CDN），禁止代理修改内容（如压缩图片）
      proxy_set_header Host $http_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-Proto $scheme;
​
      # 调试日志（生产环境可移除）
      access_log /var/log/nginx/static-access.log;
      error_log /var/log/nginx/static-error.log notice;
    }
}

改完重启nginx:

systemctl restart nginx

此节点需要安装mysql数据库，安装过程略。

数据库需要创建一个wordpress库，并创建一个wordpress用户用来给其他节点连接数据库，并赋予这个用户这个库的权限。

CREATE DATABASE wordpress;  # 创建一个新的数据库
CREATE USER 'wordpress'@'%' identified with mysql_native_password by 'Nebula@123'; # 创建一个新用户
GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpress'@'%';  # 赋予用户对 “wordpress” 数据库的全部权限。
FLUSH PRIVILEGES;

3 静态服务器配置

vim static.conf

server {
   listen 8080;
   server_name 192.168.42.29;
​
   # 添加wordpress路径层
   location /wordpress {
        alias /opt/wordpress;  # 使用alias精确匹配路径
        try_files $uri $uri/ =404; # 按顺序尝试访问文件或目录，如果都找不到，则返回404。
    }
​
   location ~* ^.+\.(css|js|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$ {
     root /opt/wordpress;
   }
}

改完重启nginx服务

systemctl restart nginx

4 动态服务器配置

wordpress版本跟php版本对应关系：

WordPress 版本 最低支持 PHP 版本 推荐 PHP 版本
4.x PHP 5.2.4 PHP 5.6 – 7.1
5.x PHP 5.6 PHP 7.0 – 7.4
6.0 – 6.2 PHP 5.6 PHP 7.4 – 8.2
6.3 – 6.5 PHP 7.0 PHP 7.4 – 8.3
6.6 – 6.8+ PHP 7.2 PHP 7.4 及以上

wordpress这里我选择5.x的版本，centos 7 默认的 php 版本为5.4，太多老旧，因此我们需要升级php

# 执行下面的命令升级软件仓库
rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-release.rpm
rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
​
# 执行下面的命令删除php
yum remove php-common
​
# 安装php 5.6版本(php56w-devel这个不是必需的)
yum install -y php56w php56w-opcache php56w-xml php56w-mcrypt php56w-gd php56w-devel php56w-mysql php56w-intl php56w-mbstring
​
# 如果是nginx ，则还需要安装 php56w-fpm
yum install php56w-fpm -y

启动php服务

systemctl restart php-fpm

下载wordpress

 wget https://cn.wordpress.org/wordpress-5.6.14-zh_CN.tar.gz

解压wordpress到nginx发布目录，并配置数据库连接

tar -zxvf wordpress-5.6.14-zh_CN.tar.gz -C /usr/share/nginx/html/
cd /usr/share/nginx/html/wordpress
cp wp-config-sample.php wp-config.php
vim wp-config.php

编辑wp-config.php文件23-32行关于数据库连接的相关信息，确保配置正确。

配置nginx访问fastcgi进行php解析

vim php.conf

server {
   listen 80;
   server_name 192.168.42.30;
​
   location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm index.php;
    }
​
    location ~ \.php$ {
        root           /usr/share/nginx/html;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

重启nginx服务

systemctl restart nginx

5 访问测试

浏览器访问“http://代理服务器IP地址/wordpress”进入安装向导。

这里我的代理服务器为192.168.42.28，因此地址为http://192.168.42.28/wordpress

设置站点标题、管理员账号、密码和邮箱，并单击“安装 WordPress”。

参数 说明
站点标题 WordPress网站名称。
用户名 WordPress管理员名称。
密码 可以使用默认的密码或者自定义密码。请勿重复使用现有密码，并确保将密码保存在安全的位置。
您的电子邮箱地址 接收通知的电子邮件地址。

安装完成后，弹出安装成功界面。

单击“登录”，或者浏览器访问“http://服务器IP地址/wordpress/wp-login.php”，输入用户名/电子邮箱地址和密码后单击“登录”，进入WordPress。

登录成功后进入主界面，就可以愉快玩耍了。

 

6 过程中问题解决

6.1 问题现象和旧配置

原来旧的配置，在做的过程中，遇到无法加载页面样式，导致静态页面访问都是404（浏览器F12打开查看有很多静态资源404）。

# 代理服务器配置
upstream static {
   server 192.168.42.29:8080;
}
​
upstream dynamic {
   server 192.168.42.30:80;
}
​
server {
   listen 80;
   server_name 192.168.42.28;
​
   location / {
      proxy_pass http://dynamic;
      proxy_set_header Host $http_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-Proto $scheme;
   }
​
   # 静态资源：WordPress 的 uploads、themes、plugins 目录
   location ~* ^.+\.(css|js|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$ {
        proxy_pass http://static;  # ← WordPress根目录
        expires 30d;
        add_header Cache-Control "public, no-transform";
        try_files $uri =404;
      proxy_set_header Host $http_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-Proto $scheme;
    }
}
# 静态服务器配置为
server {
   listen 8080;
   server_name 192.168.42.29;
​
   location / {
     root /opt/wordpress;
     index index.php;
   }
​
   location ~* ^.+\.(css|js|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$ {
     root /opt/wordpress;
   }
​
}

6.2 问题分析

分析可能的原因：

  1. 静态资源的路径问题：当我们访问http://192.168.42.28/wordpress/时，页面会加载一些静态资源，比如CSS文件。这些静态资源的URL路径可能是以/wordpress/开头的。但是我们的静态服务器配置中，root是/opt/wordpress，那么静态服务器期望的路径是/opt/wordpress下的文件。然而，当我们请求一个CSS文件时，例如http://192.168.42.28/wordpress/wp-content/themes/style.css，代理服务器会将其代理到静态服务器的/wordpress/wp-content/themes/style.css路径，而静态服务器会在/opt/wordpress/wordpress/wp-content/themes/style.css路径下寻找文件，这显然是不正确的，因为我们的wordpress文件应该直接位于/opt/wordpress下，而不是还有一级wordpress目录。

  2. 另外，动态服务器上，root是/usr/share/nginx/html，那么WordPress程序应该放在该目录下。同样，如果我们将WordPress放在/usr/share/nginx/html/wordpress目录下，那么访问路径应该是http://192.168.42.28/wordpress/，这样动态服务器需要能够正确解析到/usr/share/nginx/html/wordpress目录下的文件。

  3. 静态服务器的配置中，我们设置了两个location块，但是都没有处理/wordpress/路径下的静态文件。静态服务器的root设置为/opt/wordpress，那么当请求/css/style.css时，它会去/opt/wordpress/css/style.css找。但是我们的请求是/wordpress/wp-content/...，所以静态服务器需要知道文件在/opt/wordpress/wordpress/wp-content/...？这显然不对。

总结原因：

  1. 路径不匹配：

    • 访问URL：http://192.168.42.28/wordpress/

    • WordPress生成的静态资源URL路径为：/wordpress/wp-content/themes/.../style.css

    • 静态服务器(192.168.42.29)的root目录是/opt/wordpress，它期望的请求路径是/wp-content/...（无/wordpress前缀）

    • 实际请求路径包含/wordpress前缀，导致静态服务器在/opt/wordpress/wordpress/...路径下查找文件（路径错误）

  2. 配置缺陷：

    • 代理服务器的静态location直接转发原始URI（含/wordpress前缀）到静态服务器

    • 静态服务器未处理/wordpress路径前缀

6.3 解决方案

修改静态服务器配置

在静态服务器的Nginx配置中添加/wordpress路径解析：

server {
    listen 8080;
    server_name 192.168.42.29;
​
    # 关键修改：添加wordpress路径层
    location /wordpress {
        alias /opt/wordpress;  # 使用alias精确匹配路径,将请求中的/wordpress映射到物理路径/opt/wordpress
        try_files $uri $uri/ =404;
    }
​
    location ~* ^.+\.(css|js|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$ {
        root /opt/wordpress;
    }
}

修改代理服务器配置

在代理服务器的静态location中重写URI路径：

location ~* ^.+\.(css|js|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$ {
    # 关键修改：移除URI中的/wordpress前缀
    rewrite ^/wordpress(/.*)$ $1 break;  # rewrite规则将/wordpress/wp-content/...重写为/wp-content/...
    proxy_pass http://static;
    ... # 其他配置保持不变
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布