はじめに

CentOS7へのReact開発環境インストールメモです。

2018年08月末現在の内容です。

作業環境
CentOS Linux release 7.5.1804 (Core)
VirtualBox(5.2.16r123759)(ホストオンリーアダプタ経由で接続)

nodejsはバージョン管理ツール無しでのセットアップです。

最後の「Reactアプリケーションの作成＆起動」以外はrootで作業しています。

Nodeのバージョンを決める

導入するNodeのバージョンを決めるために、create-react-appの要件を確認します。
https://github.com/facebook/create-react-app
「Creating an App」の部分を参照すると

Node >= 6

とのこと。
（当然create-react-appで用意されるReactも上記条件で動作するはずです）

Nodeの2018/08/28現在のバージョンとサポート状況を確認します。
https://github.com/nodejs/Release#release-schedule

6系
6.14.4(15-Aug-2018)
End-of-life: April 2019

8系
8.11.4(15-Aug-2018)
End-of-life: December 2019

10系
10.9.0(15-Aug-2018)
End-of-life: April 2021

モジュールの互換性など考慮する必要がありますが今回は10系を使用します。

インストール

Nodejsをインストール

公式サイトを参考にしてNode.jsをインストールします。
https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

CentOSなので「Enterprise Linux and Fedora」を見て、10系なので次のスクリプトを実行。
私はrootで作業していたので、公式のまま次のスクリプトを実行したところエラーが発生してしまいました。

(失敗したコマンド)
curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -

> Your distribution, identified as "centos-release-7-5.1804.4.el7.centos.x86_64", is not currently supported, please contact NodeSource at https://github.com/nodesource/distributions/issues if you think this is incorrect or would like your distribution to be considered for support

rootでsudoを実施したのが原因でしたが、見当違いのエラーメッセージが出てしまい混乱します、、、

sudoを外して、

curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -

を実行すると正しくリポジトリに追加されました。

つづいて、yum install を実行してNodejsをインストールします。

yum -y install nodejs

Yarnのインストール

最近は起動のサジェストがYarnになっているそうなので、
(https://qiita.com/sho7/items/bb564e22a096eaea9877)
次のコマンドでインストールします。

npm install yarn -g

Create-react-appをインストール

次のコマンドでインストールします。

npm install create-react-app -g

環境設定

待ち受けポートの解放

(仮想環境利用時など、reactサーバに外部から接続する場合)CentOS7ではポート開放しないとデフォルトの待ち受けである3000でページ表示できません。

次のコマンドでポートを開けます。

# ポートを開放
firewall-cmd --add-port=3000/tcp --zone=public --permanent

# firewallをリロード
firewall-cmd --reload

Reactアプリケーションの作成＆起動

プロジェクトを作成したいフォルダまで移動し、次のコマンドで雛形を作成します。

create-react-app my-app

次の手順でアプリケーションを起動します。

cd my-app
yarn start

サーバが起動した旨のメッセージが出力されれば、http://サーバのアドレス:3000/ でReactの初期画面が表示されます。

ご参照いただきありがとうございました。