藉助Github Page把你的React項目部署到線上環境

引言

通常咱們部署前端項目都會本身搭或者租用一個服務器而後把項目打包成靜態文件後部署到服務器上，再購買一個域名經過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
複製代碼