网站导航
> 技术文档 > LNMP架构+wordpress实现动静分离

LNMP架构+wordpress实现动静分离

网友: 技术文档 2025-08-08 00:39:37

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.rpmrpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm​# 执行下面的命令删除phpyum 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-fpmyum 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/wordpresscp wp-config-sample.php wp-config.phpvim 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;   ... # 其他配置保持不变}
网络标签：

相关问题