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/