React アプリを Create React App で設置＆設定する | Ubuntu 18.04.2

NODEJS を設置

NODEJS の最新版 を確認できます。( 任意 )

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash –

admin@ubuntu18:~$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

## Installing the NodeSource Node.js 10.x repo...
## Populating apt-get cache...
+ apt-get update
取得:1 http://security.ubuntu.com/ubuntu bionic-security InRelease [88.7 kB]
ヒット:2 http://us.archive.ubuntu.com/ubuntu bionic InRelease
取得:3 http://us.archive.ubuntu.com/ubuntu bionic-updates InRelease [88.7 kB]
取得:4 http://us.archive.ubuntu.com/ubuntu bionic-backports InRelease [74.6 kB]
252 kB を 2秒 で取得しました (116 kB/s)
パッケージリストを読み込んでいます... 完了

## Confirming "bionic" is supported...
+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_10.x/dists/bionic/Release'
## Adding the NodeSource signing key to your keyring...
+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK

## Creating apt sources list file for the NodeSource Node.js 10.x repo...
+ echo 'deb https://deb.nodesource.com/node_10.x bionic main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_10.x bionic main' >> /etc/apt/sources.list.d/nodesource.list

## Running `apt-get update` for you...
+ apt-get update
取得:1 https://deb.nodesource.com/node_10.x bionic InRelease [4,584 B]
ヒット:2 http://security.ubuntu.com/ubuntu bionic-security InRelease
取得:3 https://deb.nodesource.com/node_10.x bionic/main amd64 Packages [767 B]
ヒット:4 http://us.archive.ubuntu.com/ubuntu bionic InRelease
ヒット:5 http://us.archive.ubuntu.com/ubuntu bionic-updates InRelease
ヒット:6 http://us.archive.ubuntu.com/ubuntu bionic-backports InRelease
5,351 B を 1秒 で取得しました (3,810 B/s)
パッケージリストを読み込んでいます... 完了

## Run `sudo apt-get install -y nodejs` to install Node.js 10.x and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL 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-get update && sudo apt-get install yarn

admin@ubuntu18:~$

sudo apt-get install -y nodejs

admin@ubuntu18:~$ sudo apt-get install -y nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています
状態情報を読み取っています... 完了
以下のパッケージが自動でインストールされましたが、もう必要とされていません:
...

これを削除するには 'sudo apt autoremove' を利用してください。
以下のパッケージが新たにインストールされます:
  nodejs
アップグレード: 0 個、新規インストール: 1 個、削除: 0 個、保留: 0 個。
15.8 MB のアーカイブを取得する必要があります。
この操作後に追加で 76.5 MB のディスク容量が消費されます。
取得:1 https://deb.nodesource.com/node_10.x bionic/main amd64 nodejs amd64 10.16.0-1nodesource1 [15.8 MB]
15.8 MB を 2秒 で取得しました (10.0 MB/s)
以前に未選択のパッケージ nodejs を選択しています。
(データベースを読み込んでいます ... 現在 217001 個のファイルとディレクトリがインストールされています。)
.../nodejs_10.16.0-1nodesource1_amd64.deb を展開する準備をしています ...
nodejs (10.16.0-1nodesource1) を展開しています...
nodejs (10.16.0-1nodesource1) を設定しています ...
man-db (2.8.3-2ubuntu0.1) のトリガを処理しています ...

admin@ubuntu18:~$

sudo apt autoremove (任意)

admin@ubuntu18:~$ sudo apt autoremove
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています
状態情報を読み取っています... 完了
以下のパッケージは「削除」されます:
  apg aptdaemon bbswitch-dkms blue
  ...

NPM を設置

sudo npm install npm@latest -g

admin@ubuntu18:~$ sudo npm install npm@latest -g
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
+ npm@6.9.0
updated 1 package in 3.199s

admin@ubuntu18:~$

React を設置

sudo npm install -g create-react-app

admin@ubuntu18:~$ sudo npm install -g create-react-app
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ create-react-app@3.0.1
added 91 packages from 45 contributors in 1.546s
admin@ubuntu18:~$

React プロジェクトを作成

作成するプロジェクトの位置は任意です。ここでは /reactjs にしています。

sudo create-react-app YOUR-PROJECT (or, sudo npx create-react-app YOUR-PROJECT)

admin@ubuntu18:~$ mkdir /reactjs
admin@ubuntu18:~$ cd /reactjs
admin@ubuntu18:~/reactjs$
admin@ubuntu18:~/reactjs$ sudo create-react-app YOUR-PROJECT

Creating a new React app in /reactjs/YOUR-PROJECT.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> core-js@2.6.9 postinstall /reactjs/YOUR-PROJECT/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"


> core-js-pure@3.1.4 postinstall /reactjs/YOUR-PROJECT/node_modules/core-js-pure
> node scripts/postinstall || echo "ignore"

+ react-dom@16.8.6
+ react@16.8.6
+ react-scripts@3.0.1
added 1406 packages from 727 contributors and audited 888987 packages in 40.36s
found 0 vulnerabilities


Success! Created YOUR-PROJECT at /reactjs/YOUR-PROJECT
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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 YOUR-PROJECT
  npm start

Happy hacking!

admin@ubuntu18:~/reactjs$

ポートオープン ＆ Firewall リロード

sudo ufw allow 3000/tcp
sudo ufw status
sudo ufw reload

React アプリを起動

npm start

ブラウザで確認

http://localhost:3000
or,
http://YOUR-IP-ADDRESS:3000

参考文献

Getting Started
Using HTTPS in Development