借助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
复制代码