Node.jsとReactを使ってなんかやることになったのでCentOS8.2にインストールして開発環境をつくった。
ついでにReactのチュートリアルをビルドして普通のレンタルサーバーにデプロイしてみる。
環境
【OS】Microsoft Windows 10 Home
【Vagrant】Vagrant2.2.9
参考
やったこと
仮想マシン用意
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』とかでざっくり学べたのでたすかった。
おわり。
