目錄：
一 ?搭建react項(xiàng)目
二 ?打包
三 ?云服務(wù)器設(shè)置
一 搭建react項(xiàng)目:
這里采用react官方提供的腳手架?create-react-app?(已自動(dòng)集成webpack相關(guān)配置)
生成的項(xiàng)目目錄結(jié)構(gòu)如下：
ps: 為什么 沒有webpack配置文件乐纸？?
webpack的配置需要 輸入 npm run eject 命令將所有內(nèi)建的配置暴露出來。
create-react-app 已經(jīng)為做了絕大部分事情庭再，配好了webpack
現(xiàn)在就能使用 npm ?run start 開始寫react 項(xiàng)目了
省略開發(fā)過程 ??
二? 打包
我們可以看到package.json中的快捷命令
分別對(duì)應(yīng)項(xiàng)目scripts下的文件：
build文件就是打包項(xiàng)目打包的一系列配置
(本文暫時(shí)不分析create-react-app配置文件)
運(yùn)行 npm run build 后項(xiàng)目中會(huì)多出一個(gè)build的文件夾
我們只需要把 build這個(gè)文件夾 放到云服務(wù)器上 即可?
三? 云服務(wù)器設(shè)置
注：本文以 centos 為例
? ? ? ?推薦yum 源安裝(本文省略 yum 源配置,請自行百度或者看他人的博文)
1 ）安裝Nginx服務(wù)器
? ? ? ?首先 打開命令行 輸入 ssh root@yourIp 連上你的服務(wù)器
? ? ? ?輸入 ?yum install -y nginx ? 命令安裝nginx 服務(wù)器
? ? ? ?安裝完成后 進(jìn)入 nginx 配置文件目錄 一般是 ?/etc/nginx/ 下
? ? ? ?在該目錄下新建一個(gè)vhost文件夾作為你自己的配置文件目錄
? ? ? ?然后進(jìn)入vhost 新建 一個(gè)配置文件 ? 比如 example.conf
server {
listen 5000; //端口號(hào) 可以自己設(shè)置
server_name localhost;
root /usr/local/reactProjects/yourReactProject;//注意這是里放 你上面 build 文件夾里 的 內(nèi)容
location / {
try_files $uri @fallback;
}
location @fallback {
rewrite .* /index.html break;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}?? ? ? 注意: ?/usr/local/reactProjects/yourReactProject ?路徑只是舉個(gè)例子 你可以放在其他目錄下?
? ? ? ? ? ? ? 上傳文件到 云服務(wù)器 可以用xftp 或者其他的軟件 都行?
? ? ? ?再輸入 vi nginx.conf ? 添加下圖劃紅線部分代碼
? ? ? 把你的配置include進(jìn)來
? ? ? 到此簡易版的Nginx配置好了?
? ? ? 但其實(shí)Nginx最重要的反向代理我們還沒配置?
? ? ? 本文暫時(shí)不研究反向代理，如需要請自行百度或者查看他人的博文银伟，見諒
? ? ? ?最后 輸入 systemctl start nginx 開啟nginx服務(wù)
? ? ? ?瀏覽器上輸入 ?yourIpAdress:5000/ ?便可以訪問你的頁面了
? ? ?（當(dāng)然了棘捣，還得 ?后端提供 API ）
? ? ? ?另外? systemctl status nginx 可以查看nginx的運(yùn)行狀態(tài)
? ? ? ?以及 systemctl stop nginx 可以 關(guān)閉nginx 服務(wù)
? ? ? ?over?
? ? ? ?by ?潘小閑
