create-react-app項目部署到Github Pages

描述

本文講解使用create-react-app建立的項目，如何部署GitHub Pages，以及這部署到過程當中遇到到坑。

建立項目

使用官網方式建立項目。

npx create-react-app my-app
cd my-app
npm install

彈出配置

npm run eject

Github Pages部署講解

把項目部署成github pages，在github上點開項目到設置，翻到Github Pages設置處，能夠看到Github Pages只能使用master、gh-pages分支或者master下面的docs文件夾。
咱們這裏使用的是gh-pages分支的方式來建立。

安裝gh-pages

npm install gh-pages --save-dev

經過gh-pages中間件能夠把build文件下到文件推送到github，而且建立gh-pages branch。

修改package.json

增長homepage

"name": "react_demo",
  "version": "1.1.0",
  "private": true,
  "homepage": "./",  //加上這一句

注意： homepage不要設置成 github page上生成的那個連接路徑，好比 https://username.github.io/react_demo/。
若是設置成上面的鏈接， build打的包會這全部路徑前面加上 react_demo。
好比 index.html文件中對同等目錄下的文件引用應該是 src='./index.css',結果會變成 src='./react_demo/index.css',這樣部署後確定沒法訪問，全部資源都找不到。

增長npm scripts命令，推送gh-pages

"scripts": {
        ...
     + "deploy": "gh-pages -d build" //加上這一句
}

推送項目

GitHub Pages只是部署項目，react代碼直接放上去是識別不了的，因此部署的是打包編譯後到代碼。

npm run build

編譯後就能夠推送了,執行上面配置的命令。

npm run deploy

這時github上項目就多出了一個gh-pages的branch，在設置中Github Pages處選擇gh-pages分支保存，部署完成。
點擊生成的鏈接，查看是否部署成功。

2019-05-25