原文：https://codeburst.io/deploying-a-react-app-using-github-pages-and-github-actions-7fc14d380796

作者：Clyde D'Souza

介紹

我最近用Create React App starter模板創(chuàng)建了一個網(wǎng)站來演示我開發(fā)的一個npm包。我認(rèn)為使用GitHub頁面部署這個站點是非常簡單的，然而，我錯了。經(jīng)過反復(fù)試驗，我設(shè)法解決了這個問題。本文的目的是重新創(chuàng)建該場景，并帶領(lǐng)您完成解決我們一路上遇到的每個問題的過程。

1.起點

讓我們從一個共同的基礎(chǔ)開始。我們先用Create React App工具創(chuàng)建一個React應(yīng)用，同時將代碼添加到GitHub倉庫。我使用了以下命令來生成這個示例React應(yīng)用。

npx create-react-app <project directory> --template typescript 

此時，你的項目目錄應(yīng)該看起來像下面的截圖。我沒有添加或修改任何東西--這些是當(dāng)我們運行上述npx命令時，開箱即生成的文件和文件夾。我只是通過運行 npm run start 命令來確保它在本地工作，僅此而已。

我已經(jīng)把這些改動推送到了我的 GitHub 倉庫，如果你也在關(guān)注，你也可以這樣做。如果你想比較一下，這是我的版本庫現(xiàn)階段的樣子。

2.部署到GitHub Pages

當(dāng)我們運行 npm run build 命令時，Create React App會將生產(chǎn)文件放入 build 目錄中。然而，如果你看一下 .gitignore 文件，你會發(fā)現(xiàn)構(gòu)建目錄被添加到這個列表中，因此，你無法將這個文件夾的內(nèi)容提交到GitHub。那么，我們該如何發(fā)布我們的應(yīng)用呢?

GitHub Actions

讓GitHub Actions來拯救我們吧!我們需要在每次代碼提交時構(gòu)建我們的應(yīng)用程序，這就是GitHub Actions的作用。在你的應(yīng)用程序的 .github/workflows 目錄下創(chuàng)建一個名為 build-deploy.yml 的文件。將以下內(nèi)容粘貼到這個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的基本原理，這里就不多說了?？偨Y(jié)一下，這個YAML文件定義了GitHub Actions中的工作流程。這個工作流會在每次推送變更到主分支或創(chuàng)建拉請求合并變更到主分支時被觸發(fā)，它將構(gòu)建React應(yīng)用，并將 build 目錄的內(nèi)容部署到 gh-pages 分支。

關(guān)于 ${{ secrets.GITHUB_TOKEN }} 的快速注釋——GitHub自動創(chuàng)建一個 GITHUB_TOKEN 密鑰以在您的工作流程中使用。因此，它具有對存儲庫的寫訪問權(quán)，因此，您可以更新 gh-pages 分支。

如果您繼續(xù)學(xué)習(xí)，請將此文件提交到存儲庫。馬上，您就會注意到GitHub Pages現(xiàn)在將基于您在工作流文件中的內(nèi)容進行構(gòu)建。如果您轉(zhuǎn)到GitHub中的Actions選項卡，您將看到您的工作流正在執(zhí)行，并且在一段時間后有望被標(biāo)記為成功。請隨意單擊UI并探索GitHub存儲庫的這個區(qū)域。

假定狀態(tài)顯示為成功，此操作還將創(chuàng)建一個名為 gh-pages 的新分支，并將在其中部署生產(chǎn)就緒代碼。

很簡單，不是嗎?

GitHub Pages

現(xiàn)在我們已經(jīng)將構(gòu)建文件放到了不同的分支中，讓我們繼續(xù)啟用 GitHub Pages。點擊菜單中的Settings，然后向下滾動到 GitHub Pages 部分。

在這里，我們將配置網(wǎng)站內(nèi)容的位置。由于我們的構(gòu)建文件已推送到 gh-pages 分支，因此請從下拉列表中進行選擇。點擊Save按鈕，頁面會刷新，當(dāng)你向下滾動到這部分時，你會看到一個網(wǎng)址。點擊該網(wǎng)址，即可看到網(wǎng)站。

等等，怎么了?我看不到React應(yīng)用的輸出，你能看到嗎?

您可能會看到一個空白的屏幕，并且如果打開控制臺，則會看到很多錯誤。

提示：如果你沒有看到空屏，而是看到GitHub的404信息，請等待幾分鐘，換個瀏覽器試試，最后，嘗試清除緩存。由于這將是你第一次訪問網(wǎng)站，它可能還沒有在后臺更新東西。

請注意它試圖獲取JavaScript和CSS文件的URL——它使用的是基礎(chǔ)URL，但沒有使用路徑 create-react-app-ghpages-demo。顯然，由于基礎(chǔ)URL中不存在JavaScript或CSS文件，我們得到了一個404錯誤。

只有當(dāng)你的項目站點使用的是GitHub Pages，即格式為 https://.github.io/ / 時，才會出現(xiàn)這個錯誤。如果你的版本庫使用 .github.io 的格式命名，那么啟用GitHub Pages后可能不會出現(xiàn)上述錯誤。這是因為你的網(wǎng)站不再部署在根目錄下，而是部署在更深一層的 https://.github.io/ /。

那么，我們?nèi)绾谓鉀Q這個問題呢?讓我們來看看。

3.設(shè)置首頁值

打開這個應(yīng)用的源代碼，在 package.json 文件中，添加這個鍵值對，適當(dāng)替換下面URL中的部分。

"homepage": "https://<username>.github.io/<project>/", 

在我的實例中，這是我必須添加的內(nèi)容：

"homepage": "https://clydedz.github.io/create-react-app-ghpages-demo/", 

做完這個改動后，把它推送到GitHub上。這將觸發(fā)一次構(gòu)建和部署。

給它一兩分鐘，然后再次訪問網(wǎng)站?，F(xiàn)在你應(yīng)該看到你的React應(yīng)用已經(jīng)啟動并運行了。萬歲!

4.添加React Router

接下來，我們就來看看在React應(yīng)用中添加Router的常見場景。會不會無縫運行?還是會再次遇到錯誤?讓我們一探究竟吧。

我將使用React Router來完成這個任務(wù)，我將輸入以下命令來安裝這個npm包。

npm install --save react-router-dom 

我按照基本的例子添加了三個路由。這三條路由分別指向三個獨立的React組件。這是我的GitHub倉庫在添加React Router后的樣子。

如果你運行 npm run start 命令，你將能夠觀察到一個非常奇怪的行為。

• 它的開頭是http://localhost:3000/create-react-app-ghpages-demo，但頁面只包含導(dǎo)航鏈接，沒有其他內(nèi)容。
• 點擊“關(guān)于”鏈接將URL更新為http://localhost:3000/about，現(xiàn)在會顯示一些內(nèi)容。然而，由于URL中完全刪除了 create-react-app-ghpages-demo 的值，我們已經(jīng)不在正確的網(wǎng)站上了(硬刷新該URL會出現(xiàn)錯誤)。

無論如何將這些更改提交到GitHub上(你可能還需要更新你的單元測試)。在成功部署后，你應(yīng)該也能在線復(fù)制這種行為。這顯然不是很理想。

5.解決路由錯誤

造成這種奇怪行為的原因是現(xiàn)在路由器認(rèn)為網(wǎng)站是從根目錄服務(wù)的。這是不正確的--演示應(yīng)用程序是由一個子目錄提供服務(wù)的--因此出現(xiàn)了不匹配。

要解決此問題，請更新以下代碼行：

<Router> 

到

<Router basename={process.env.PUBLIC_URL}> 

process.env.PUBLIC_URL 的值將是 / 。basename 屬性允許我們指定路由的實際基礎(chǔ) URL，在本例中，它將是子目錄。

現(xiàn)在剩下的就是讓我們測試該演示網(wǎng)站，并確認(rèn)它可以像魅力一樣工作。

就是這樣!謝謝閱讀。

本文轉(zhuǎn)載自微信公眾號「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端全棧開發(fā)者公眾號。