如何在 CentOS 8 上使用 Nginx 代理安装 ReactJS
在此页
- 先决条件
- 开始
- 安装 NPM 和 Node.js
- 安装 Reactjs
- 为 Reactjs 创建一个 Systemd 服务文件
- 将 Nginx 配置为 React 应用程序的反向代理
- 配置防火墙
- 访问 Reactjs 应用程序
- 结论
React 是 Facebook 开发的免费开源 JavaScript 库。它用于创建 Web 前端和 UI 组件。它通常用于开发 Web 应用程序或移动应用程序。它允许开发人员创建相互独立的可重用组件。它可以与其他库一起使用，包括 Axios、JQuery AJAX 或浏览器内置的 window.fetch。
在这篇文章中，我们将向您展示如何在 CentOS 8 上安装 React JS
先决条件
- 一台运行 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 默认存储库中。因此，您需要将 Node 源存储库添加到您的系统中。您可以使用以下命令添加它：
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 myapp
npm 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 服务文件来管理 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 react
systemctl 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 App 的反向代理
接下来，您需要将 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 nginx
systemctl 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/tcp
firewall-cmd --permanent --add-port=443/tcp接下来，重新加载防火墙以应用配置更改：
firewall-cmd --reload完成后，您可以继续下一步。
访问 Reactjs 应用程序
现在，打开您的 Web 浏览器并使用 URL http://react.example.com 访问您的 Reactjs 应用程序。您应该会在以下屏幕上看到 Reactjs 页面：
结论
恭喜！您已经在 CentOS 8 上成功安装了 Reactjs。您还配置了 Nginx 作为 Reactjs 应用程序的反向代理。您现在可以开始开发您的 Reactjs 应用程序。