使用GitHub Pages和GitHub Actions部署React應(yīng)用
原文：https://codeburst.io/deploying-a-react-app-using-github-pages-and-github-actions-7fc14d380796
作者：Clyde D'Souza
介紹
我最近用Create React App starter模板創(chuàng)建了一個(gè)網(wǎng)站來(lái)演示我開發(fā)的一個(gè)npm包。我認(rèn)為使用GitHub頁(yè)面部署這個(gè)站點(diǎn)是非常簡(jiǎn)單的，然而，我錯(cuò)了。經(jīng)過反復(fù)試驗(yàn)，我設(shè)法解決了這個(gè)問題。本文的目的是重新創(chuàng)建該場(chǎng)景，并帶領(lǐng)您完成解決我們一路上遇到的每個(gè)問題的過程。
1.起點(diǎn)
讓我們從一個(gè)共同的基礎(chǔ)開始。我們先用Create React App工具創(chuàng)建一個(gè)React應(yīng)用，同時(shí)將代碼添加到GitHub倉(cāng)庫(kù)。我使用了以下命令來(lái)生成這個(gè)示例React應(yīng)用。
- npx create-react-app <project directory> --template typescript
此時(shí)，你的項(xiàng)目目錄應(yīng)該看起來(lái)像下面的截圖。我沒有添加或修改任何東西--這些是當(dāng)我們運(yùn)行上述npx命令時(shí)，開箱即生成的文件和文件夾。我只是通過運(yùn)行 npm run start 命令來(lái)確保它在本地工作，僅此而已。
我已經(jīng)把這些改動(dòng)推送到了我的 GitHub 倉(cāng)庫(kù)，如果你也在關(guān)注，你也可以這樣做。如果你想比較一下，這是我的版本庫(kù)現(xiàn)階段的樣子。
2.部署到GitHub Pages
當(dāng)我們運(yùn)行 npm run build 命令時(shí)，Create React App會(huì)將生產(chǎn)文件放入 build 目錄中。然而，如果你看一下 .gitignore 文件，你會(huì)發(fā)現(xiàn)構(gòu)建目錄被添加到這個(gè)列表中，因此，你無(wú)法將這個(gè)文件夾的內(nèi)容提交到GitHub。那么，我們?cè)撊绾伟l(fā)布我們的應(yīng)用呢?
GitHub Actions
讓GitHub Actions來(lái)拯救我們吧!我們需要在每次代碼提交時(shí)構(gòu)建我們的應(yīng)用程序，這就是GitHub Actions的作用。在你的應(yīng)用程序的 .github/workflows 目錄下創(chuàng)建一個(gè)名為 build-deploy.yml 的文件。將以下內(nèi)容粘貼到這個(gè)YAML文件中。這是我的GitHub倉(cāng)庫(kù)在這個(gè)階段的樣子。
- name: Build & deploy
- on:
- push:
- branches:
- - main
- pull_request:
- branches:
- - main
- jobs:
- build:
- name: Build
- runs-on: ubuntu-latest
- steps:
- - name: Checkout code
- uses: actions/checkout@v2
- - name: Install Node.js
- uses: actions/setup-node@v1
- with:
- node-version: 13.x
- - name: Install NPM packages
- run: npm ci
- - name: Build project
- run: npm run build
- - name: Run tests
- run: npm run test
- - name: Upload production-ready build files
- uses: actions/upload-artifact@v2
- with:
- name: production-files
- path: ./build
- deploy:
- name: Deploy
- needs: build
- runs-on: ubuntu-latest
- if: github.ref == 'refs/heads/main'
- steps:
- - name: Download artifact
- uses: actions/download-artifact@v2
- with:
- name: production-files
- path: ./build
- - name: Deploy to gh-pages
- uses: peaceiris/actions-gh-pages@v3
- with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
- publish_dir: ./build
最近我寫了這篇文章，解釋了GitHub Actions的基本原理，這里就不多說(shuō)了。總結(jié)一下，這個(gè)YAML文件定義了GitHub Actions中的工作流程。這個(gè)工作流會(huì)在每次推送變更到主分支或創(chuàng)建拉請(qǐng)求合并變更到主分支時(shí)被觸發(fā)，它將構(gòu)建React應(yīng)用，并將 build 目錄的內(nèi)容部署到 gh-pages 分支。
關(guān)于 ${{ secrets.GITHUB_TOKEN }} 的快速注釋——GitHub自動(dòng)創(chuàng)建一個(gè) GITHUB_TOKEN 密鑰以在您的工作流程中使用。因此，它具有對(duì)存儲(chǔ)庫(kù)的寫訪問權(quán)，因此，您可以更新 gh-pages 分支。
如果您繼續(xù)學(xué)習(xí)，請(qǐng)將此文件提交到存儲(chǔ)庫(kù)。馬上，您就會(huì)注意到GitHub Pages現(xiàn)在將基于您在工作流文件中的內(nèi)容進(jìn)行構(gòu)建。如果您轉(zhuǎn)到GitHub中的Actions選項(xiàng)卡，您將看到您的工作流正在執(zhí)行，并且在一段時(shí)間后有望被標(biāo)記為成功。請(qǐng)隨意單擊UI并探索GitHub存儲(chǔ)庫(kù)的這個(gè)區(qū)域。
假定狀態(tài)顯示為成功，此操作還將創(chuàng)建一個(gè)名為 gh-pages 的新分支，并將在其中部署生產(chǎn)就緒代碼。
很簡(jiǎn)單，不是嗎?
GitHub Pages
現(xiàn)在我們已經(jīng)將構(gòu)建文件放到了不同的分支中，讓我們繼續(xù)啟用 GitHub Pages。點(diǎn)擊菜單中的Settings，然后向下滾動(dòng)到 GitHub Pages 部分。
在這里，我們將配置網(wǎng)站內(nèi)容的位置。由于我們的構(gòu)建文件已推送到 gh-pages 分支，因此請(qǐng)從下拉列表中進(jìn)行選擇。點(diǎn)擊Save按鈕，頁(yè)面會(huì)刷新，當(dāng)你向下滾動(dòng)到這部分時(shí)，你會(huì)看到一個(gè)網(wǎng)址。點(diǎn)擊該網(wǎng)址，即可看到網(wǎng)站。
等等，怎么了?我看不到React應(yīng)用的輸出，你能看到嗎?
您可能會(huì)看到一個(gè)空白的屏幕，并且如果打開控制臺(tái)，則會(huì)看到很多錯(cuò)誤。
提示：如果你沒有看到空屏，而是看到GitHub的404信息，請(qǐng)等待幾分鐘，換個(gè)瀏覽器試試，最后，嘗試清除緩存。由于這將是你第一次訪問網(wǎng)站，它可能還沒有在后臺(tái)更新東西。
請(qǐng)注意它試圖獲取JavaScript和CSS文件的URL——它使用的是基礎(chǔ)URL，但沒有使用路徑 create-react-app-ghpages-demo。顯然，由于基礎(chǔ)URL中不存在JavaScript或CSS文件，我們得到了一個(gè)404錯(cuò)誤。
只有當(dāng)你的項(xiàng)目站點(diǎn)使用的是GitHub Pages，即格式為 https://
那么，我們?nèi)绾谓鉀Q這個(gè)問題呢?讓我們來(lái)看看。
3.設(shè)置首頁(yè)值
打開這個(gè)應(yīng)用的源代碼，在 package.json 文件中，添加這個(gè)鍵值對(duì)，適當(dāng)替換下面URL中的部分。
- "homepage": "https://<username>.github.io/<project>/",
在我的實(shí)例中，這是我必須添加的內(nèi)容：
- "homepage": "https://clydedz.github.io/create-react-app-ghpages-demo/",
做完這個(gè)改動(dòng)后，把它推送到GitHub上。這將觸發(fā)一次構(gòu)建和部署。
給它一兩分鐘，然后再次訪問網(wǎng)站。現(xiàn)在你應(yīng)該看到你的React應(yīng)用已經(jīng)啟動(dòng)并運(yùn)行了。萬(wàn)歲!
4.添加React Router
接下來(lái)，我們就來(lái)看看在React應(yīng)用中添加Router的常見場(chǎng)景。會(huì)不會(huì)無(wú)縫運(yùn)行?還是會(huì)再次遇到錯(cuò)誤?讓我們一探究竟吧。
我將使用React Router來(lái)完成這個(gè)任務(wù)，我將輸入以下命令來(lái)安裝這個(gè)npm包。
- npm install --save react-router-dom
我按照基本的例子添加了三個(gè)路由。這三條路由分別指向三個(gè)獨(dú)立的React組件。這是我的GitHub倉(cāng)庫(kù)在添加React Router后的樣子。
如果你運(yùn)行 npm run start 命令，你將能夠觀察到一個(gè)非常奇怪的行為。
- 它的開頭是http://localhost:3000/create-react-app-ghpages-demo，但頁(yè)面只包含導(dǎo)航鏈接，沒有其他內(nèi)容。
- 點(diǎn)擊“關(guān)于”鏈接將URL更新為http://localhost:3000/about，現(xiàn)在會(huì)顯示一些內(nèi)容。然而，由于URL中完全刪除了 create-react-app-ghpages-demo 的值，我們已經(jīng)不在正確的網(wǎng)站上了(硬刷新該URL會(huì)出現(xiàn)錯(cuò)誤)。
無(wú)論如何將這些更改提交到GitHub上(你可能還需要更新你的單元測(cè)試)。在成功部署后，你應(yīng)該也能在線復(fù)制這種行為。這顯然不是很理想。
5.解決路由錯(cuò)誤
造成這種奇怪行為的原因是現(xiàn)在路由器認(rèn)為網(wǎng)站是從根目錄服務(wù)的。這是不正確的--演示應(yīng)用程序是由一個(gè)子目錄提供服務(wù)的--因此出現(xiàn)了不匹配。
要解決此問題，請(qǐng)更新以下代碼行：
- <Router>
到
- <Router basename={process.env.PUBLIC_URL}>
process.env.PUBLIC_URL 的值將是 /
現(xiàn)在剩下的就是讓我們測(cè)試該演示網(wǎng)站，并確認(rèn)它可以像魅力一樣工作。
就是這樣!謝謝閱讀。
本文轉(zhuǎn)載自微信公眾號(hào)「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開發(fā)者公眾號(hào)。
