はじめに

Node.js と Yarn をCentOS8にインストールするためのメモ。
あわせて、Reactのサンプルアプリのインストール方法も記載。

環境

# hostnamectl status
   Static hostname: ---
         Icon name: computer-vm
           Chassis: vm
        Machine ID: ---
           Boot ID: ---
    Virtualization: kvm
  Operating System: CentOS Linux 8 (Core)
       CPE OS Name: cpe:/o:centos:centos:8
            Kernel: Linux 4.18.0-80.11.2.el8_0.x86_64
      Architecture: x86-64

パッケージを追加

dnf コマンドでYarn のインストールに必要なパッケージを追加。

# dnf install -y which gcc-c++ make dnf-utils 

Node.jsをインストール

rpmコマンドでインストール。

# rpm -ivh --nodeps https://rpm.nodesource.com/pub_12.x/el/8/x86_64/nodejs-12.14.0-1nodesource.x86_64.rpm
Retrieving https://rpm.nodesource.com/pub_12.x/el/8/x86_64/nodejs-12.14.0-1nodesource.x86_64.rpm
warning: /var/tmp/rpm-tmp.wkqkgV: Header V4 RSA/SHA512 Signature, key ID 34fa74dd: NOKEY
Verifying...                          ################################# [100%]
Preparing...                          ################################# [100%]
Updating / installing...
   1:nodejs-2:12.14.0-1nodesource     ################################# [100%]

Node.jsとnpmのバージョンを確認。

# node --version
v12.14.0
# npm --version
6.13.4

Yarnをインストール

リポジトリの追加とインストール。

# curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo
# dnf install -y yarn

Yarnバージョンを確認。

# yarn --version
1.21.1

サンプルアプリケーション

create-react-appをインストール。

# yarn global add create-react-app
yarn global v1.21.1
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@3.3.0" with binaries:
      - create-react-app
Done in 3.68s.

サンプルアプリケーションを作成。

# npx create-react-app quick-react

〜skip〜

Success! Created quick-react at /root/quick-react
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd quick-react
  yarn start

Happy hacking!

サンプルアプリケーションを起動。
ブラウザから http://127.0.0.1:3000/ にアクセスできたら成功。

# cd quick-react/
# yarn start
Compiled successfully!

You can now view quick-react in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://127.0.0.1:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

サンプルアプリケーションへのアクセスをすべて許可

package.jsonファイルの「"start": "react-scripts start"」に「-a 0.0.0.0」を追記。

# vim package.json

~~~ skip ~~~

  "scripts": {
    "start": "react-scripts start -a 0.0.0.0",
    "build": "react-scripts build",

~~~ skip ~~~

以上、終わり。