1. 部署环境
CentOS 7.9 并关闭了Selinux
[root@st1 ~]# getenforce Disabled [root@st1 ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core)
2. 安装create-react-app组件
# 通过yum安装npm [root@st1 ~]# yum -y install npm git # 通过npm 安装react-create-app组件 [root@st1 ~]# npm install react-create-app # 通过react-create-app查看版本 [root@st1 ~]# create-react-app --version 5.0.0
3.生成第一个React应用
# 准备应用目录 [root@st1 ~]# mkdir /project/react/www -p [root@st1 ~]# cd /project/react/www/ # 创建应用，如此处命名应用为st # 创建应用前，中国大陆地区可以更改npm源来加快安装速度，防止安装过程出现timeout [root@st1 www]# create-react-app st [root@st1 www]# cd st # 启动 [root@st1 st]# npm start & Compiled successfully! You can now view st in the browser. Local: http://localhost:3000 On Your Network: http://192.168.124.20:3000 ... # 通过检查服务的监听端口，确认启动成功 [root@st1 st]# netstat -pltun |grep 3000 tcp 0 0 0.0.0.0:3000 0.0.0.0:* LISTEN 9446/node
# 生产环境，需要设置服务开机自动启动，此处略。
4.尝试访问
使用浏览器访问该服务器即可： http://192.168.124.20:3000
出现如下图所示图样，则正常
5.错误记录
遇到问题，当执行create-react-app <app名> 时，出现错误：
.... npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! errno ERR_SOCKET_TIMEOUT npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/postcss-normalize-timing-functions: Socket timeout npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config' npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2022-03-22T16_11_40_097Z-debug-0.log Aborting installation. npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed. Deleting generated file... package.json Deleting st/ from /project/react/www Done.
查看错误，发现安装超时：
[root@st1 www]# cat /root/.npm/_logs/2022-03-22T16_11_40_097Z-debug-0.log
将npm registry源更改为中国大陆的源站点即可：
# 查看当前源 [root@st1 www]# npm config get registry https://registry.npmjs.org/ # 设置新源 [root@st1 www]# npm config set registry http://registry.npm.taobao.org/ # 确认新的源设置正确 [root@st1 www]# npm config get registry http://registry.npm.taobao.org/