createreactapp项目部署到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