npm 包 circle-github-bot 使用教程

介绍

CircleCI 是一款基于云的持续集成和部署工具，而 circle-github-bot 则是一个便于集成 CircleCI 与 GitHub 的 npm 包，目的是在 GitHub 上面创建 pull request 和 merge request 的时候，自动触发 CircleCI 的构建流程。

本文将为大家详细介绍如何使用 npm 包 circle-github-bot。

安装

使用 npm 包管理器 npm 进行安装。

npm install circle-github-bot

使用

初始化

在使用 circle-github-bot 之前，我们需要在 CircleCI 和 GitHub 上分别进行配置。

CircleCI 配置

1. 进入 CircleCI 的官网并进行登录。
2. 选择需要集成的项目，并进入 Settings 页面。
3. 在页面的左侧栏中，选择 Environment Variables。
4. 点击 Add Environment Variable 按钮，并输入以下内容：
   • Key：GITHUB_TOKEN
   • Value：你的 GitHub personal access token（需要包含对该仓库的 push 权限）
   • Scope：该变量的 scope 选项卡需要设为 All。

GitHub 配置

1. 进入 GitHub 的官网并进行登录。
2. 进入需要集成的项目，并点击 Settings 按钮。
3. 在页面的左侧栏中，选择 Webhooks。
4. 点击 Add webhook 按钮，并输入以下内容：
   • Payload URL: https://circleci.com/api/v1.1/project/{vcs-type}/{account}/{repo}/tree/{branch}?circle-token={circle-token}
   • Content Type: application/json
   • Secret: 任意字符
   • Events：选择 Just the push event.。

其中，{vcs-type} 代表代码托管的类型，如 github，{account} 和 {repo} 分别代表 GitHub 上的账户名和仓库名，{branch} 表示要监测的分支，{circle-token} 为 CircleCI 的 API Token。

这些都是配置 CircleCI 项目和 GitHub webhook 所必须的参数，需要自行替换成自己项目的对应信息。

构建流程

在 CircleCI 的项目中，创建一个名为 .circleci/config.yml 的文件。这个配置文件中，我们需要在 jobs、workflows、commands 中加入对 circle-github-bot 库的使用指令。

-- -------------------- ---- -------
- --------------------
-----
  ------
    --- ---------
    ------
      - --------
      - ----
          ----- -----
          -------- --- --- -----
      - ----
          ----- ----
          -------- --- ----

----------
  -------- -
  ------
    -----
      - -----

---------
  - ----- ----------------- -------
  -------
    ------
      - ----
          ----- -----------------
          -------- --- -----------------

在 commands 中增加了使用 circle-github-bot 库的 deploy 指令。

配置参数

接下来，需要在项目的 package.json 文件中，添加 circle-github-bot 的配置信息。

-- -------------------- ---- -------
- ------------
-
  ---
  -------------------- -
    -------- ------ -------- --- --------
    -------- ------ ------ ------- -------
    ------- ------ ------ ---------- -------
    --------------- ----- ------ ---- --- ---- -------- -- --------
    ----------------- ----- ------- -- ------- -------------
    -------------- ----- ------- -- -------
    ------------------- ----- ------- -- --- ------ ------------
    ---------------- ----- ------- -- --------
  -
-

其中最重要的四个参数分别是：

• token：必须填写，可以在项目的 Project Settings -> API permissions 中找到。
• owner：必须填写，GitHub 上项目所属用户的名字。
• repo：必须填写，GitHub 上项目的名字。
• remoteBranch：如果不填写，则默认取当前分支的名字。

示例代码

以一个服务器渲染的 React 应用为例，以下示例代码将展示如何安装和使用 circle-github-bot。

安装

npm install circle-github-bot

配置

在项目的 package.json 文件中，我们增加以下的 circle-github-bot 配置信息。

-- -------------------- ---- -------
- ------------
-
  ---
  -------------------- -
    -------- ------ -------- --- --------
    -------- ------ ------ ------- -------
    ------- ------ ------ ---------- -------
    --------------- ----- ------ ---- --- ---- -------- -- --------
    ----------------- ---- ---------
    -------------- ---- --- ------
    ------------------- ---- --- -------
    ---------------- ---- --- ------
  -
-

构建流程

在 CircleCI 项目中，我们创建一个 .circleci/config.yml 文件，并进行以下配置。

-- -------------------- ---- -------
- --------------------
-----
  --------
    -------
      - ------ ----------------
    ------
      - --------
      - ----
          ----- -------
          -------- --- --

  -----
    -------
      - ------ ----------------
    ------
      - --------
      - ----
          ----- ----
          -------- --- --- ----
      - ----
          ----- ----
          -------- --- --- ----

  -------
    -------
      - ------ ----------------
    ------
      - --------
      - ----
          ----- ------- ------------
          -------- ---- -------------------------------- ---
      - ----
          ----- ----
          -------- ---- ----------------------------- ---
      - ----
          ----- -----
          -------- ---- ---------------------------------- ---
      - ----
          ----- ------- ------
          -------- ---- ------------------------------- ---

----------
  -------- -
  ------
    -----
      - -------
      - ----
      - -------
          ---------
            - ----
          --------
            ---------
              ----- --- ------------------------------ --

---------
  -------
    ------
      - ----
          ----- -----------------
          -------- --- -----------------

其中，我们在 deploy 中使用了从 circle-github-bot 中导入的命令参数，并在命令中按照参数进行操作。

使用

在项目的根目录中，执行以下命令即可启动 CircleCI 自动构建流程。

npx circle-github-bot

总结

本文通过详细的步骤，介绍了如何使用 npm 包 circle-github-bot。通过这个包，我们可以方便地在 GitHub 上创建 pull request 和 merge request 时，自动触发 CircleCI 的构建流程。这不仅可以提高我们的工作效率，也可以方便我们进行持续集成和持续部署。希望本文能对前端开发者的工作有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f76bc087116197505561a91