【自動化】Github Actionsってなんなん【入門編】

Github Actionsとは

Githubリポジトリと連携しているCI/CD(継続的インテグレーション/継続デリバリー)ツール
これにより、ソフトウェア開発のワークフローの自動化ができる

...ほ？なんのこっちゃ？もう少し解説する

ワークフローってなんなん

プッシュやプルリクエストなどのイベントに応じ、

ワークフローの種類

1. イベント
   リポジトリ内で発生する特定のイベント（例：プッシュ、プルリクエスト、イシューの作成など）に応じてワークフローがトリガーされる

2. ジョブ
   ワークフロー内の複数のタスクをまとめたもの
   各ジョブは独立しており、並行して実行されることもある
   ジョブは一つまたは複数のステップを含む

3. ステップ
   ジョブ内で順番に実行される個々のアクションやコマンド
   各ステップは、具体的なタスクを実する

ワークフローの具体例

name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

      - name: Deploy to production
        run: npm run deploy

各ステップの説明

1. Checkout code
   コードをリポジトリからチェックアウトする
   これは、他のステップでコードにアクセスできるようにするための前提条件

uses: actions/checkout@v2は、GitHubが提供する公式アクションを利用している

2. Set up Node.js
   Node.jsの環境をセットアップする
   uses: actions/setup-node@v2 で指定されたバージョンのNode.jsをインストールする
   with オプションを使って、インストールするNode.jsのバージョンを指定している

3. Install dependencies
   プロジェクトの依存関係をインストールします。
   run: npm install コマンドを実行します。

4. Run tests
   テストを実行する
   run: npm test コマンドを実行する
   このステップでは、Jestを使用したテストが自動的に実行される

5. Deploy to production
   テストが成功した場合、コードを本番環境にデプロイする
   run: npm run deploy コマンドを実行する

このステップは、他のステップが成功した後にのみ実行される

手動テストと自動テストの両方を行うメリット

手動テストと自動テストを併用することで、開発プロセスの信頼性と効率性を高めることができる

手動テストのメリット

1. ユーザ視点の検証
   実際のユーザがどのようにアプリケーションを使用するかをシミュレートすることで、ユーザ体験の質を確認できる
   視覚的なチェックやインタラクションの確認が可能

2. 柔軟性:
   テストが自動化しにくいケースや、新しい機能をテストする際にも迅速に対応可能
   エッジケースや予期せぬ動作の検証が可能

自動テストのメリット

1. 一貫性
   同じテストを何度でも正確に実行できるため、回帰テストに最適
   ヒューマンエラーを排除できる

2. 効率性
   多くのテストケースを短時間で実行できるため、テストプロセスを大幅に効率化可能
   継続的な統合（CI）とデリバリー（CD）パイプラインに組み込むことで、自動でテストとデプロイを実行できる

3. 早期検出
   コードの変更によるバグや問題を早期に発見できることにより、修正が迅速にできる

ハンズオン

手順1: リポジトリの作成
新しいリポジトリを作成する
既存のリポジトリを使用する場合、そのリポジトリに移動

手順2: ワークフローファイルの作成
リポジトリのルートディレクトリに.githubディレクトリを作成する
.githubディレクトリの中にworkflowフォルダを作成、
その中にYAMLファイルを作成します（例：ci.yml）

GithubのリポジトリのページのActionsタブのset up a workflow yourself からも
作成、pushできる

手順3: ワークフローファイルの設定
yamlファイルにワークフローを書く

name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: yarn install

      - name: Run tests
        run: yarn test

yarn installやyarn testの場所に注意
必要に応じてcdコマンドで移動してから実行するように書く

説明

name: ワークフローの名前

on: ワークフローがトリガーされるイベント
この例では、mainブランチへのプッシュイベントでトリガーされる

jobs: ワークフロー内で実行されるジョブの定義

build: ジョブの名前

runs-on: ジョブが実行される環境
　　　　　この例では最新のUbuntuを使用している

steps: ジョブ内で実行されるステップの定義

Checkout code: リポジトリのコードをチェックアウトする

Set up Node.js: Node.jsの環境をセットアップする

Install dependencies: Yarnを使って依存関係をインストールする

Run tests: Yarnを使ってJestテストを実行

手順4: ワークフローファイルのプッシュ
作成したYAMLファイル（例：ci.yml）をリポジトリに追加する
変更をコミットしてプッシュ

手順5: ワークフローの実行結果を確認
GitHubリポジトリのページに移動
リポジトリの上部にある「Actions」タブをクリックする

終わり

これで、作成したワークフローがリストに表示されている
クリックすると、各ジョブやステップの実行結果を確認できる

うおおお成功したああ

そのほかの自動化タスク

1. コードのLintとスタイルチェック

lint.yml

name: Lint

on:
  push:
    branches:
      - main
      - develop
  pull_request:

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install dependencies
        run: yarn install

      - name: Lint and Format
        run: yarn run format

2. セキュリティスキャンと依存の更新

dependabot.yml

name: Dependabot

on:
  schedule:
    - cron: '0 2 * * 1'  # 毎週月曜日の午前2時に実行

jobs:
  security:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: yarn install

      - name: Run security scan
        run: yarn audit

3. コードカバレッジのレポートの生成

coverage.yml

name: Test and Coverage

on:
  push:
    branches:
      - main
      - develop
  pull_request:

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install dependencies
        run: yarn install

      - name: Run tests with coverage
        run: yarn coverage

      - name: Upload coverage report
        uses: actions/upload-artifact@v4
        with:
          name: coverage-report
          path: backend/coverage

最後に

一旦テストの自動化ができたが、
他にも自動デプロイなどもできるため、その辺の設定もでき次第更新します