ReactJSは、ユーザーインターフェイスと関連コンポーネントの構築に使用される非常に強力なフロントエンドのオープンソースJavaScriptライブラリです。 Facebookと開発者のコミュニティによって維持されています。 ReactJSは、Webアプリケーションまたはモバイルアプリの開発に使用できます。
このチュートリアルでは、Ubuntu20.04サーバーにReactJSをインストールする方法を紹介します。
- rootアクセスが有効になっているUbuntu20.04VPS、またはSudo権限を持つユーザー。
- 4 GB RAM（最小2 GB）
- 10GBの空き容量
ステップ1：SSH経由でログインし、システムを更新します
まず、rootユーザーとしてSSH経由でUbuntu20.04サーバーにログインする必要があります。
ssh root@IP_Address -p Port_number
「IP_Address」と「Port_number」をサーバーのそれぞれのIPアドレスとSSHポート番号に置き換える必要があります。さらに、必要に応じて「root」をsudoユーザー名に置き換えます。
サーバーにインストールされているすべてのUbuntuOSパッケージが最新であることを確認する必要があります。次のコマンドを実行して、サーバーにインストールされているすべてのパッケージをアップグレードします。
apt-get update apt-get upgrade
まず、NodeJSをインストールする必要があります。これは、ReactJSアプリケーションは、NodeJSがサーバーにインストールされている場合にのみ実行できるためです。 Node.jsは、ChromeのV8JavaScriptエンジン上に構築されたオープンソースのクロスプラットフォームJavaScriptランタイム環境です。
Node.jsとnpmをインストールする簡単で簡単な方法は、Ubuntuのデフォルトリポジトリからインストールすることです。
デフォルトでは、最新バージョンのNode.jsはUbuntu20.04のデフォルトリポジトリでは利用できません。そのため、Node.jsの公式リポジトリをシステムに追加する必要があります。
次のコマンドを使用してNode.jsリポジトリを追加します。
curl -sL https://deb.nodesource.com/setup_14.x | bash -
そして、次のコマンドを実行して、追加されたリポジトリからNode.jsをインストールします。
sudo apt-get install nodejs
NodeJSがインストールされたら、次のコマンドを使用して、インストールされているNode.jsのバージョンを確認できます。
node -v
次の出力が得られるはずです：
v14.17.1
Node.jsがインストールされたら、次のコマンドを使用してNPMを最新バージョンに更新します。
npm install npm@latest -g
これで、次のコマンドを使用してnpmのバージョンを確認できます。
npm -v
次の出力が得られるはずです：
7.19.0
次に、create-react-app NPMを使用するツール。このツールは、Reactで新しいプロジェクトを作成するために必要なすべてのツールを設定するのに役立ちます。
npm install -g create-react-app
次のバージョンを確認してください：
create-react-app --version
次の出力が得られるはずです：
4.0.3
ステップ4：ReactJSアプリケーションを作成する
次のコマンドを使用してReactJSアプリケーションを作成できます。
create-react-app my-project
インストールが完了すると、次の出力が表示されます。
Success! Created my-project at /root/my-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 my-project npm start Happy hacking!
プロジェクトが作成されたら、ディレクトリをReactJSアプリケーションに変更します。
cd my-project
次に、次のコマンドを使用してReactJSアプリケーションを起動する必要があります。
npm start
次の出力が得られるはずです：
Compiled successfully! You can now view my-project in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.101:3000 Note that the development build is not optimized. To create a production build, use npm run build.
デフォルトでは、ReactJSアプリケーションはポート3000で起動します。
ステップ5：ReactJSアプリのSystemdサービスファイルを作成する
次に、ReactJSサービスを管理するためのsystemdサービスファイルを作成する必要があります。次のコマンドで作成できます：
nano /lib/systemd/system/reactjs.service
次の行を追加します：
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/my-project ExecStart=npm start -- --port=3000
ファイルを保存して閉じてから、次のコマンドを使用してsystemdサービスをリロードします。
systemctl daemon-reload
次に、ReactJSサービスを開始し、次のコマンドを使用してシステムの再起動時に開始できるようにします。
systemctl start reactjs systemctl enable reactjs
次のコマンドを使用して、ReactJSサービスのステータスを確認できます。
systemctl status reactjs
次の出力が得られるはずです：
● reactjs.service Loaded: loaded (/lib/systemd/system/reactjs.service; static; vendor preset: enabled) Active: active (running) Main PID: 66390 (npm start --por) Tasks: 30 (limit: 2248) Memory: 188.7M CGroup: /system.slice/reactjs.service ├─66390 npm start --port=3000 ├─66401 sh -c react-scripts start "--port=3000" ├─66402 node /root/my-project/node_modules/.bin/react-scripts start --port=3000 └─66409 /usr/bin/node /root/my-project/node_modules/react-scripts/scripts/start.js --port=3000
ステップ6：ReactJSWebUIにアクセスする
次に、Webブラウザーを開き、URL http：// your-server-ip-addressを入力します。 。次の画面にReactJSアプリケーションが表示されます。
おめでとう！これで、Ubuntu20.04にReactJSアプリが正常にインストールされました。
もちろん、マネージドホスティングサービスのいずれかを使用している場合は、UbuntuにReactJSをインストールする必要はありません。その場合は、専門のLinux管理者にインストールを依頼するだけです。 24時間年中無休でご利用いただけます。リクエストはすぐに処理されます。
PS 。 UbuntuにReactJSをインストールする方法に関するこの投稿が気に入った場合は、左側のボタンを使用してソーシャルネットワーク上の友達と共有するか、下に返信を残してください。ありがとう。