使用GitHub Pages和GitHub Actions部署React應用
原文：https://codeburst.io/deploying-a-react-app-using-github-pages-and-github-actions-7fc14d380796
作者：Clyde D'Souza
介紹
我最近用Create React App starter模板創建了一個網站來演示我開發的一個npm包。我認為使用GitHub頁面部署這個站點是非常簡單的，然而，我錯了。經過反復試驗，我設法解決了這個問題。本文的目的是重新創建該場景，并帶領您完成解決我們一路上遇到的每個問題的過程。
1.起點
讓我們從一個共同的基礎開始。我們先用Create React App工具創建一個React應用，同時將代碼添加到GitHub倉庫。我使用了以下命令來生成這個示例React應用。
- npx create-react-app <project directory> --template typescript
此時，你的項目目錄應該看起來像下面的截圖。我沒有添加或修改任何東西--這些是當我們運行上述npx命令時，開箱即生成的文件和文件夾。我只是通過運行 npm run start 命令來確保它在本地工作，僅此而已。
我已經把這些改動推送到了我的 GitHub 倉庫，如果你也在關注，你也可以這樣做。如果你想比較一下，這是我的版本庫現階段的樣子。
2.部署到GitHub Pages
當我們運行 npm run build 命令時，Create React App會將生產文件放入 build 目錄中。然而，如果你看一下 .gitignore 文件，你會發現構建目錄被添加到這個列表中，因此，你無法將這個文件夾的內容提交到GitHub。那么，我們該如何發布我們的應用呢?
GitHub Actions
讓GitHub Actions來拯救我們吧!我們需要在每次代碼提交時構建我們的應用程序，這就是GitHub Actions的作用。在你的應用程序的 .github/workflows 目錄下創建一個名為 build-deploy.yml 的文件。將以下內容粘貼到這個YAML文件中。這是我的GitHub倉庫在這個階段的樣子。
- 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的基本原理，這里就不多說了。總結一下，這個YAML文件定義了GitHub Actions中的工作流程。這個工作流會在每次推送變更到主分支或創建拉請求合并變更到主分支時被觸發，它將構建React應用，并將 build 目錄的內容部署到 gh-pages 分支。
關于 ${{ secrets.GITHUB_TOKEN }} 的快速注釋——GitHub自動創建一個 GITHUB_TOKEN 密鑰以在您的工作流程中使用。因此，它具有對存儲庫的寫訪問權，因此，您可以更新 gh-pages 分支。
如果您繼續學習，請將此文件提交到存儲庫。馬上，您就會注意到GitHub Pages現在將基于您在工作流文件中的內容進行構建。如果您轉到GitHub中的Actions選項卡，您將看到您的工作流正在執行，并且在一段時間后有望被標記為成功。請隨意單擊UI并探索GitHub存儲庫的這個區域。
假定狀態顯示為成功，此操作還將創建一個名為 gh-pages 的新分支，并將在其中部署生產就緒代碼。
很簡單，不是嗎?
GitHub Pages
現在我們已經將構建文件放到了不同的分支中，讓我們繼續啟用 GitHub Pages。點擊菜單中的Settings，然后向下滾動到 GitHub Pages 部分。
在這里，我們將配置網站內容的位置。由于我們的構建文件已推送到 gh-pages 分支，因此請從下拉列表中進行選擇。點擊Save按鈕，頁面會刷新，當你向下滾動到這部分時，你會看到一個網址。點擊該網址，即可看到網站。
等等，怎么了?我看不到React應用的輸出，你能看到嗎?
您可能會看到一個空白的屏幕，并且如果打開控制臺，則會看到很多錯誤。
提示：如果你沒有看到空屏，而是看到GitHub的404信息，請等待幾分鐘，換個瀏覽器試試，最后，嘗試清除緩存。由于這將是你第一次訪問網站，它可能還沒有在后臺更新東西。
請注意它試圖獲取JavaScript和CSS文件的URL——它使用的是基礎URL，但沒有使用路徑 create-react-app-ghpages-demo。顯然，由于基礎URL中不存在JavaScript或CSS文件，我們得到了一個404錯誤。
只有當你的項目站點使用的是GitHub Pages，即格式為 https://
那么，我們如何解決這個問題呢?讓我們來看看。
3.設置首頁值
打開這個應用的源代碼，在 package.json 文件中，添加這個鍵值對，適當替換下面URL中的部分。
- "homepage": "https://<username>.github.io/<project>/",
在我的實例中，這是我必須添加的內容：
- "homepage": "https://clydedz.github.io/create-react-app-ghpages-demo/",
做完這個改動后，把它推送到GitHub上。這將觸發一次構建和部署。
給它一兩分鐘，然后再次訪問網站?，F在你應該看到你的React應用已經啟動并運行了。萬歲!
4.添加React Router
接下來，我們就來看看在React應用中添加Router的常見場景。會不會無縫運行?還是會再次遇到錯誤?讓我們一探究竟吧。
我將使用React Router來完成這個任務，我將輸入以下命令來安裝這個npm包。
- npm install --save react-router-dom
我按照基本的例子添加了三個路由。這三條路由分別指向三個獨立的React組件。這是我的GitHub倉庫在添加React Router后的樣子。
如果你運行 npm run start 命令，你將能夠觀察到一個非常奇怪的行為。
- 它的開頭是http://localhost:3000/create-react-app-ghpages-demo，但頁面只包含導航鏈接，沒有其他內容。
- 點擊“關于”鏈接將URL更新為http://localhost:3000/about，現在會顯示一些內容。然而，由于URL中完全刪除了 create-react-app-ghpages-demo 的值，我們已經不在正確的網站上了(硬刷新該URL會出現錯誤)。
無論如何將這些更改提交到GitHub上(你可能還需要更新你的單元測試)。在成功部署后，你應該也能在線復制這種行為。這顯然不是很理想。
5.解決路由錯誤
造成這種奇怪行為的原因是現在路由器認為網站是從根目錄服務的。這是不正確的--演示應用程序是由一個子目錄提供服務的--因此出現了不匹配。
要解決此問題，請更新以下代碼行：
- <Router>
到
- <Router basename={process.env.PUBLIC_URL}>
process.env.PUBLIC_URL 的值將是 /
現在剩下的就是讓我們測試該演示網站，并確認它可以像魅力一樣工作。
就是這樣!謝謝閱讀。
本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。
