create-react-app項(xiàng)目部署到Github Pages

levy9527 發(fā)布于2019-08-26 13:55 / 748人閱讀

摘要：描述本文講解使用創(chuàng)建的項(xiàng)目，如何部署，以及這部署到過(guò)程中遇到到坑。增加命令，推送加上這一句推送項(xiàng)目只是部署項(xiàng)目，代碼直接放上去是識(shí)別不了的，所以部署的是打包編譯后到代碼。

描述

本文講解使用create-react-app創(chuàng)建的項(xiàng)目，如何部署GitHub Pages，以及這部署到過(guò)程中遇到到坑。

創(chuàng)建項(xiàng)目

使用官網(wǎng)方式創(chuàng)建項(xiàng)目。

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

彈出配置

npm run eject

Github Pages部署講解

把項(xiàng)目部署成github pages，在github上點(diǎn)開(kāi)項(xiàng)目到設(shè)置，翻到Github Pages設(shè)置處，可以看到Github Pages只能使用master、gh-pages分支或者master下面的docs文件夾。
我們這里使用的是gh-pages分支的方式來(lái)創(chuàng)建。

安裝gh-pages

npm install gh-pages --save-dev

通過(guò)gh-pages中間件可以把build文件下到文件推送到github，并且創(chuàng)建gh-pages branch。

修改package.json

增加homepage

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

注意：homepage不要設(shè)置成github page上生成的那個(gè)鏈接路徑，比如https://username.github.io/react_demo/。
如果設(shè)置成上面的連接，build打的包會(huì)這所有路徑前面加上react_demo。
比如index.html文件中對(duì)同等目錄下的文件引用應(yīng)該是src="./index.css",結(jié)果會(huì)變成src="./react_demo/index.css",這樣部署后肯定無(wú)法訪問(wèn)，所有資源都找不到。

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

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

推送項(xiàng)目

GitHub Pages只是部署項(xiàng)目，react代碼直接放上去是識(shí)別不了的，所以部署的是打包編譯后到代碼。

npm run build

編譯后就可以推送了,執(zhí)行上面配置的命令。

npm run deploy

這時(shí)github上項(xiàng)目就多出了一個(gè)gh-pages的branch，在設(shè)置中Github Pages處選擇gh-pages分支保存，部署完成。
點(diǎn)擊生成的連接，查看是否部署成功。

2019-05-25

GPU云服務(wù)器云服務(wù)器 github-pages 項(xiàng)目部署到云服務(wù)器部署項(xiàng)目到云服務(wù)器 java項(xiàng)目部署到tomcat

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109820.html

相關(guān)文章

使用npm-scripts發(fā)布Github Pages

摘要：使用發(fā)布將項(xiàng)目打包后部署到上是常見(jiàn)需求。需要使用到的庫(kù)。關(guān)于的知識(shí)，參考使用指南用打造超溜的前端工作流需付費(fèi)修改此時(shí)，雖然可以發(fā)布，但所有相關(guān)的靜態(tài)文件的目錄都是指向的，而實(shí)際的靜態(tài)文件的位置是在中。使用npm-scripts發(fā)布Github Pages 將項(xiàng)目打包后部署到GitHub Pages 上是常見(jiàn)需求。這里總結(jié)下通過(guò)npm-srcrips將項(xiàng)目發(fā)布到gh-pages分支。需...

cloud 2019-08-26 11:34 評(píng)論0 收藏0
官方create-react-app 入門（一）

摘要：目的希望找到像類似的腳手架，便于入門。參考地址系統(tǒng)過(guò)程將升級(jí)到以上，將有一個(gè)新的包，。目錄地點(diǎn)運(yùn)行開(kāi)發(fā)環(huán)境測(cè)試運(yùn)行發(fā)布環(huán)境。我這次暫且選在充當(dāng)發(fā)布環(huán)境。在中添加或者結(jié)果就可以在中看到發(fā)布后的項(xiàng)目。目的：希望找到像Vue-cli類似的腳手架，便于入門。通過(guò)此項(xiàng)目學(xué)習(xí)React。參考地址： https://github.com/facebook/c... 系統(tǒng)： macOS 過(guò)...

_ang 2019-08-22 17:34 評(píng)論0 收藏0
React 實(shí)踐項(xiàng)目 （五）Docker Nginx 部署 React

摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。將整個(gè)應(yīng)用打包發(fā)布，自動(dòng)試用進(jìn)行壓縮與優(yōu)化。毫無(wú)疑問(wèn)，這些重?fù)?dān)都將壓在企業(yè)開(kāi)發(fā)人員身上團(tuán)隊(duì)之間如何高效協(xié)調(diào)，快速交付產(chǎn)品，快速部署應(yīng)用，以及滿足企業(yè)業(yè)務(wù)需求，是開(kāi)發(fā)人員亟需解決的問(wèn)題。 React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時(shí)間了，現(xiàn)在就開(kāi)始用 React+Red...

EscapedDog 2019-07-25 13:59 評(píng)論0 收藏0
React 實(shí)踐項(xiàng)目 （五）Docker Nginx 部署 React

摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。將整個(gè)應(yīng)用打包發(fā)布，自動(dòng)試用進(jìn)行壓縮與優(yōu)化。毫無(wú)疑問(wèn)，這些重?fù)?dān)都將壓在企業(yè)開(kāi)發(fā)人員身上團(tuán)隊(duì)之間如何高效協(xié)調(diào)，快速交付產(chǎn)品，快速部署應(yīng)用，以及滿足企業(yè)業(yè)務(wù)需求，是開(kāi)發(fā)人員亟需解決的問(wèn)題。 React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時(shí)間了，現(xiàn)在就開(kāi)始用 React+Red...

jsyzchen 2019-08-20 18:25 評(píng)論0 收藏0
React 實(shí)踐項(xiàng)目 （五）Docker Nginx 部署 React

摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。將整個(gè)應(yīng)用打包發(fā)布，自動(dòng)試用進(jìn)行壓縮與優(yōu)化。毫無(wú)疑問(wèn)，這些重?fù)?dān)都將壓在企業(yè)開(kāi)發(fā)人員身上團(tuán)隊(duì)之間如何高效協(xié)調(diào)，快速交付產(chǎn)品，快速部署應(yīng)用，以及滿足企業(yè)業(yè)務(wù)需求，是開(kāi)發(fā)人員亟需解決的問(wèn)題。 React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時(shí)間了，現(xiàn)在就開(kāi)始用 React+Red...

ephererid 2019-06-28 15:55 評(píng)論0 收藏0