手动部署LNMP环境（Ubuntu）

LNMP分别代表Linux、Nginx、MySQL和PHP。安装步骤见文章

本文章仅用作记录，只描述了大概流程，非正经教程。
毫无经验的小伙伴或者想搭建博客的都不建议浪费时间的往下看了，标签页右边的×可以点一下了，

准备工作一创建一个数据库

进入数据库创建一个数据库用来存储WordPress的数据。

登录 MySQL

sudo mysql -uroot -p

创建数据库，在这里，database_name 是您想要创建的数据库名称。

CREATE DATABASE database_name;

# 例如，创建一个名为 wp_blog 的数据库
CREATE DATABASE wp_blog;

创建后也可以使用 SHOW DATABASES; 查看数据库，这将列出所有可用的数据库。

# 创建数据库
mysql> CREATE DATABASE wp_blog;
Query OK, 1 row affected (0.01 sec)

# 查看数据库
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| wp_blog            |
+--------------------+
5 rows in set (0.00 sec)

mysql>

准备工作一配置SSL 证书

申请一个ssl 证书，就可以使用https 协议访问网站。

免费证书腾讯云或者阿里云以及其他地方都有提供申请渠道，申请过程略过。

然后把以.key .pem两个后缀结尾的文字上传到服务器的目录下，什么路径都行，本教程使用的路径是 /etc/nginx/，然后打开修改 nginx 配置文件/etc/nginx/conf.d/default.conf

server {
  listen 443 ssl http2; #监听443端口，用于处理加密的HTTPS请求，并启用HTTP/2协议。

  # 引入证书文件开始
  ssl_certificate   /etc/nginx/xm.moshanghua.net.pem; #指定SSL证书文件路径。
  ssl_certificate_key  /etc/nginx/xm.moshanghua.net.key; # 指定SSL证书密钥文件路径。
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1;
  ssl_prefer_server_ciphers on;
  # 引入证书文件结束 
}

再定义一个服务器块，将所有HTTP请求重定向到HTTPS。

server {
  listen 80;
  server_name xm.moshanghua.net ;
  rewrite ^/(.*) https://xm.moshanghua.net/$1 permanent;
}

完整的配置:

server {
  listen 80; # 监听80端口，用于处理未加密的HTTP请求。
  listen 443 ssl http2; # 监听443端口，用于处理加密的HTTPS请求，并启用HTTP/2协议。
  server_name localhost;
  root /usr/share/nginx/html/wpblog; # 设置Web服务器的根目录。

  location / {
    index index.php index.html index.htm; # 设置默认的索引文件。
    # 尝试直接访问请求的文件或目录，如果找不到，则重定向到index.php。
    try_files $uri $uri/ /index.php?q=$uri&$args;
  }

  # 配置PHP请求的处理
  location ~ \.php$ {
    # 尝试直接访问请求的PHP文件，如果文件不存在，则返回404错误
    try_files $uri =404;
    include fastcgi_params; # 包含FastCGI参数文件
    fastcgi_pass 127.0.0.1:9000; # 设置FastCGI服务器地址和端口
    # 设置FastCGI脚本文件路径
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  }

  # SSL基础配置
  # 引入证书文件开始
  # 指定SSL证书文件路径，.pem前面一串字符改为自己的，路径也确认一下
  ssl_certificate   /etc/nginx/xm.moshanghua.net.pem;
  # 指定SSL证书密钥文件路径，.key前面一串字符改为自己的，路径也确认一下
  ssl_certificate_key  /etc/nginx/xm.moshanghua.net.key;
  # 设置SSL会话超时时间为5分钟
  ssl_session_timeout 5m;
  # 指定允许的SSL加密算法
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  # 指定允许的SSL协议版本
  ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1;
  # 设置服务器加密算法优先
  ssl_prefer_server_ciphers on;
  # 引入证书文件结束
}

server {
  # 监听80端口，即HTTP请求的默认端口
  listen 80;
  # 指定了服务器的名称，nginx配置里多站点时建议指向一下具体的域名请求
  # 这里配置为xm.moshanghua.net，意味着它将响应所有指向该域名的请求。
  server_name xm.moshanghua.net ;
  # 这是一条rewrite规则，它将所有请求重定向到HTTPS
  # permanent标志表示这是一个永久重定向，HTTP状态码为301
  rewrite ^/(.*) https://xm.moshanghua.net/$1 permanent;
}

修改Nginx配置后，重启一下：sudo systemctl restart nginx

准备工作一源码相关

建议直接 clone 一份源码在本地，修改之后先上传到自己的GitHub仓库，再推到服务器。

这样做方便后续主题更新，可以在本地先改好，能正常运行跑一下流程，确认没问题了再拉取更新，不然直接拉取的话，安装依赖出点问题线上环境也就打不开了。

（本文章本部部分略过，线上直接跑项目）

源码地址：https://github.com/D-xuanmo/Nuxtjs-Wordpress

准备工作一端口放行

务器配置放行端口 3000，3002

下面介绍如何在Ubuntu 22.04搭建wordpress 以及部署主题Nuxtjs + WordPress。

安装 WordPress

首先进入网站根目录，不一定是非得在 /usr/share/nginx/html 目录下，也可以自己接着套文件夹或者另起文件夹，记得去Nginx 配置里同步修改。
本文演示目录为 /usr/share/nginx/html/wpblog

cd /usr/share/nginx/html/wpblog

使用wget 下载WordPress 程序，此链接默认下载最新版本

wget https://cn.wordpress.org/latest-zh_CN.zip

如果不要最新版，也可以前往https://cn.wordpress.org/download/releases/ ，这是为 WordPress 提供的每个记录版本的归档。

下载好后就解压文件

# 新环境，如果没有 unzip 解压工具可以安装一下
sudo apt install unzip

# unzip 命令解压
unzip latest-zh_CN.zip

解压后，文件默认是一起放在 wordpress 目录下，如果不是以此目录作为根目录，就用 mv 命令移动一下，演示的根目录是 /usr/share/nginx/html/wpblog

# 将 wordpress 目录下的所有文件和文件夹移动到 /usr/share/nginx/html/wpblog 目录下
mv wordpress/* /usr/share/nginx/html/wpblog

然后就可以访问解析的域名进行程序引导安装了，点击现在就开始。

数据库名填写前面用命令创建的wp_blog，用户名为MySQL的用户名root,密码为MySQL的登录密码，数据库主机不用改，表前缀改不改都行。

然后提交。

如果出现以下界面，权限不够，无法写入。
您可以使用 chmod 命令来设置权限

# 设置权限
sudo chmod 755 /usr/share/nginx/html/wpblog

# 设置所有者
sudo chown www-data:www-data /usr/share/nginx/html/wpblog

点击运行安装程序就能下一步了。

来到这一步，站点标题和邮箱地址后面都是可以改的，无所谓怎么写。

用户名和密码要认真填写并记住，等下登录后台要用的。

用户名可以自定义字符

点击安装WordPress，就可以看到安装成功的页面。

到这里，WordPress就安装完成了。

输入 https://域名/wp-login.php 就可以访问博客后台了。

设置里可以设置博客的配置，略过.

主题部署

所需环境准备

Nodejs 版本推荐 16.10.x或往上，低于16.10.x会报错模块不兼容。

安装 Nodejs 环境

需要在服务器安装 node 环境，需要大于 16.10.0。

本文章 node 版本为16.17.0，使用 wget 命令下载 Node.js 安装包，文件可以放在 root 目录，具体随意。本文档存放目录为 root目录

该方式使用的安装包是已编译好的二进制文件。解压文件之后，在bin文件夹中就已存在node和npm，无需重复编译。

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

# 将当前目录更改到根目录
cd ~

# 显示当前工作目录的绝对路径
pwd
/root

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

该安装包是编译好的文件，解压之后，在 bin 文件夹中就已存在 node 和 npm，无需重复编译。

解压文件 tar xvf node-v16.17.0-linux-x64.tar.xz

创建软链接，使 node 和 npm 命令全局有效。通过创建软链接的方法，使得在任意目录下都可以直接使用 node 和 npm 命令。

语法：

在执行这个命令之前，需要确保有足够的权限来在 /usr/local/bin 目录下创建链接。如果当前登录的用户账户没有足够的权限，可能需要使用 sudo 来执行这个命令

注：如果在下载Node.js 安装包时，不是在 **/root**目录下，那创建软链接时的源文件路径也要做相应更改

ln -s /root/node-v16.17.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v16.17.0-linux-x64/bin/npm /usr/local/bin/npm

到此已经安装完成，使用 node -v 查看 node 版本，使用 npm -v 查看版本号，如果出现正确版本号则安装成功。

使用 npm 安装其他的全局命令

npm i -g yarn pm2 这条命令是全局安装 yarn 和 pm2。

如果安装比较慢，可以使用淘宝镜像安装，npm i -g yarn pm2 --registry=https://registry.npmmirror.com，后续的安装都可以加上这个。

如果执行了这一步操作，提示 Command 'yarn' not found 或者 Command 'pm2' not found ，可以使用下边两条命令：

ln -s /root/node-v16.17.0-linux-x64/bin/yarn /usr/local/bin/yarn
ln -s /root/node-v16.17.0-linux-x64/bin/pm2 /usr/local/bin/pm2

以上命令和前面一样的效果，创建一个名为 /usr/local/bin/yarn 的符号链接，它指向 /root/node-v16.17.0-linux-x64/bin/yarn。

这样做的目的是为了方便在任意目录下都能通过 yarn 命令来运行 /root/node-v16.17.0-linux-x64/bin/yarn 这个Yarn的包管理器，而无需每次都输入完整的路径。

完整步骤演示：

# 将当前目录更改到根目录
cd ~

# 显示当前工作目录的绝对路径
pwd
/root

# 下载指定版本nodejs
wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

# 解压文件
tar xvf node-v16.17.0-linux-x64.tar.xz

# 创建软链接，使 node 和 npm 命令全局有效
ln -s /root/node-v16.17.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v16.17.0-linux-x64/bin/npm /usr/local/bin/npm

# 全局安装 yarn 和 pm2
npm i -g yarn pm2 --registry=https://registry.npmmirror.com

#创建软链接，使 yarn 和 pm2 命令全局有效
ln -s /root/node-v16.17.0-linux-x64/bin/yarn /usr/local/bin/yarn
ln -s /root/node-v16.17.0-linux-x64/bin/pm2 /usr/local/bin/pm2

运行项目

下载主题到网站根目录

cd /usr/share/nginx/html/wpblog

# 下载源码
wget https://github.com/D-xuanmo/Nuxtjs-Wordpress/archive/refs/heads/master.zip

#解压文件
unzip master.zip

将源码目录下的 service 放入 WordPress 主题目录 wp-content/theme/ 下，并启用此主题

# 进入源码目录
cd Nuxtjs-Wordpress-master/

# 复制目录到主题目录下
cp -r service/ /usr/share/nginx/html/wpblog/wp-content/themes/

# ls命令确认下文件
ls /usr/share/nginx/html/wpblog/wp-content/themes/

进入 Nuxtjs主题设置 ，启用本主题之后，会在外观菜单下加入一个子菜单，将站点前端域名设置为 WordPress 访问地址，确保 http://{domain}/wp-json 能有正确的数据，所有 WordPress 接口都是在这个虚拟目录下；如果访问报错可以尝试在 后台设置=>固定链接 设置为数字型；

访问地址，确保 http://{domain}/wp-json 能有正确的数据。https://xm.moshanghua.net/wp-json

打开目录下Nuxtjs-Wordpress-master/nuxt.config.js文件，修改项目的一些配置，改为自己的信息，如下截图，这一步不是必选的，可以安装完成之后在修改

改完之后再继续往下翻到最后，将下图2个地址改为自己的域名

确认此时是在Nuxtjs-Wordpress-master这个目录，执行 yarn 命令，这一步是安装项目所需要的依赖文件。（warning信息无视就好）

如果比较慢可以使用这个命令 yarn --registry=https://registry.npmmirror.com；

依赖安装完成之后，执行 yarn dev，如果能出现以下截图代表能够正常运行项目。

到这里，访问上还是有问题，可以先跳到下面的Nginx 反向代理部分，把配置设置好。

遇到的问题：

但这会通过自己的域名或者 IP 访问 3000 端口还是无响应状态。

在Nginx配置文件里的根目录的请求处理配置部分加入proxy_pass http://127.0.0.1:3000后，

  location / {
    # 这里是每次访问域名将请求转发到3000端口
    proxy_pass http://127.0.0.1:3000;
  }

这下能通过主域名https://xm.moshanghua.net 访问到部分数据，大部分文件请求还是失败的

使用 Nginx 反向代理

需要的是用 80 或者 443 去访问，所以需要用 nginx 做代理，

Tips: 先到数据库找到WordPress的表 wp_options ，修改 siteurl 和 home 字段，值改为 http://{你的域名}:3002 端口，因为后续WordPress只会作为一个CMS管理系统

登录数据库，切换到WordPress数据库的表 wp_options ，修改 siteurl 和 home 字段

登录和切换数据库

#登录
mysql -u username -p

# 选择数据库，database_name 是想要选择的数据库名称
USE database_name;

# 列出数据库中的所有表
SHOW TABLES;

修改 siteurl 和 home 字段。

使用 UPDATE 语句来修改 wp_options 表中 option_name 字段下 home 的内容

以下是一个示例 SQL 语句，用于将 home 的内容修改为 http://xm.moshanghua.net:3002：

# 修改 home 字段
UPDATE wp_options
SET option_value = 'http://xm.moshanghua.net:3002'
WHERE option_name = 'home';

# 修改 siteurl 字段
UPDATE wp_options
SET option_value = 'http://xm.moshanghua.net:3002'
WHERE option_name = 'siteurl';

完整演示：

mysql> SHOW DATABASES;

mysql> USE wp_blog;

mysql> SHOW TABLES;

mysql> DESCRIBE wp_options;

mysql> SELECT option_value FROM wp_options WHERE option_name = 'home';
+---------------------------+
| option_value              |
+---------------------------+
| https://xm.moshanghua.net |
+---------------------------+
1 row in set (0.00 sec)

mysql> SELECT option_value FROM wp_options WHERE option_name = 'siteurl';

mysql> UPDATE wp_options SET option_value = 'http://xm.moshanghua.net:3002' WHERE option_name = 'home';

mysql> UPDATE wp_options SET option_value = 'http://xm.moshanghua.net:3002' WHERE option_name = 'siteurl';

mysql> SELECT option_value FROM wp_options WHERE option_name = 'home';
+-------------------------------+
| option_value                  |
+-------------------------------+
| http://xm.moshanghua.net:3002 |
+-------------------------------+
1 row in set (0.00 sec)

mysql> SELECT option_value FROM wp_options WHERE option_name = 'siteurl';

mysql>

数据库字段修改完后，就再配置下规则：

以下是我的配置文件说明，这一步更多配置需要自己了解一下 nginx 配置：

配置分为两段

第一段，设置了一个监听3002端口的虚拟服务器，专门用于服务WordPress应用程序，用于代替之前的 WordPress 访问端口

# wordpress
server {
  # 这告诉Nginx监听3002端口，并将这个服务器块设置为默认服务器
  # 这意味着如果请求没有指定服务器块，将会由这个服务器块处理
  listen 3002 default_server;
  server_name xm.moshanghua.net;
  root   /usr/share/nginx/html/wpblog;

  location / {
    index index.php index.html index.htm;
    try_files $uri $uri/ /index.php?q=$uri&$args;
  }

  location ~ \.php$ {
    try_files $uri =404;
    include fastcgi_params;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  }
}

第二段，设置一个服务器块，它同时监听80和443端口去代理 Nuxt 服务。

server {
  listen 80;
  # 听443端口，用于处理加密的HTTPS请求，并启用HTTP/2协议
  listen 443 ssl http2;
  server_name xm.moshanghua.net;
  root   /usr/share/nginx/html/wpblog;

  # 引入证书文件开始
  ssl_certificate   /etc/nginx/xxx.pem; # 指定SSL证书文件路径
  ssl_certificate_key  /etc/nginx/xxx.key; # 指定SSL证书密钥文件路径
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1;
  ssl_prefer_server_ciphers on;

  location / {
    # 这里是每次访问域名将请求转发到3000端口
    proxy_pass http://127.0.0.1:3000;
  }

  # 下边两个是代理wordpress的一些服务
  # 配置对/wp-json路径的请求处理
  location /wp-json {
    # 将对/wp-json的请求代理到本地的3002端口
    proxy_pass http://127.0.0.1:3002/wp-json;
  }
  # 配置对/wp-content路径的请求处理
  location /wp-content {
    # 将对/wp-content的请求代理到本地的3002端口
    proxy_pass http://127.0.0.1:3002/wp-content;
  }
}

完整的配置：

# wordpress
server {
  listen 3002 default_server;
  server_name xm.moshanghua.net;
  root   /usr/share/nginx/html/wpblog;

  location / {
    index index.php index.html index.htm;
    try_files $uri $uri/ /index.php?q=$uri&$args;
  }

  location ~ \.php$ {
    try_files $uri =404;
    include fastcgi_params;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  }
}

server {
  listen 80;
  server_name xm.moshanghua.net ;
  rewrite ^/(.*) https://xm.moshanghua.net/$1 permanent;
}

server {
  listen 80;
  listen 443 ssl http2;
  server_name xm.moshanghua.net;
  root   /usr/share/nginx/html/wpblog;

  ssl_certificate   /etc/nginx/xm.moshanghua.net.pem;
  ssl_certificate_key  /etc/nginx/xm.moshanghua.net.key;
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1;
  ssl_prefer_server_ciphers on;

  location / {
    proxy_pass http://127.0.0.1:3000;
  }

  # 下边两个是代理wordpress的一些服务
  location /wp-json {
    proxy_pass http://127.0.0.1:3002/wp-json;
  }

  location /wp-content {
    proxy_pass http://127.0.0.1:3002/wp-content;
  }
}

如果成功配置就到这里结束了。

sudo nginx -t测试一下配置，然后重启sudo systemctl restart nginx

再次运行项目

执行 yarn dev，如果能出现以下截图代表能够正常运行项目，

然后用自己的域名访问，如果能够正常访问按ctrl+c 退出即可；

使用 yarn pm2 这条命令去运行项目并开启文件更改自动重载项目，pm2 是 Nodejs 的一个守护进程，使用 pm2 logs 可查看日志。

使用 pm2 save 保存当前的应用列表，使用 pm2 startup 开机自动启动

运行项目完整流程：

 # 安装项目所需要的依赖文件
 yarn --registry=https://registry.npmmirror.com

 # 运行开发环境下的脚本
 yarn dev

 # 运行项目
 yarn pm2

 # 查看运行日志
 pm2 logs

 # 保存当前的应用列表
 pm2 save

 # 开机自动启动
 pm2 startup

至此通过域名https://xm.moshanghua.net/就能正常访问了

博客后台xm.moshanghua.net:3002/admin

博客后台如果不想带端口去访问，也可以NGINX配置下的WordPress一个服务器块里修改下规则反代到指定域名，也可以顺便加上 SSL，走HTTPS访问。

主题设置

Nuxtjs + WordPress主题使用说明请访问https://xuanmo.xin/details/2987

已有 9 条评论

悦来集团

April 19th, 2024 at 09:29 pm

您好，这边有打算合并到悦来集团吗？

回复
1. 陌上花
  
  April 20th, 2024 at 09:50 pm
  
  啊？我合并我自己吗，你是谁，想冒充[bishi]
  
  回复
q2019715

May 9th, 2024 at 03:09 pm

看着评论区在线吃瓜中

回复
1. 陌上花
  
  May 14th, 2024 at 10:26 am
  
  慎重啊，吃瓜需谨慎[wangwang]
  
  回复
jiyouzhan

May 17th, 2024 at 06:32 pm

这篇文章写得深入浅出，让我这个小白也看懂了！

回复
1. 陌上花
  
  May 18th, 2024 at 12:05 am
  
  真的假的，要不是你留的网站类型帮我判定你是来刷存在感的，我就信你了[doge1]
  
  回复
天天下载软件站

June 23rd, 2024 at 01:04 am

感谢分享

回复
1. 陌上花
  
  June 30th, 2024 at 10:01 pm
  
  客气了[cangsang]
  
  回复
Edith Jennings

July 2nd, 2024 at 11:09 pm

Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, as well as the content!

回复

Ubuntu22.04上搭建 WordPress 以及部署主题 Nuxtjs + WordPress 流程

手动部署LNMP环境（Ubuntu）

准备工作一创建一个数据库

准备工作一配置SSL 证书

准备工作一源码相关

准备工作一端口放行

安装 WordPress

主题部署

所需环境准备

安装 Nodejs 环境

使用 npm 安装其他的全局命令

运行项目

使用 Nginx 反向代理

再次运行项目

主题设置

已有 9 条评论

添加新评论

最新文章

最近回复

分类

归档

其它

Ubuntu22.04上搭建 WordPress 以及部署主题 Nuxtjs + WordPress 流程

手动部署LNMP环境（Ubuntu）

准备工作 一 创建一个数据库

准备工作 一 配置SSL 证书

准备工作 一 源码相关

准备工作 一 端口放行

安装 WordPress

主题部署

所需环境准备

安装 Nodejs 环境

使用 npm 安装其他的全局命令

运行项目

使用 Nginx 反向代理

再次运行项目

主题设置

已有 9 条评论

添加新评论

最新文章

最近回复

分类

归档

其它

准备工作一创建一个数据库

准备工作一配置SSL 证书

准备工作一源码相关

准备工作一端口放行