React-部署到Github Page

思路

部署时候具体执行的操作大概为：

在package.json里面增加配置代码
使用build命令打包编译代码文件
使用gh-pages工具把build文件下的文件推送到GitHub部署到新的gh-pages分支上
使用deploy命令来发布页面

根据环境设置URL

这步可忽略不做

import {createBrowserHistory} from 'history';

const ENV = process.env.NODE_ENV;
let publicUrl: string = '';

if (ENV === 'development') {
  publicUrl = '/';
} else if (ENV === 'production') {
  publicUrl = '/avccc'; // 这里应为Github项目仓库的名称
}

const history = createBrowserHistory({
  basename: publicUrl
})

export default history;

配置package.json文件

配置Homepage

在package.json中添加homepage字段，与dependencies同级。create-react-app将使用 homepage值来配置访问页面

"private": true,
"homepage": "https://xxx.github.io/theApp"

注意！如果前面的Homepage发布到线上有问题，可以尝试更换Homepage为"./"

例如： homepage不要设置成github page上生成的那个链接路径，比如https://username.github.io/react_demo/ 如果设置成上面的连接，build打的包会这所有路径前面加上react_demo 比如index.html文件中对同等目录下的文件引用应该是 src='./index.css'，结果会变成src='./react_demo/index.css'，这样部署后肯定无法访问，所有资源都找不到。

添加发布脚本代码

predeploy是将你的项目预编译成静态文件放在build文件夹

deploy是使用gh-pages部署你的build文件夹下的内容

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    ***
    }

完整的package.json

{
  "name": "application",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://xxx.github.io/theApp"
  "dependencies": {
    "axios": "^0.17.1",
    "jquery": "^3.2.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "gh-pages": "^1.1.0"
  }
}

检查编译是否正常

使用build命令，将项目编译运行在本地检查是否正常

yarn build  // 或者
npm run build

安装gh-pages

通过gh-pages中间件，可以把build文件下的文件推送到GitHub，并且创建gh-pages branch

yarn add gh-pages // 或者
npm install gh-pages --save-dev

部署项目到github page

yarn run deploy  // 或者
npm run deploy

确认代码分支

在github项目仓库地址切换分支，可以查看到gh-pages分支下的build代码
在项目的settings的GitHun Pages设置部分中，确保源代码Source使用的是gh-pages分支
至此，发布配置基本完成，还有其他可选项，如自定义域名
发布命令完成之后，需要等待一阵子才能生效，立即访问homepage，很有可能不会得到想要的结果