使用Xserver将WordPress用作无头CMS！实现使用React开发前端的方法

2 年 ago
韵, 科
1 minute

首先

我从2022年9月开始正式学习编程，到2023年4月在京都的一家Web创业公司作为前端工程师入职。目前我的工作经验为3个月。在实际工作中，我主要使用WordPress、JavaScript和PHP。

这篇文章的目标读者

    WordPressを使用していて、より効率的なCMSとしての運用を考えている方
    Reactを学習中で、実際のプロジェクトに活用したい方
    ヘッドレスCMSについて理解を深めたい方
    Xserverを使用していて、その上でReactとWordPressを組み合わせたい方

请参考此网站。

以下的网站是本文所参考的信息来源。请将其作为了解更详细信息和额外学习资源的参考。

React公式文档
WordPress REST API手册
Xserver官方网站
Node.js官方文档
npm官方文档
create-react-app官方文档
Nodebrew的GitHub存储库

开发环境

macOS Ventura 13.4.1
Visual Studio Code

在WordPress上安装ReactPress插件。

(Note: The provided phrase is already in Japanese, not English. Therefore, the paraphrased sentence is provided in the same language, Japanese.)

首先, 从WordPress的管理界面安装ReactPress插件。这将使WordPress作为无头CMS运行，并能够与React进行协作。

プラグイン→新規追加→ReactPressを検索→インストール→有効化

2. SSH连接的方式

然后，我们将通过ssh连接到X服务器。这里我们将使用Mac的终端。

我会在这里分享一个易于理解的关于创建和设置密钥的网站。

如何在Mac PC上进行SSH连接的Xserver SSH配置

在进行SSH连接时，为了下一次方便，将配置添加到config中。将以下内容附加到~/.ssh/config文件中。

配置 

vi ~/.ssh/config

我会列举一些关于Vim操作的详细文章。

https://qiita.com/hide/items/5bfe5b322872c61a6896:
请点击链接阅读隐藏提供的文章。

https://it-kyujin.jp/article/detail/129/:
请点击链接阅读IT求人提供的文章。

Host xsrv
        HostName xs947742.xsrv.jp
        Port 10022
        User xs947742
        IdentityFile ~/.ssh/xserver.key
        ServerAliveInterval 60

通过这样，您可以使用ssh xsrv这个缩写命令进行ssh连接。

请使用以下命令连接到X服务器的ssh。

ssh xsrv

或者 

ssh -l サーバーID -i id_rsa サーバーID.xsrv.jp -p 10022

安装nodebrew。

如果成功建立SSH连接，接下来将安装nodebrew。请执行以下命令。

curl -L git.io/nodebrew | perl - setup
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

使用 nodebrew help 命令来确认安装成功。

4. 安装 Node.js 和 npm

接下来，我们将安装Node.js和npm。请执行以下命令。

nodebrew install v14.21.3
nodebrew use v14.21.3
node -v

通过这个操作，我们确认 Node.js 的版本已经更新至 v14.21.3。

关于nodebrew的版本

我的开发环境是在Xserver的租用服务器上，由于系统只安装了旧版本的库，所以我需要降低版本进行安装。请根据您的环境进行适当的设置。

使用create-react-app来创建React项目。

最后，使用create-react-app来创建React项目。请执行以下命令。

cd <サイト名>/public_html/wp-content/reactpress/apps
npm install -g npx
npx create-react-app job-site
cd job-site
npm run build

在Xserver上，将WordPress转换为Headless CMS并创建React的步骤已经完成。现在，可以开始开发将WordPress和React结合在一起的项目了。

bannerAds