はじめに
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 20198系
8.11.4(15-Aug-2018)
End-of-life: December 201910系
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の初期画面が表示されます。
ご参照いただきありがとうございました。