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

Ubuntu/Debian
adminLeave a Comment on Ubuntu20.04にReactJSをインストールする方法

目次

ReactJSは、再利用可能なUIコンポーネントの構築に使用される無料のオープンソースJavaScriptライブラリです。 これは、最小限のコーディングでリッチで魅力的なWebアプリを迅速かつ効率的に作成するために、2011年にFacebookによって開発されました。 それはあなたがウェブサイト上でインタラクティブな要素を作成することを可能にします。 アプリを高速化する仮想DOMを使用します。 仮想DOM、一方向データバインディング、コンポーネント、JSX、条件付きステートメントなど、豊富な機能セットを提供します。

このチュートリアルでは、Create Reactアプリをインストールし、Ubuntu20.04でNginxWebサーバーを使用してReactJSアプリケーションをホストする方法を示します。

前提条件

  • 2GB以上のRAMを搭載したUbuntu20.04を実行しているサーバー。
  • サーバーIPで指定された有効なドメイン名。 このチュートリアルでは、reactjs.example.comドメインを使用します。
  • ルートパスワードがサーバーに設定されます。

入門

開始する前に、システムパッケージを最新バージョンに更新することを常にお勧めします。 次のコマンドを実行して、それらを更新できます。

apt-get update -y

すべてのパッケージが更新されたら、次のコマンドを実行して、他の必要な依存関係をインストールします。

apt-get install curl gnupg2 -y

すべての依存関係がインストールされたら、次のステップに進むことができます。

Node.jsをインストールします

次に、Node.jsをサーバーにインストールする必要があります。 デフォルトでは、最新バージョンのNode.jsはUbuntu20.04標準リポジトリでは利用できません。 したがって、Node.jsの公式リポジトリからNode.jsをインストールする必要があります。

まず、次のコマンドを使用してNode.jsリポジトリを追加します。

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

次に、次のコマンドを実行して、Node.jsをシステムにインストールします。

apt-get install nodejs -y

Node.jsをインストールした後、次のコマンドを使用してNPMを最新バージョンに更新します。

npm install [email protected] -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
+ [email protected]
updated 2 packages in 12.78s

次に、次のコマンドを使用して、インストールされているNode.jsのバージョンを確認します。

node -v

次の出力が得られるはずです。

v14.15.3

終了したら、次のステップに進むことができます。

Create React Appは、セットアップと構成の時間を節約するツールです。 1つのコマンドを実行するだけで、Create React Appにより、プロジェクトを開始するために必要なすべてのツールがセットアップされます。

次のコマンドを使用して、Create ReactAppツールをインストールできます。

npm install -g create-react-app

次の出力が得られるはずです。

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ [email protected]
added 67 packages from 25 contributors in 4.705s

終了したら、次のステップに進むことができます。

最初のReactアプリを作成する

このセクションでは、Reactアプリの作成ツールを使用してReactアプリを作成する方法を説明します。

まず、ディレクトリを/ optに変更し、次のコマンドを使用して最初のプロジェクトを作成します。

cd /opt
create-react-app reactproject

次の出力が表示されます。

Success! Created reactproject at /opt/reactproject
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 reactproject
  npm start

Happy hacking!

次に、ディレクトリをプロジェクトに変更し、次のコマンドを使用してアプリケーションを起動します。

cd /opt/reactproject
npm start

次の出力が得られるはずです。

Compiled successfully!

You can now view reactproject in the browser.

  http://localhost:3000

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

押す CTRL + C アプリケーションを停止します。

Reactアプリのスタートアップファイルを作成する

システムの再起動時にReactアプリを自動的に起動する場合は、Reactアプリのsystemdサービスを作成する必要があります。 そのため、systemctlコマンドを使用してアプリを簡単に管理できます。 次のコマンドを使用して、systemdサービスファイルを作成できます。

nano /lib/systemd/system/react.service

次の行を追加します。

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactproject
ExecStart=npm start -- --port=3000

ファイルを保存して閉じてから、次のコマンドでsystemdデーモンをリロードします。

systemctl daemon-reload

次に、次のコマンドを実行して、Reactサービスを開始し、システムの再起動時に開始できるようにします。

systemctl start react
systemctl enable react

次のコマンドを使用して、Reactサービスのステータスを確認できます。

systemctl status react

次の出力が得られるはずです。

? react.service
     Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
     Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
   Main PID: 30833 (node)
      Tasks: 30 (limit: 4691)
     Memory: 141.0M
     CGroup: /system.slice/react.service
             ??30833 npm
             ??30844 sh -c react-scripts start "--port=3000"
             ??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
             ??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000

Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > [email protected] start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...

終了したら、次のステップに進むことができます。

Reactアプリ用にNginxを構成する

NginxをReactAppのリバースプロキシとしてインストールして構成することをお勧めします。 したがって、ポート80を介してアプリにアクセスできます。

まず、次のコマンドを使用してNginxパッケージをインストールします。

apt-get install nginx -y

Nginxがインストールされたら、新しいNginx仮想ホスト構成ファイルを作成します。

nano /etc/nginx/sites-available/reactjs.conf

次の行を追加します。

upstream backend {
  server localhost:3000;
}

server {
    listen 80;
    server_name reactjs.example.com;

    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

ファイルを保存して閉じてから、次のコマンドでNginx仮想ホストを有効にします。

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

次に、次のコマンドを実行して、構文エラーがないかNginxを確認します。

nginx -t

次の出力が得られるはずです。

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

最後に、Nginxサービスを再起動して、変更を適用します。

systemctl restart nginx

次のコマンドを使用して、Nginxサービスのステータスを確認することもできます。

systemctl status nginx

次の出力が表示されます。

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
       Docs: man:nginx(8)
    Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 30915 (nginx)
      Tasks: 3 (limit: 4691)
     Memory: 3.6M
     CGroup: /system.slice/nginx.service
             ??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             ??30916 nginx: worker process
             ??30917 nginx: worker process

Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.

この時点で、Nginxがインストールされ、Reactアプリを提供するように構成されています。 これで、次のステップに進むことができます。

React AppWebインターフェースにアクセスする

次に、Webブラウザーを開き、URLを入力します http://reactjs.example.com。 次の画面で、React.JsWebインターフェイスにリダイレクトされます。

結論

おめでとう！ これで、Ubuntu20.04サーバーにReact.Jsが正常にインストールおよび構成されました。 実稼働環境に独自のReactアプリケーションをデプロイするための十分な知識が得られたことを願っています。 ご不明な点がございましたら、お気軽にお問い合わせください。

Hope this helps!

Source link

Related Posts

Ubuntu18.04にNFSサーバーをインストールして構成する方法

admin

Debian 10にGitLabをインストールして構成する方法

admin

Ubuntu20.04にPerconaデータベースサーバーをインストールする方法

admin

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です