原文：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)過(guò)反復(fù)試驗(yàn)，我設(shè)法解決了這個(gè)問(wèn)題。本文的目的是重新創(chuàng)建該場(chǎng)景，并帶領(lǐng)您完成解決我們一路上遇到的每個(gè)問(wèn)題的過(guò)程。

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)像下面的截圖。我沒(méi)有添加或修改任何東西--這些是當(dāng)我們運(yùn)行上述npx命令時(shí)，開箱即生成的文件和文件夾。我只是通過(guò)運(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ō)了?？偨Y(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ù)的寫訪問(wèn)權(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ò)誤。

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

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

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

那么，我們?nèi)绾谓鉀Q這個(gè)問(wèn)題呢?讓我們來(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èn)網(wǎng)站?，F(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)航鏈接，沒(méi)有其他內(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)了不匹配。

要解決此問(wèn)題，請(qǐng)更新以下代碼行：

<Router> 

到

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

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

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

就是這樣!謝謝閱讀。

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