如何使用Nginx代理在CentOS 8上安装ReactJS

如何使用Nginx代理在CentOS 8上安装ReactJS

React是Facebook开发的免费开源JavaScript库。它用于创建Web前端和UI组件。通常用于开发Web或移动应用程序。这使开发人员可以创建彼此独立的可重用组件。它可以与Axios,JQuery AJAX或其他库(例如浏览器的内置window.fetch)一起使用。

在这篇文章中,我将向您展示如何在CentOS 8上安装ReactJS。

先决条件

  • 运行CentOS的服务器8。
  • 指向服务器IP的有效域名。
  • 超级用户密码由服务器组成。

入门

您必须先将系统软件包更新为最新版本,然后才能开始。您可以通过运行以下命令来更新它们:

dnf update -y

当所有软件包都是最新的时,请使用以下命令安装其他必需的依赖项。

dnf install gcc-c++ make curl -y

安装所需的依赖项后,您可以继续执行下一步。

安装NPM和Node.js

接下来,您需要在系统上安装Node.js和NPM。 NPM,也称为包管理器,是用于与Javascript包进行交互的命令行工具。默认情况下,最新版本的NPM和Node.js不包括在CentOS默认存储库中。因此,您需要将节点源存储库添加到系统中。您可以使用以下命令添加它。

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

添加存储库后,使用以下命令安装Node.js和NPM。

dnf install nodejs -y

安装完成后,运行以下命令以检查Node.js版本。

node -v

您应该获得以下输出:

v14.16.0

您还可以通过运行以下命令来检查NPM版本:

npm -v

您应该获得以下输出:

6.14.11

此时,将在您的系统上安装NPM和Node.js。您现在可以继续进行Reactjs的安装了。

安装Reactjs

开始之前,您需要在系统上安装create-react-app。这是用于创建React应用程序的命令行实用程序。

可以使用NPM进行安装,如下所示。

npm install -g create-react-app

安装后,使用以下命令检查安装的create-react-app的版本。

create-react-app --version

您应该看到以下输出:

4.0.3

然后使用以下命令创建您的第一个Reactjs应用程序。

create-react-app myapp

您应该看到以下输出:

Success! Created myapp at /root/myapp
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 myapp
  npm start

然后将目录更改为myapp并使用以下命令启动应用程序:

cd myappnpm start

如果应用程序成功启动,您将看到以下输出:广告

Compiled successfully!

You can now view myapp 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停止应用程序。现在,您可以继续下一步。

为Reactjs创建一个Systemd服务文件

接下来,我们建议您创建一个systemd服务文件来管理您的Reactjs服务。您可以使用以下命令创建它。

nano /lib/systemd/system/react.service

添加以下行。

[Unit]
After=network.target

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

[Install]
WantedBy=multi-user.target

保存并关闭文件,然后使用以下命令重新加载systemd守护程序:

systemctl daemon-reload

然后启动Reactjs服务,以便可以使用以下命令在系统重新启动时启动它:

systemctl start reactsystemctl enable react

然后使用以下命令检查Reactjs应用程序的状态:

systemctl status react

您应该获得以下输出:

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.

此时,Reactjs已启动并在端口3000上侦听。您可以使用以下命令进行检查。

ss -antpl | grep 3000

您应该获得以下输出:

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:(("node",pid=2209,fd=18))                                                

完成后,您可以继续下一步。

将Nginx配置为您的React应用程序的反向代理

接下来,您需要将Nginx配置为反向代理以访问端口80上的React应用。首先,使用以下命令安装Nginx软件包:

dnf install nginx -y

一旦安装了Nginx,请使用以下命令创建一个新的Nginx虚拟主机配置文件。

nano /etc/nginx/conf.d/react.conf

添加以下行。

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

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:3000;
    }
}

完成后,保存文件,将其关闭,并使用以下命令检查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 start nginxsystemctl enable nginx

您还可以通过运行以下命令来检查Nginx的状态:

systemctl status nginx

您需要在以下输出中获取React服务的状态。

? nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
  Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 4081 (nginx)
    Tasks: 2 (limit: 12524)
   Memory: 4.0M
   CGroup: /system.slice/nginx.service
           ??4081 nginx: master process /usr/sbin/nginx
           ??4082 nginx: worker process

Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.

完成后,您可以继续下一步。

配置防火墙

接下来,您需要允许端口80和443通过防火墙。您可以通过运行以下命令来允许它们:

firewall-cmd --permanent --add-port=80/tcpfirewall-cmd --permanent --add-port=443/tcp

然后重新加载防火墙以应用配置更改。

firewall-cmd --reload

完成后,您可以继续下一步。

访问Reactjs应用程序

然后打开Web浏览器,并使用URL访问您的Reactjs应用程序。 http://react.example.com.. Reactjs页面显示在下一个屏幕上。

结论

恭喜!您已经在CentOS8上成功安装了Reactjs。我还将Nginx配置为我的Reactjs应用程序的反向代理。您现在可以开始开发Reactjs应用程序了。

Sidebar