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

このセクションでは、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アプリのスタートアップファイルを作成する

システムの再起動時にReactAppを自動的に起動する場合は、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アプリを提供するように構成されています。これで、次のステップに進むことができます。

Access ReactAppWebインターフェース

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