【Xserver】WordPressでReactを使用する方法を手順付きで説明

最近Wordpressの開発にすっかりはまっている私。今回は、WordpressにReactも連携できることがわかったので、その方法をご紹介したいと思います。

Xserverを使用しているのですが、そこでちょっとつまづいたところもあったのでその方法も合わせて共有できたらと思います！

今回のレシピ

必要なもの

• Xserverのサーバー
• SSHができる環境

手順

1. WordPressでReactPressのプラグインをインストール
2. XserverにSSH接続する
3. nodebrewをインストール
4. nodejs, npmのインストール
5. create-react-appで作成

1. WordPressでReactPressのプラグインをインストール

WordPressの管理画面から、プラグインを新規追加します。

有効化して、プラグインページに移動すると、特に何も表示されません。

まだアプリを追加していないので、これからSSHして追加していきましょう

2. XserverにSSH接続する

使用しているサーバーにSSHを使って接続します。

接続する方法はこちらの記事を参考にしてください

私はUbuntuで接続したので、以下のようなコマンドになりました。

ssh <サーバーID>.xsrv.jp -p 10022

SSHの際はssh-keygenをして公開鍵を登録する必要があるのでお忘れなく！

3. nodebrewをインストール

nodejsを入れないとそもそもreactが動かないのですが、Xserverはaptがないのでそのまま入れるのは大変です。そこで、nodebrewを入れることで、nodejsをバージョン指定で入れられるようにします。

curlやperlはXserverにあるので一発ではいります！ありがたい

curl -L git.io/nodebrew | perl - setup

【注意】PATHを追加しないと動かない

ここでテキトーになってPATHを設定しなかった自分を責めたいのですが、どうやらnodebrewのPATHを設定しないと動かないみたいです。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

しかし、XserverにSSHするとおそらくbashがデフォルトで動いてくれないので、上のコマンドはSSHする度に入れています。

ちゃんとnodebrewがインストールされているか確認してみましょう

nodebrew help

コマンドがばーっと出てきたら成功です。

4. nodejs, npmのインストール

ではnodebrewを使ってnodejs, npmを入れておきましょう。

なぜか最新(stable)のバージョンがインストールできなかったので、直接v14を指定してインストールすることにしました。

nodebrew install v14

インストールに5分くらいかかります。

終わったら、バージョンを確認し、実際に使用しましょう

$ nodebrew ls
v14.21.2

$ nodebrew use v14.21.2

$ node -v
v14.21.2

これでやっとReactを使う準備ができました！

create-react-appで作成

ここで、XserverのReactPressがインストールされているディレクトリに移動します。

cd <サイト名>/public_html/wp-content/reactpress/apps

npxもまだ動かないので、npmで入れます

npm install -g npx

これで最後です！create-react-appしてみましょう

npx create-react-app <プロジェクト名>

WordPressのReactPressの画面に移動すると、画面が更新されているはずです

あとはコード編集して、npm run buildをすれば実際のサイトで使用することができます！

まとめ

ReactPressのインストールに関してはいろんな場所に情報があったので助かりましたが、Xserverで行っている手順がなかったので今回この記事を作成しました。

ぜひ参考にしてください！