【React】CentOS8.2で環境構築してレンタルサーバーにデプロイする

Node.jsとReactを使ってなんかやることになったのでCentOS8.2にインストールして開発環境をつくった。
ついでにReactのチュートリアルをビルドして普通のレンタルサーバーにデプロイしてみる。

環境

【OS】Microsoft Windows 10 Home
【Vagrant】Vagrant2.2.9

参考

CentOS 8にNode.js 12をインストール(AppStream) - Qiita
はじめに Application Stream(AppStream)を利用してCentOS8にNode.js 12をインストール 参考:RHEL8のパッケージ構成 - BaseOSとApplication Stream - 赤帽...
CentOs8にReact.jsをインストールしてHello Worldまでしてみる
Reactの導入からHello Worldまでの手順

やったこと

仮想マシン用意

CentOS8.2のVagrantfileを作成


C\> vagrant init bento/centos-8.2

Vagrantfile下記の箇所にあるコメントを外す。

config.vm.network "private_network", ip: "192.168.33.10"

起動してログインする


C\> vagrant up
C\> vagrant ssh

パッケージの更新


$ sudo dnf update

React開発環境作成

node.jsインストール
参考サイトではAppStreamからインストールしていたのでやってみる。
いくつかあった公式リポジトリが統合されたらしいという漠然とした理解でやってる。


$ sudo yum install -y @nodejs:12/common
$ node -v
v12.18.2

reactをインストールをする。


$ sudo npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@4.0.0
added 91 packages from 46 contributors in 5.576s

yarnをインストールしてバージョン確認。
yarnはnpmの改良版らしい。


$ sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
$ sudo yum install yarn
$ yarn -v
1.22.5

プロジェクト作成と簡易サーバーでの起動

reactのプロジェクト作る。プロジェクト名は「my-project」


$ create-react-app my-project

作ったプロジェクトのディレクトリに移動して実行、停止は「Ctrl+C」


$ cd my-project
$ yarn start

ホスト環境のブラウザで仮想マシンのIPとポートを指定するとreactのプロジェクトにアクセスできる。
今回の場合は下記。
http://192.168.33.10:3000/

おまけ

Reactアプリを別の環境に移動

ホストの方で作ったReactのチュートリアルアプリあったのでこれをCentOSの方で動かそうと思った。
ファイルをコピーしただけでは動かないので関連ライブラリをインストールする。

yarn使って必要なファイルをインストールしていたので、「node_modules」以外のファイルをコピーして「yarn install」すると、必要なライブラリがインストールできた。


$ yarn install

yarnとかnpmはどっちもバージョン管理ソフトだしphpでいうcomposerと同じような動きすると考えていいのかな。
「yarn start」して簡易サーバーを動かすと、ホストのブラウザから正常に動作しているのが確認できた。

普通のレンタルサーバーにデプロイする

普通の、node.jsとか入っていないレンタルサーバーとかにデプロイしたくなったのでやってみる。
今回はReactのチュートリアルのコンテンツをビルドしてさくらのレンタルサーバーライトで動かす。

今回は下記のようなアドレスにデプロイするとする。
http://example.com/my_dir/

「package.json」に下記のように「homepage」項目を追加すると、サブディレクトリにデプロイできる。
(「homepage」項目なしで「yarn build」した場合は、ドメイン直下にアップロードすれば動く)

  "private": true,
  "homepage": "/my_dir/",
  "dependencies": {..省略..

そのあと下記コマンドでビルドする。


$ yarn build

ビルドすると「build」というディレクトリができる。
そのフォルダの中身をまるごと「http://example.com/my_dir/」にあたるフォルダにアップロードすると正常に動作した。

具体的なReact書き方とかは『速習React』とかでざっくり学べたのでたすかった。

おわり。