マージキューを使用した緊急プルリクエストの対応

緊急プルリクエストの扱いは、アジャイルやDevOpsの慣行が登場してから開発者コミュニティで議論の的となっています。

このような状況では、通常のPRよりもこれらの「緊急」リクエストを優先するシステムが必要であり、必要に応じて一部のCIチェックを延期できることが望ましいです。

良い戦略の一つは、別のマージキューを実装することで、CIテストが合格していない段階で既定のキューより先に進み、緊急の修正を生産環境に迅速に移行できるようにすることです。

本記事では、PRラベルによってトリガーされるMergifyを使用して2つのマージキューを作成します。通常のPR用のものと、緊急PR用のものの2つを設定します。

それでは、袖をまくって始めましょう！

このデモでは、シンプルなReactアプリケーションを初期化します。またCIにはCircleCIを使用します。

2つのマージキューを作成します。

• default: すべてのPRは通常通りこのキューを通過します。処理前にCircleCIチェックが必要です。
• urgent: このキューは、PRに緊急ラベルが付いている場合にのみ使用されます。これにより、CircleCIチェックを実行せずにdefaultキューのPRの先頭にジャンプできます。

このような設定で、緊急ラベルが付いたプルリクエストは、CIが実行される前にキューに入ります。

それは既定のキューの先頭に位置します。Mergifyは必要に応じてプルリクエストのベースブランチを更新し、CIが合格するのを待ち、その後プルリクエストをマージします。

開発チームから見ても、これはかなり簡単なプロセスです。開発者はPRを作成する際にurgentラベルを追加するだけで、プロセスを加速させることができます。

プロジェクトのセットアップ

プロジェクトのセットアップから始めましょう。create-react-appを使用して新しいReactアプリケーションを作成します。

mkdir emergency-pr-demo
cd emergency-pr-demo
git init
npx create-react-app .

参考までに、CIとMergifyの設定を追加した後の最終的なプロジェクト構造はこちらです。

emergency-pr-demo/
├── .circleci
│   └── config.yml
├── README.md
├── package-lock.json
├── package.json
├── .gitignore
├── .mergify.yml
├── .vscode
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

CI設定の作成

テストを実行するためにCircleCIを使用します。設定が簡単で始めやすいです。

ここでは、プロジェクトのルートに新しい.circleciディレクトリにconfig.ymlファイルを作成します。

シンプルなジョブbuild_and_testを作成し、まずプロジェクトが期待どおりにビルドされているかを確認し、次にnpm run testコマンドで単体テストを実行します。

version: 2.1
orbs:
  node: circleci/[email protected]

jobs:
  build_and_test:
    executor: node/default
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          command: npm run test
          name: Run tests
      - run:
          command: npm run build
          name: Build app
      - persist_to_workspace:
          root: ~/project
          paths:
            - .

workflows:
  test_my_app:
    jobs:
      - build_and_test

Mergify設定の作成

次はMergifyの設定ファイルを作成する時間です。

Mergifyは、事前定義されたルールと条件に基づいてプルリクエストのマージプロセスを自動化するツールです。

計画通り、設定ファイルでurgentとdefaultの2つのキューを定義する必要があります。

双方とも同じmerge_conditions, check-success=ci/circleci: build_and_testを持っており、これはコードがbuild_and_testチェックをCircleCIで無事に通過しなければマージできないことを意味します。

pull_request_rulesセクションでは、プルリクエストの処理方法が概説されています。プルリクエストに緊急ラベルが付いている場合、緊急キューに配置されます。そうでなければ、デフォルトのキューに入ります。

.mergify.yml

queue_rules:
  - name: urgent
    merge_conditions:
      - "check-success=ci/circleci: build_and_test"

  - name: default
    merge_conditions:
      - "check-success=ci/circleci: build_and_test"

pull_request_rules:
  - name: move to urgent queue when label urgent
    conditions:
      - base=main
      - label=urgent
    actions:
      queue:
        name: urgent

  - name: merge using the default queue after running the CI checks
    conditions:
      - base=main
      - "check-success=ci/circleci: build_and_test"
      - label!=urgent
    actions:
      queue:
        name: default

リポジトリの設定

いいえ、私たちはGitHubで新しいリポジトリを作成します。

その後、最初のコミットを作成し、以下のコマンドを使用してコードをプッシュする必要があります：

git add .
git commit -m "Initial commit"
git remote add origin <REPO_URL>
git push -u origin master

次に、CircleCIを設定する必要があります。このためにCircleCIダッシュボードにアクセスし、プロジェクトセクションに移動してプロジェクトを設定します。

また、mainブランチを指定する必要があります。この場合、CircleCIは自動的にconfigファイルを検出します。

dashboard.mergify.comまたはgithub.com/apps/mergify/installations/newにアクセスしてGitHubアカウントでログインすることで、GitHubアカウントにMergifyをインストールできます。

その後、Mergifyにアクセス権を与えたいリポジトリを選択できます。

設定が完了すると、Mergify ダッシュボードで両方のキューを確認できるようになります。

最初のPR（通常のPR）を立てる

それでは、最初のPRの作成から始めましょう。まず新しいブランチ regular-pr を作成します。

git checkout -b regular-pr
git add .

デモ目的のため、App.css ファイルにクラスを追加します。

.Regular-change-class {
    background-color: white;
}

その後、コミットを行い、変更をGitHubにプッシュします。

git commit -m 'regular CSS change'
git push --set-upstream origin regular-pr

次に、タグなしでプルリクエストを立てます。

2つ目のPR（緊急PR）を立てる

ここで新しいブランチ urgent-pr を作成し、変更を加えます。

git checkout main
git branch -b urgent-pr

まず、新しいコンポーネント Urgent.js を作成する commit を行います。

import React from "react";

export default function Urgent() {
  return <div>This is an Urgent Change</div>;
}

次に、この (urgent-pr) ブランチをGitHubリポジトリにプッシュします。

git add .
git commit -m 'Create a component for Urgent change'
git push --set-upstream origin urgent-pr

その後、リポジトリにアクセスして、urgent-pr ブランチから main ブランチへ新しいPRを立て、新しいラベル urgent を追加します。

Mergifyは自動的に2つ目のPRを urgent キューに配置し、CIチェックを実行して main ブランチとマージします。

その後、最初のPRを自動的にマージします。

参考のためにGitHubリポジトリをチェックアウトできます: github.com/hugoescafit/emergency-pr-demo

結論

今回は以上です！

このチュートリアルでは、Mergifyの助けを借りてデフォルトおよび緊急の2つの異なるマージキューを設定するプロセスを探りました。また、CircleCIの助けを借りてCIチェックを設定する方法も見てきました。緊急のPRを通常のものより優先させる方法も見てきました。

緊急プルリクエストの管理には他にも様々な解決策があります。例えば、特別なホットフィックスブランチを作成したり、専用のレビュアーを割り当てたり、チェックを手動で上書きしたりする方法です。しかし、マージキューはこの問題を扱うための最良で実装が容易な戦略の一つです。

アプリケーションにマージキューを追加するためにMergifyを訪れてください！