藉助Github Page把你的React專案部署到線上環境

謝棟發表於2019-04-15
GithubReact

引言

一般我們部署前端專案都會自己搭或者租用一個伺服器然後把專案打包成靜態檔案後部署到伺服器上，再購買一個域名通過ip指向具體的伺服器地址之後，然後就可以把專案對應的域名提供給別人訪問了，如果是公司專案或者比較大的商用專案這很合乎情理，但是如果是個人專案的話，伺服器跟域名也也算是一筆不菲的開銷了，今天我就給個人開發者帶來一種免費部署前端專案的解決方案。

我今天來講解下利用github page是來部署你的前端專案。

1.保證你的React專案是可以正常執行的

在本地嘗試將專案編譯執行在本地檢查是否正常

npm run build
複製程式碼
2.在github上新建倉庫

注意這裡是新建普通倉庫，不需要建立github.io型別的倉庫，關於github.io型別倉庫如果讀者還不瞭解可自行百度瞭解，這裡提供筆者利用github.io+hexo搭建的Flutter進階之旅專欄給大家參考Flutter進階之旅。

例如我新建的名字為jwc的github倉庫如下：

在這裡插入圖片描述

3.將原生程式碼同步到github倉庫上

這一步就不具體細說了，讀者可git add. git commit push等相關操作把自己的原生程式碼上傳到倉庫即可。

4.修改本地React專案的 package.json檔案
{
  "name": "zsjw",
  "version": "0.1.0",
  "homepage": "https://ydjw.github.io/jwc",
  "private": true,
  "dependencies": {
    "antd-mobile": "^2.2.8",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}
複製程式碼

1.配置homepage： 這裡需要把你的github倉庫地址稍微修改一下，例如我的https://github.com/ydjw/jwc "homepage": "https://ydjw.github.io/jwc",
這裡需要把你的github倉庫地址稍微修改一下，例如我的https://github.com/ydjw/jwc修改為https://ydjw.github.io/jwc

2.配置釋出選項

 "predeploy": "npm run build", 
 "deploy": "gh-pages -d build"
複製程式碼

predeploy:是將你的專案預編譯成靜態檔案放在build資料夾 deploy:是使用gh-pages 部署你的build資料夾下的內容。

5.安裝 gh-pages
npm install gh-pages --save-dev
複製程式碼
6.部署專案到github page上
npm run deploy
複製程式碼

配置完之後，開啟github上的倉庫，你會發現原先的專案多了一個gh-pages分支，裡面存放的是我們打包編譯完成之後的靜態檔案。

在這裡插入圖片描述

切換到setting下，我們可以看到現在專案已經被成功部署到ydjw.github.io/jwc/上了。

在這裡插入圖片描述
好了，現在你就可以訪問你部署在github上的react專案了。為了讓你的專案有個個性好記的訪問地址，你可以買個域名，然後通過cname的方式指過來，然後就可以通過域名訪問專案了。以後每次改動完你的本地react專案之後，記得重新打包靜態檔案部署一下，保證線上線下環境一致。

重新打包部署到線上

npm run deploy
複製程式碼

相關文章