はじめに

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

環境

$ hostnamectl status
   Static hostname: ---
         Icon name: computer-container
           Chassis: container
        Machine ID: ---
           Boot ID: ---
    Virtualization: lxc
  Operating System: Ubuntu 20.04.2 LTS
            Kernel: Linux 5.4.0-67-generic
      Architecture: x86-64

パッケージを追加

Node.js と Yarn のインストールに必要なパッケージを追加。

$ sudo apt install curl gcc g++ make

Node.js 12.x をインストール

リポジトリを追加

$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt update

Node.jsをインストール

$ sudo apt install nodejs

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

$ node --version
v12.21.0
$ npm --version
6.14.11

Yarnをインストール

リポジトリを追加

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update

Yarnをインストール

$ sudo apt install yarn

Yarnバージョンを確認

$ yarn --version
1.21.5

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

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

$ yarn global add create-react-app
yarn global v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@4.0.3" with binaries:  
      - create-react-app
Done in 1.69s.

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

$ npx create-react-app quick-react

〜skip〜

Success! Created quick-react at /home/long-in/test/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/ にアクセスできたら成功。

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 ~~~

以上、終わり。