一 搭建react項目
二 打包
三 雲服務器設置html
這裏採用react官方提供的腳手架 create-react-app (已自動集成webpack相關配置)react
生成的項目目錄結構以下:webpack
ps: 爲何 沒有webpack配置文件? nginx
webpack的配置須要 輸入 npm run eject
命令將全部內建的配置暴露出來。git
create-react-app 已經爲作了絕大部分事情,配好了webpackgithub
如今就能使用 npm run start
開始寫react 項目了web
省略開發過程npm
咱們能夠看到package.json中的快捷命令json
分別對應項目scripts下的文件:segmentfault
build文件就是打包項目打包的一系列配置
(本文暫時不分析create-react-app配置文件)
運行 npm run build
後項目中會多出一個build的文件夾
咱們只須要把 build這個文件夾 放到雲服務器上 便可
注:本文以 centos 爲例
推薦yum 源安裝(本文省略 yum 源配置,請自行百度或者看他人的博文)
1 )安裝Nginx服務器
首先 打開命令行 輸入 ssh root@yourIp 連上你的服務器 輸入 yum install -y nginx 命令安裝nginx 服務器 安裝完成後 進入 nginx 配置文件目錄 通常是 /etc/nginx/ 下
在該目錄下新建一個vhost文件夾做爲你本身的配置文件目錄
而後進入vhost 新建 一個配置文件 好比 example.conf
server { listen 5000;//端口號 能夠本身設置 server_name localhost; root /usr/local/reactProjects/yourReactProject;//注意這是裏放 你上面 build 文件夾裏 的 內容 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 路徑只是舉個例子 你能夠放在其餘目錄下
另外 上傳文件到 雲服務器 能夠用xftp 或者其餘的軟件 都行
再輸入 vi nginx.conf
添加下圖劃紅線部分代碼
把你的配置include進來
到此簡易版的Nginx配置好了
但其實Nginx最重要的反向代理咱們還沒配置
本文暫時不研究反向代理,如須要請自行百度或者查看他人的博文,見諒
最後 輸入 systemctl start nginx
開啓nginx服務
瀏覽器上輸入 yourIpAdress:5000/ 即可以訪問你的頁面了
(固然了,還得 後端提供 API )
另外 systemctl status nginx
能夠查看nginx的運行狀態
以及 systemctl stop nginx
能夠 關閉nginx 服務
此外後端項目的部署可參考 基於Node的Koa2項目從建立到打包到雲服務器指南
by 潘小閒
未完待續