陌上花开

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

2024/4/19 15:08:21admin0 阅读9 评论
#wordpress #Node #Ubuntu22.04 #Nuxtjs

<h1>手动部署LNMP环境（Ubuntu）</h1>
<p>LNMP分别代表Linux、Nginx、MySQL和PHP。安装步骤见文章</p>
<p><strong>本文章仅用作记录，只描述了大概流程，非正经教程。</strong>
<strong>毫无经验的小伙伴或者想搭建博客的都不建议浪费时间的往下看了</strong>，标签页右边的×可以点一下了，</p>
<h3>准备工作 一 创建一个数据库</h3>
<p>进入数据库创建一个数据库用来存储WordPress的数据。</p>
<p><strong>登录 MySQL</strong></p>
<pre><code class=“language-Bash”>sudo mysql -uroot -p</code></pre>
<p><strong>创建数据库</strong>，在这里，<code>database_name</code> 是您想要创建的数据库名称。</p>
<pre><code class=“language-Bash”>CREATE DATABASE database_name;

例如，创建一个名为 wp_blog 的数据库

CREATE DATABASE wp_blog;
</code></pre>
<p>创建后也可以使用 <code>SHOW DATABASES</code>; 查看数据库，这将列出所有可用的数据库。</p>
<pre><code class=“language-Bash”># 创建数据库
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></code></pre>
<h3>准备工作 一 配置SSL 证书</h3>
<p>申请一个ssl 证书，就可以使用https 协议访问网站。</p>
<p>免费证书腾讯云或者阿里云以及其他地方都有提供申请渠道，申请过程略过。</p>
<p>然后把以<code>.key</code> <code>.pem</code>两个后缀结尾的文字上传到服务器的目录下，什么路径都行，本教程使用的路径是 <code>/etc/nginx/</code>，然后打开修改 nginx 配置文件<code>/etc/nginx/conf.d/default.conf</code></p>
<pre><code class=“language-Bash”>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;

引入证书文件结束

}</code></pre>
<p>再定义一个服务器块，将所有HTTP请求重定向到HTTPS。</p>
<pre><code class=“language-Bash”>server {
listen 80;
server_name xm.moshanghua.net ;
rewrite ^/(.*) https://xm.moshanghua.net/$1 permanent;
}</code></pre>
<p>完整的配置:</p>
<pre><code class=“language-Bash”>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 documentrootdocument_rootfastcgi_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;
}</code></pre>
<p>修改Nginx配置后，重启一下：<code>sudo systemctl restart nginx</code></p>
<h3>准备工作 一 源码相关</h3>
<p>建议直接 clone 一份源码在本地，修改之后先上传到自己的GitHub仓库，再推到服务器。</p>
<p>这样做方便后续主题更新，可以在本地先改好，能正常运行跑一下流程，确认没问题了再拉取更新，不然直接拉取的话，安装依赖出点问题线上环境也就打不开了。</p>
<p>（本文章本部部分略过，线上直接跑项目）</p>
<p>源码地址：<a href=“https://github.com/D-xuanmo/Nuxtjs-Wordpress”>https://github.com/D-xuanmo/Nuxtjs-Wordpress</a></p>
<h2>准备工作 一 端口放行</h2>
<p>务器配置放行端口 <code>3000</code>，<code>3002</code></p>
<p>下面介绍如何在Ubuntu 22.04搭建wordpress 以及部署主题Nuxtjs + WordPress。</p>
<h2>安装 WordPress</h2>
<p>首先进入网站根目录，不一定是非得在 /usr/share/nginx/html 目录下，也可以自己接着套文件夹或者另起文件夹，记得去Nginx 配置里同步修改。
本文演示目录为 <code>/usr/share/nginx/html/wpblog</code></p>
<pre><code class=“language-Bash”>cd /usr/share/nginx/html/wpblog</code></pre>
<p>使用wget 下载WordPress 程序，此链接默认下载最新版本</p>
<pre><code class=“language-Bash”>wget https://cn.wordpress.org/latest-zh_CN.zip</code></pre>
<p>如果不要最新版，也可以前往<a href=“https://cn.wordpress.org/download/releases/”>https://cn.wordpress.org/download/releases/</a> ，这是为 WordPress 提供的每个记录版本的归档。</p>
<p>下载好后就解压文件</p>
<pre><code class=“language-Bash”># 新环境，如果没有 unzip 解压工具可以安装一下
sudo apt install unzip

unzip 命令解压

unzip latest-zh_CN.zip
</code></pre>
<p>解压后，文件默认是一起放在 wordpress 目录下，如果不是以此目录作为根目录，就用 mv 命令移动一下，演示的根目录是 <code>/usr/share/nginx/html/wpblog</code></p>
<pre><code class=“language-Bash”># 将 wordpress 目录下的所有文件和文件夹移动到 /usr/share/nginx/html/wpblog 目录下
mv wordpress/* /usr/share/nginx/html/wpblog</code></pre>
<p>然后就可以访问解析的域名进行程序引导安装了，点击现在就开始。</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-01.png” alt=“” /></p>
<p>数据库名填写前面用命令创建的<code>wp_blog</code>，用户名为MySQL的用户名<code>root</code>,密码为MySQL的登录密码，数据库主机不用改，表前缀改不改都行。</p>
<p>然后提交。
<img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-02.png” alt=“” /></p>
<p>如果出现以下界面，权限不够，无法写入。
您可以使用 chmod 命令来设置权限</p>
<pre><code class=“language-bash”># 设置权限
sudo chmod 755 /usr/share/nginx/html/wpblog

设置所有者

sudo chown www-data:www-data /usr/share/nginx/html/wpblog</code></pre>
<p>点击运行安装程序就能下一步了。</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-03.png” alt=“” /></p>
<p>来到这一步，站点标题和邮箱地址后面都是可以改的，无所谓怎么写。</p>
<p>用户名和密码要认真填写并记住，等下登录后台要用的。</p>
<p>用户名可以自定义字符</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-04.png” alt=“” /></p>
<p>点击安装WordPress，就可以看到安装成功的页面。</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-05.png” alt=“” /></p>
<p>到这里，WordPress就安装完成了。</p>
<p>输入 <a href=“https://域名/wp-login.php”>https://域名/wp-login.php</a> 就可以访问博客后台了。</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-06.png” alt=“” /></p>
<p>设置里可以设置博客的配置，略过.</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-07.png” alt=“” /></p>
<h2>主题部署</h2>
<h3>所需环境准备</h3>
<p>Nodejs 版本推荐 16.10.x或往上，低于16.10.x会报错模块不兼容。</p>
<h3>安装 Nodejs 环境</h3>
<p>需要在服务器安装 node 环境，需要大于 16.10.0。</p>
<p>本文章 node 版本为<code>16.17.0</code>，使用 wget 命令下载 Node.js 安装包，文件可以放在 <code>root</code> 目录，具体随意。本文档存放目录为 <code>root</code>目录</p>
<p>该方式使用的安装包是已编译好的二进制文件。解压文件之后，在bin文件夹中就已存在node和npm，无需重复编译。</p>
<p><code>wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz</code></p>
<pre><code class=“language-Bash”># 将当前目录更改到根目录
cd ~

显示当前工作目录的绝对路径

pwd
/root

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz
</code></pre>
<p>该安装包是编译好的文件，解压之后，在 bin 文件夹中就已存在 node 和 npm，无需重复编译。</p>
<p>解压文件 <code>tar xvf node-v16.17.0-linux-x64.tar.xz</code></p>
<p>创建软链接，使 node 和 npm 命令全局有效。通过创建软链接的方法，使得在任意目录下都可以直接使用 node 和 npm 命令。</p>
<p>语法：</p>
<p>在执行这个命令之前，需要确保有足够的权限来在 <code>/usr/local/bin</code> 目录下创建链接。如果当前登录的用户账户没有足够的权限，可能需要使用 <code>sudo</code> 来执行这个命令</p>
<p><strong>注：如果在下载Node.js 安装包时，不是在 **</strong><code>/root</code><strong>**目录下，那创建软链接时的源文件路径也要做相应更改</strong></p>
<pre><code class=“language-Bash”>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</code></pre>
<p>到此已经安装完成，使用 <code>node -v</code> 查看 node 版本，使用 <code>npm -v</code> 查看版本号，如果出现正确版本号则安装成功。</p>
<h3>使用 npm 安装其他的全局命令</h3>
<p><code>npm i -g yarn pm2</code> 这条命令是全局安装 yarn 和 pm2。</p>
<p>如果安装比较慢，可以使用淘宝镜像安装，<code>npm i -g yarn pm2 --registry=https://registry.npmmirror.com</code>，后续的安装都可以加上这个。</p>
<p>如果执行了这一步操作，提示 <code>Command 'yarn' not found</code> 或者 <code>Command 'pm2' not found</code> ，可以使用下边两条命令：</p>
<pre><code class=“language-Bash”>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</code></pre>
<p>以上命令和前面一样的效果，创建一个名为 <code>/usr/local/bin/yarn</code> 的符号链接，它指向 <code>/root/node-v16.17.0-linux-x64/bin/yarn</code>。</p>
<p>这样做的目的是为了方便在任意目录下都能通过 <code>yarn</code> 命令来运行 <code>/root/node-v16.17.0-linux-x64/bin/yarn</code> 这个Yarn的包管理器，而无需每次都输入完整的路径。</p>
<p>完整步骤演示：</p>
<pre><code class=“language-Bash”># 将当前目录更改到根目录
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
</code></pre>
<h3>运行项目</h3>
<p>下载主题到网站根目录</p>
<pre><code class=“language-Bash”>cd /usr/share/nginx/html/wpblog

下载源码

wget https://github.com/D-xuanmo/Nuxtjs-Wordpress/archive/refs/heads/master.zip

#解压文件
unzip master.zip
</code></pre>
<p>将源码目录下的 service 放入 WordPress 主题目录 wp-content/theme/ 下，并启用此主题</p>
<pre><code class=“language-Bash”># 进入源码目录
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/
</code></pre>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-08.png” alt=“” /></p>
<p>进入 <code>Nuxtjs主题设置</code> ，启用本主题之后，会在外观菜单下加入一个子菜单，将站点前端域名设置为 WordPress 访问地址，确保 <code>http://{domain}/wp-json</code> 能有正确的数据，所有 WordPress 接口都是在这个虚拟目录下；如果访问报错可以尝试在 <code>后台设置=>固定链接</code> 设置为数字型；</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-09.png” alt=“” /></p>
<p>访问地址，确保 <a href=“http://{domain}/wp-json”>http://{domain}/wp-json</a> 能有正确的数据。<a href=“https://xm.moshanghua.net/wp-json”>https://xm.moshanghua.net/wp-json</a></p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-10.png” alt=“” /></p>
<p>打开目录下<code>Nuxtjs-Wordpress-master/nuxt.config.js</code>文件，修改项目的一些配置，改为自己的信息，如下截图，这一步不是必选的，可以安装完成之后在修改</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-11.png” alt=“” /></p>
<p>改完之后再继续往下翻到最后，将下图2个地址改为自己的域名</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-12.png” alt=“” /></p>
<p>确认此时是在Nuxtjs-Wordpress-master这个目录，执行 <code>yarn</code> 命令，这一步是安装项目所需要的依赖文件。（warning信息无视就好）</p>
<p>如果比较慢可以使用这个命令 <code>yarn --registry=https://registry.npmmirror.com</code>；</p>
<p>依赖安装完成之后，执行 <code>yarn dev</code>，如果能出现以下截图代表能够正常运行项目。</p>
<p><strong>到这里，访问上还是有问题，可以先跳到下面的Nginx 反向代理部分，把配置设置好。</strong></p>
<p>遇到的问题：</p>
<p>但这会通过自己的域名或者 IP 访问 3000 端口还是无响应状态。</p>
<p>在Nginx配置文件里的根目录的请求处理配置部分加入proxy_pass <a href=“http://127.0.0.1:3000”>http://127.0.0.1:3000</a>后，</p>
<pre><code class=“language-Bash”> location / {
# 这里是每次访问域名将请求转发到3000端口
proxy_pass http://127.0.0.1:3000;
}</code></pre>
<p>这下能通过主域名<a href=“https://xm.moshanghua.net/”>https://xm.moshanghua.net</a> 访问到部分数据，大部分文件请求还是失败的</p>
<h2>使用 Nginx 反向代理</h2>
<p>需要的是用 80 或者 443 去访问，所以需要用 nginx 做代理，</p>
<p><code>Tips:</code> 先到数据库找到WordPress的表 <code>wp_options</code> ，修改 <code>siteurl</code> 和 <code>home</code> 字段，值改为 <code>http://{你的域名}:3002</code> 端口，因为后续WordPress只会作为一个CMS管理系统</p>
<p>登录数据库，切换到WordPress数据库的表 wp_options ，修改 siteurl 和 home 字段</p>
<p>登录和切换数据库</p>
<pre><code class=“language-Bash”>#登录
mysql -u username -p

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

USE database_name;

列出数据库中的所有表

SHOW TABLES;
</code></pre>
<p>修改 siteurl 和 home 字段。</p>
<p>使用 <code>UPDATE</code> 语句来修改 wp_options 表中 option_name 字段下 home 的内容</p>
<p>以下是一个示例 SQL 语句，用于将 <code>home</code> 的内容修改为 <code>http://xm.moshanghua.net:3002</code>：</p>
<pre><code class=“language-Bash”># 修改 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';
</code></pre>
<p>完整演示：</p>
<pre><code class=“language-Bash”>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></code></pre>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-13.png” alt=“” />
<img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-14.png” alt=“” />
<img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-15.png” alt=“” /></p>
<p>数据库字段修改完后，就再配置下规则：</p>
<p>以下是我的配置文件说明，这一步更多配置需要自己了解一下 nginx 配置：</p>
<p>配置分为两段</p>
<p>第一段，设置了一个监听3002端口的虚拟服务器，专门用于服务WordPress应用程序，用于代替之前的 WordPress 访问端口</p>
<pre><code class=“language-Bash”># 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 documentrootdocument_rootfastcgi_script_name;
}
}</code></pre>
<p>第二段，设置一个服务器块，它同时监听80和443端口去代理 Nuxt 服务。</p>
<pre><code class=“language-Bash”>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;
}
}</code></pre>
<p>完整的配置：</p>
<pre><code class=“language-Bash”># 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 documentrootdocument_rootfastcgi_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;
}
}</code></pre>
<p>如果成功配置就到这里结束了。</p>
<p><code>sudo nginx -t</code>测试一下配置，然后重启<code>sudo systemctl restart nginx</code></p>
<h3>再次运行项目</h3>
<p>执行 <code>yarn dev</code>，如果能出现以下截图代表能够正常运行项目，</p>
<p>然后用自己的域名访问，如果能够正常访问按<code>ctrl+c</code> 退出即可；</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-16.png” alt=“” /></p>
<p>使用 <code>yarn pm2</code> 这条命令去运行项目并开启文件更改自动重载项目，pm2 是 Nodejs 的一个守护进程，使用 <code>pm2 logs</code> 可查看日志。</p>
<p>使用 <code>pm2 save</code> 保存当前的应用列表，使用 <code>pm2 startup</code> 开机自动启动</p>
<p>运行项目完整流程：</p>
<pre><code class=“language-Bash”> # 安装项目所需要的依赖文件
yarn --registry=https://registry.npmmirror.com

运行开发环境下的脚本

yarn dev

运行项目

yarn pm2

查看运行日志

pm2 logs

保存当前的应用列表

pm2 save

开机自动启动

pm2 startup
</code></pre>
<p>至此通过域名<a href=“https://xm.moshanghua.net/”>https://xm.moshanghua.net/</a>就能正常访问了</p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-17.png” alt=“” /></p>
<p>博客后台<a href=“http://xm.moshanghua.net:3002/admin”>xm.moshanghua.net:3002/admin</a></p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-18.png” alt=“” /></p>
<p><img src=“https://assets.moshanghua.net/images/2024/04/msh-3073-19.png” alt=“” /></p>
<p>博客后台如果不想带端口去访问，也可以NGINX配置下的WordPress一个服务器块里修改下规则反代到指定域名，也可以顺便加上 SSL，走HTTPS访问。</p>
<h2>主题设置</h2>
<p>Nuxtjs + WordPress主题使用说明请访问<a href=“https://xuanmo.xin/details/2987”>https://xuanmo.xin/details/2987</a></p>

评论区

  • Edith Jennings#5
    Edith Jennings2024/7/2 23:09:12

    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!

    WindowsChrome

  • 天天下载软件站#4
    天天下载软件站2024/6/23 01:04:58

    感谢分享

    WindowsChrome

  • jiyouzhan#3
    jiyouzhan2024/5/17 18:32:57

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

    WindowsFirefox

    • 陌上花#1
      陌上花2024/5/18 00:05:24
      @jiyouzhan

      真的假的，要不是你留的网站类型帮我判定你是来刷存在感的，我就信你了[doge1]

      macOSFirefox

  • q2019715#2
    q20197152024/5/9 15:09:19

    看着评论区在线吃瓜中

    WindowsFirefox

    • 陌上花#1
      陌上花2024/5/14 10:26:21
      @q2019715

      慎重啊，吃瓜需谨慎[wangwang]

      macOSFirefox

  • 悦来集团#1
    悦来集团2024/4/19 21:29:54

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

    WindowsChrome

    • 陌上花#1
      陌上花2024/4/20 21:50:00
      @悦来集团

      啊？我合并我自己吗，你是谁，想冒充[bishi]

      macOSFirefox