💡

人生で初めてCI作ったので記事にしてみる

に公開

はじめに

これまでPHP,Pythonを使ったWebアプリケーションの開発業務を主に行ってきましたが,CIを作ったことがありませんでした。
今回、コミュニティのOSSに対して、GitHub Actions を使用したCIの導入をしたため備忘録を兼ねて記事にしたいと思います。

CI/CDの概要

  • 開発者がコードを書いた際、その変更を迅速かつ自動的にビルド、テストし、本番環境にデプロイする一連のプロセスや仕組みのこと

RedHatさんのドキュメントがまとまっていて良かったです。
今回はCIの導入なので継続的インテグレーションですね。
https://www.redhat.com/ja/topics/devops/what-is-ci-cd
https://www.redhat.com/ja/topics/devops/what-cicd-pipeline

GitHub Actionsの概要

  • すごくざっくり表現すると、GitHub上でCI/CDパイプラインが実行できるサービスです

さくらインターネットさんの記事と公式のドキュメントが参考になりました。
https://knowledge.sakura.ad.jp/23478/
https://docs.github.com/ja/actions

また、CI/CDのワークフローテンプレートをまとめたリポジトリがあるので、それを見てみると各言語でよくある構成がわかります。
starter-workflows/ci at main · actions/starter-workflows · GitHub

今回作成したCI

※名前等は仮のものです

.github/workflows/ci.yml
name: CI Pipe # プロジェクト名(ここでは例としてCI Pipeとしている)

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main # PRのターゲットブランチ

jobs:
  build_and_test: # ジョブの名前
    runs-on: ubuntu-latest # ジョブを実行する仮想環境

    steps:
      - name: Checkout repository # ステップ名:リポジトリのチェックアウト
        uses: actions/checkout@v5

      - name: Install Bun # ステップ名:Bunのインストール
        uses: oven-sh/setup-bun@v2 # Bunをセットアップする公式アクション
        with:
          bun-version: latest # Bunのバージョンを指定(例: '1.0.0' または 'latest')

      - name: Install dependencies # ステップ名:依存関係のインストール
        run: bun install # bun installを使用

      - name: Run Linter # ステップ名:Linterの実行
        # package.jsonで定義されている 'lint' スクリプトを実行します。
        run: bun run lint

      - name: Run Prettier Check # ステップ名:Prettierフォーマットチェックの実行
        # package.jsonで新しく定義した 'format:check' スクリプトを実行しコードがPrettierのルールに従ってフォーマットされているかを確認します。
        run: bun run format:check

      - name: Run Type Check # ステップ名:型チェックの実行
        # package.jsonで定義されている 'typecheck' スクリプトを実行します。
        run: bun run typecheck

      - name: Run Tests # ステップ名:自動テストの実行
        # package.jsonで定義されている 'test' スクリプトを実行します。
        run: bun run test

CIパイプラインの各ステップの説明

今回作成したCIパイプラインはbuild_and_testという名前のジョブとして定義されており、ubuntu-latestつまり、ubuntuの最新バージョンの仮想環境で実行されるということです。

1. Checkout repository

  • 目的: GitHubリポジトリからプロジェクトのコードを仮想環境にチェックアウト(取得)します。

  • 使用アクション: actions/checkout@v5


2. Install Bun

  • 目的: プロジェクトの実行環境としてBunをセットアップします。

  • 使用アクション: oven-sh/setup-bun@v2

  • バージョン: latestバージョンのBunがインストールされます。


3. Install dependencies

  • 目的: package.jsonファイルに定義されているプロジェクトの依存関係をインストールします。

  • 実行コマンド: bun install


4. Run Linter

  • 目的: コードの静的解析を実行し、コードスタイルや潜在的な構文エラー、バグなどを検出します。

  • 実行コマンド: bun run lint (これはpackage.jsonに定義されたlintスクリプトを実行します)


5. Run Prettier Check

  • 目的: コードがPrettierのフォーマットルールに従っているかを確認します。これにより、プロジェクト全体のコードの一貫性を保ちます。

  • 実行コマンド: bun run format:check (これはpackage.jsonに新しく定義されたformat:checkスクリプトを実行します)

format:checkについて

Pritterのprettier --checkオプションを使用しています。
Pritterの実行時には様々なオプションがあり、--checkオプションで実行した場合はメッセージとフォーマットされていないファイルのリストが得られます。
https://prettier.io/docs/cli


6. Run Type Check

  • 目的: TypeScriptプロジェクトにおいて、型に関するエラーがないか検証するための型チェックを実行します。

  • 実行コマンド: bun run typecheck (これはpackage.jsonに定義されたtypecheckスクリプトを実行します)


7. Run Tests

  • 目的: プロジェクトの自動テストスイートを実行し、アプリケーションの機能が期待通りに動作するかを検証します。

  • 実行コマンド: bun run test (これはpackage.jsonに定義されたtestスクリプトを実行します)

動いてるイメージ

実際に動いているのを見るとかなり嬉しいです。

まとめ

今回はテストを自動実行するコマンド設定などは他の方がすでに設定してくれていたので、実行する環境を構築し、実行するという流れで進められました。

初めてのOSSへのPRということもあって緊張もありましたが非常に学びが多かったです。

備考

今回PRを出したコミュニティOSS
https://github.com/tyamahori/higuma-notify

Discussion