React項目從建立到打包到雲服務器指南

一 搭建react項目
二 打包
三 雲服務器設置

一 搭建react項目:

這裏採用react官方提供的腳手架 create-react-app (已自動集成webpack相關配置)

生成的項目目錄結構以下：

ps: 爲何 沒有webpack配置文件？

webpack的配置須要 輸入 npm run eject 命令將全部內建的配置暴露出來。

create-react-app 已經爲作了絕大部分事情，配好了webpack

如今就能使用 npm run start 開始寫react 項目了

省略開發過程

二 打包

咱們能夠看到package.json中的快捷命令

分別對應項目scripts下的文件：

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 潘小閒

未完待續

同步github