Ubuntu22.04LTSにReactJSをインストールする方法

このチュートリアルでは、Ubuntu22.04LTSにReactJSをインストールする方法を紹介します。 ご存じない方のために説明すると、React（React.jsまたはReactJSとも呼ばれます）は、WebフロントエンドおよびUIコンポーネントを作成するためのオープンソースのJavaScriptフロントエンドライブラリです。 多くの開発者は、その柔軟性、整合性、およびHtmlを直接JSに取り込む機能のためにこれを使用しています。

この記事は、少なくともLinuxの基本的な知識があり、シェルの使用方法を知っていること、そして最も重要なこととして、自分のVPSでサイトをホストしていることを前提としています。 インストールは非常に簡単で、rootアカウントで実行していることを前提としています。そうでない場合は、’を追加する必要があります。sudo‘root権限を取得するコマンドに。 Ubuntu 22.04（Jammy Jellyfish）にReactJSを段階的にインストールする方法を紹介します。 Ubuntu 22.04や、Linux Mint、Elementary OS、Pop！_OSなどの他のDebianベースのディストリビューションでも同じ手順に従うことができます。

前提条件

• 次のオペレーティングシステムのいずれかを実行しているサーバー：Ubuntu 22.04、20.04、およびLinuxMintなどの他のDebianベースのディストリビューション。
• 潜在的な問題を防ぐために、OSの新規インストールを使用することをお勧めします。
• サーバーへのSSHアクセス（またはデスクトップを使用している場合はターミナルを開く）。
• A non-root sudo userまたはへのアクセス root user。 として行動することをお勧めします non-root sudo userただし、ルートとして機能するときに注意しないと、システムに害を及ぼす可能性があるためです。

Ubuntu 22.04 LTSJammyJellyfishにReactJSをインストールします

手順1.まず、次のコマンドを実行して、すべてのシステムパッケージが最新であることを確認します。 apt ターミナルのコマンド。

sudo apt update
sudo apt upgrade
sudo apt install wget apt-transport-https gnupg2 software-properties-common

ステップ2.Node.Jsをインストールします。

次に、次のコマンドを実行して、NodeSourceインストールスクリプトをダウンロードして実行します。

curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -

その後、以下のコマンドを使用してNode.jsをシステムにインストールします。

sudo apt install nodejs

最後に、Node.jsの現在アクティブなバージョンを確認します。

node -v
npm -v

ステップ3.Ubuntu22.04にReactJSをインストールします。

ここで、reactアプリケーションの作成に必要なすべての設定とツールをセットアップしました。

sudo npm install -g create-react-app

インストールされているバージョンを確認します create-react-app 次のコマンドを使用します。

create-react-app --version

ステップ4.最初のReactアプリケーションを作成します。

次のコマンドを使用して、ReactJSアプリケーションを作成できます。

sudo create-react-app myreactapp

出力：

Success! Created myreactapp at /home/react/myreactapp
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 myreactapp
  npm start

アプリケーションを作成したら、そのプロジェクトに切り替えて実行します npm start アプリケーションを起動するには：

cd myreactapp
npm start

出力：

Compiled successfully!

You can now view myreactapp in the browser.

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

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

ステップ5.Systemdサービスを作成します。

今、私たちは作成します systemd Reactアプリのサービス。 そのため、アプリを簡単に管理できます。 systemctl 指図：

sudo nano /lib/systemd/system/react.service

次のファイルを追加します。

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/home/react/myreactapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

ファイルを保存して閉じてから、 systemd 次のコマンドを使用したデーモン：

sudo systemctl daemon-reload
sudo systemctl start react
sudo systemctl enable react

ステップ6.ReactJSWebインターフェースへのアクセス。

正常にインストールされたら、Webブラウザーを開き、URLを使用してReactJSWebUIにアクセスします。 http://your-IP-address:3000。 次のページにリダイレクトされます。

おめでとう！ これでReactJSが正常にインストールされました。 このチュートリアルを使用して、Ubuntu 22.04 LTSJammyJellyfishシステムにReactJSをインストールしていただきありがとうございます。 追加のヘルプまたは有用な情報については、チェックすることをお勧めします ReactJSの公式ウェブサイト。