npm 包 circle-github-bot 使用教程

阅读时长 9 分钟读完

介绍

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

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

安装

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

使用

初始化

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

CircleCI 配置

  1. 进入 CircleCI 的官网并进行登录。
  2. 选择需要集成的项目,并进入 Settings 页面。
  3. 在页面的左侧栏中,选择 Environment Variables
  4. 点击 Add Environment Variable 按钮,并输入以下内容:
    • KeyGITHUB_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 的文件。这个配置文件中,我们需要在 jobsworkflowscommands 中加入对 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

安装

配置

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

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

构建流程

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

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

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

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

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

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

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

使用

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

总结

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

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

纠错
反馈