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

levy9527 发布于2019-08-26 13:55 / 636人阅读

摘要：描述本文讲解使用创建的项目，如何部署，以及这部署到过程中遇到到坑。增加命令，推送加上这一句推送项目只是部署项目，代码直接放上去是识别不了的，所以部署的是打包编译后到代码。

描述

本文讲解使用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

云服务器服务器托管 github-pages 项目部署到云服务器部署项目到云服务器 java项目部署到tomcat

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109820.html

使用npm-scripts发布Github Pages

摘要：使用发布将项目打包后部署到上是常见需求。需要使用到的库。关于的知识，参考使用指南用打造超溜的前端工作流需付费修改此时，虽然可以发布，但所有相关的静态文件的目录都是指向的，而实际的静态文件的位置是在中。使用npm-scripts发布Github Pages 将项目打包后部署到GitHub Pages 上是常见需求。这里总结下通过npm-srcrips将项目发布到gh-pages分支。需...

cloud 2019-08-26 11:34 评论0 收藏0
官方create-react-app 入门（一）

摘要：目的希望找到像类似的脚手架，便于入门。参考地址系统过程将升级到以上，将有一个新的包，。目录地点运行开发环境测试运行发布环境。我这次暂且选在充当发布环境。在中添加或者结果就可以在中看到发布后的项目。目的：希望找到像Vue-cli类似的脚手架，便于入门。通过此项目学习React。参考地址： https://github.com/facebook/c... 系统： macOS 过...

_ang 2019-08-22 17:34 评论0 收藏0
React 实践项目（五）Docker Nginx 部署 React

摘要：在上已经有接近的数了，是目前最热门的前端框架。将整个应用打包发布，自动试用进行压缩与优化。毫无疑问，这些重担都将压在企业开发人员身上团队之间如何高效协调，快速交付产品，快速部署应用，以及满足企业业务需求，是开发人员亟需解决的问题。 React在Github上已经有接近70000的 star 数了，是目前最热门的前端框架。而我学习React也有一段时间了，现在就开始用 React+Red...

EscapedDog 2019-07-25 13:59 评论0 收藏0
React 实践项目（五）Docker Nginx 部署 React

摘要：在上已经有接近的数了，是目前最热门的前端框架。将整个应用打包发布，自动试用进行压缩与优化。毫无疑问，这些重担都将压在企业开发人员身上团队之间如何高效协调，快速交付产品，快速部署应用，以及满足企业业务需求，是开发人员亟需解决的问题。 React在Github上已经有接近70000的 star 数了，是目前最热门的前端框架。而我学习React也有一段时间了，现在就开始用 React+Red...

jsyzchen 2019-08-20 18:25 评论0 收藏0
React 实践项目（五）Docker Nginx 部署 React

摘要：在上已经有接近的数了，是目前最热门的前端框架。将整个应用打包发布，自动试用进行压缩与优化。毫无疑问，这些重担都将压在企业开发人员身上团队之间如何高效协调，快速交付产品，快速部署应用，以及满足企业业务需求，是开发人员亟需解决的问题。 React在Github上已经有接近70000的 star 数了，是目前最热门的前端框架。而我学习React也有一段时间了，现在就开始用 React+Red...

ephererid 2019-06-28 15:55 评论0 收藏0