保姆级GitHub Actions部署React应用的快速入门

408 阅读3分钟

前言

最近在做基于react项目做一个低代码构建平台,使用Create React App脚手架创建的项目提交GitHub时,想通过GitHub Pages部署站点。然而一知半解的我,趟了两天的坑啊,可是爬上岸了。现在总结下方法,以便日后查阅。

起步

首先,用 Create React App 工具创建一个 React 应用,同时将代码添加到 GitHub 仓库。使用以下命令来生成这个示例 React 应用。

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

我已经成功把github的react版本低代码构建平台项目,部署好了,这样部署后的地址,大家可以查阅比较。也欢迎大家支持下我的react版本低代码构建平台项目。

项目配置

设置首页值

打开这个应用的源代码,在 package.json 文件中,添加这个键值对,适当替换下面 URL 中的部分。

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

设置路由

为了防止项目构建后,路由不匹配了,导致空白页面。这是需要设置下访问路径。

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

process.env.PUBLIC_URL 的值将是 /<project>。basename 属性允许我们指定路由的实际基础 URL,在本例中,它将是子目录。

设置GitHub Actions

现在需要通过 GitHub Actions 来部署我们的项目。在每次代码提交时构建我们的应用程序,GitHub Actions会根据你项目里的配置执行部署项目。

现在,在你的应用程序的 .github/workflows 目录下创建一个名为 ci.yml 的文件(文件名叫啥无所谓)。将以下内容粘贴到这个 YAML 文件中。这是我的 GitHub 仓库在这个阶段的样子。

name: Build and Deploy

# 当有新push或者pr时运行
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  # 一项叫做build-and-deploy的任务
  build-and-deploy:
    # 在最新版的Ubuntu系统下运行
    runs-on: ubuntu-latest

    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2 # 来自官方脚本:https://github.com/marketplace/actions/checkout

      - name: Install and Build
        run: |
          npm install
          CI=false npm run build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@releases/v3 # 脚本来自: https://github.com/JamesIves/github-pages-deploy-action
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: build
          CLEAN: true

注意: 这个CI=false,它的作用如果您的构建在有警告后,在此更改后的打包部署将中断,您可以通过在构建中取消设置 CI 变量来禁用此行为。就是没设置这个配置,坑了我好久。这里是对该配置的详细说明

总结一下,这个 YML 文件定义了 GitHub Actions 中的工作流程。这个工作流会在每次推送变更到主分支或创建拉请求合并变更到主分支时被触发,它将构建 React 应用,并将 build 目录的内容部署到 gh-pages 分支。

关于 $的快速注释——GitHub 自动创建一个 GITHUB_TOKEN 密钥以在您的工作流程中使用。因此,它具有对存储库的写访问权,因此,您可以更新 gh-pages 分支。

接下来,再新建一个gh-pages分支,用于发布部署。

image.png

部署GitHub Pages

Actions secrets

在你的github中,找到Settings

image.png

点击打开后,找到Developer settings,点击进入如下,新建一个access token

image.png

创建成功后,拷贝access token

image.png

进入你的项目仓库中的Settings中:

image.png

创建Actions secrets

image.png

成功后页面显示:

image.png

记住的你的Actions secrets名称,我的设置的是ACCESS_TOKEN。这里上面的.github/workflows/ci.yml 里的 ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}配置对应上。

GitHub Pages

接下来,配置GitHub Pages。打开项目仓库中的Settings,找到Pages选项,点击进入配置:

image.png

这样,我们的配置就完成了,然后提交新代码到你的主分支,就会自动构建部署了。部署日志详情见actions

image.png

现在剩下的就是让我们测试演示网站,并确认它可以正常工作。

谢谢观看,撒花✿✿ヽ(°▽°)ノ✿。