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

levy9527 發布于2019-08-26 13:55 / 741人閱讀

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

描述

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

云服務器 GPU云服務器 github-pages 項目部署到云服務器部署項目到云服務器 java項目部署到tomcat

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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