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

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

一 搭建react項目:

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

生成的項目目錄結構以下:webpack

clipboard.png

ps: 爲何 沒有webpack配置文件? nginx

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

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

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

省略開發過程npm

二 打包

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

clipboard.png

分別對應項目scripts下的文件:segmentfault

clipboard.png

build文件就是打包項目打包的一系列配置

(本文暫時不分析create-react-app配置文件)

運行 npm run build 後項目中會多出一個build的文件夾

clipboard.png

咱們只須要把 build這個文件夾 放到雲服務器上 便可

三 雲服務器設置

注:本文以 centos 爲例

推薦yum 源安裝(本文省略 yum 源配置,請自行百度或者看他人的博文)

1 )安裝Nginx服務器

首先 打開命令行 輸入 ssh root@yourIp 連上你的服務器

輸入  yum install -y nginx   命令安裝nginx 服務器

安裝完成後 進入 nginx 配置文件目錄 通常是  /etc/nginx/ 下

clipboard.png

在該目錄下新建一個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 添加下圖劃紅線部分代碼

clipboard.png

把你的配置include進來

到此簡易版的Nginx配置好了

但其實Nginx最重要的反向代理咱們還沒配置

本文暫時不研究反向代理,如須要請自行百度或者查看他人的博文,見諒


最後 輸入 systemctl start nginx 開啓nginx服務

瀏覽器上輸入 yourIpAdress:5000/ 即可以訪問你的頁面了

(固然了,還得 後端提供 API )

另外 systemctl status nginx 能夠查看nginx的運行狀態

以及 systemctl stop nginx 能夠 關閉nginx 服務


此外後端項目的部署可參考 基於Node的Koa2項目從建立到打包到雲服務器指南


by 潘小閒

未完待續

同步github

相關文章
相關標籤/搜索