🐱

【初心者向け】GitHub Actionsのコードの書き方について丁寧に解説

2024/04/07に公開

Git

GitHub Actionsは、githubリポジトリにあるコードのテスト、ビルド、デプロイといったタスクを自動化することで、ソフトウェア開発の効率を向上させるためのツールです。操作手順が複雑な操作を自動化することによって、人為的なミスをなくして効率的に開発を進めることが、GitHub Actionsを使うメリットとなります。

単語の整理

まず始めに、GitHub Actionsを学ぶにあたって、きちんと理解しておくべき単語について整理しておこうと思います。

ビルド

ビルドという言葉は開発の現場においてよく用いられますが、意外と意味が曖昧な言葉です。ビルドという言葉は、大きく分けて２つの対象に対して用いられます。

①アプリケーションに対して

一般的に、ビルドという言葉はアプリケーションに対して用いられます。例えば、「アプリケーションをビルドする」と言った時には、「アプリケーションを実行可能な形式に変換する」 という意味になります。

具体的には、アプリケーションを構成する複数の.html, .css, .js, .jsx, .vueなどのファイルを、バンドラを用いて１つのファイルに変換することを意味します。TypeScriptを用いて開発している場合には、TypeScriptのコードをJavaScriptに変換する処理も含んでビルドと言う場合もあります。

②Dockerのイメージに対して

近年はDockerを用いて開発することが主流になってきています。Dockerの文脈では、「Dockerのイメージを作成すること」 もビルドと言います。

具体的には、Dockerfile（Dockerのイメージを作るための元となるファイル）からDockerのイメージを作成します。イメージを作成できると、このイメージを元にコンテナを作成することができます。

デプロイ

ビルドされた（つまり、実際に実行できる形式になった）アプリケーションを、実際の運用環境にアップすることを意味します。開発環境、ステージング環境、本番環境のどの環境にアップするかは、目的によって変わります。一般的には、どの環境にアップする場合でもデプロイと言います。

CI（継続的インテグレーション）

CIはContinuous Integration（継続的インテグレーション）の略です。CIは、ソフトウェアのビルドやテストを自動化する手法です。具体的には、featureブランチのコード（自身が機能追加したブランチのことをここではfeatureブランチと呼んでいます。）がgithubにプッシュされたタイミングで自動的にビルドやテストが走るようにすることによって、コードの品質をチェックするといった運用になります。もし自動化されたプロセスのどこかで失敗したら、そのコードは開発用ブランチにマージできないようにするといった運用もできます。そうすることで、一定の品質を担保したコードのみがマージされるようにできます。

CD（継続的デリバリーor継続的デプロイメント）

CDはContinuous Delivery（継続的デリバリー）またはContinuous Deployment（継続的デプロイメント）の略です。masterブランチ（本番用ブランチのことをここではmasterブランチと呼んでいます。）にコードがマージされたタイミングで、そのmasterブランチのコードを自動的に本番環境にデプロイするといったことを行います。こうすることで、人為的なミスを避け効率良くリリース作業ができます。

GitHub Actionsの4つの構成要素

単語の説明が長くなりましたが、ここからはいよいよGitHub Actionsの解説です。
まず、GitHub Actionsの基本概念には「ワークフロー（Workflows）」、「ジョブ（Jobs）」、「ステップ（Steps）」、「アクション（Actions）」といった４つの構成要素があります。これらの構成要素の役割を理解することが、GitHub Actionsを理解する上での鍵になります。

それでは４つの構成要素を、大きいものから順に解説していきます。

ワークフロー（Workflows）

ワークフローはGitHub Actionsの４つの構成要素の中で、最も大きな単位です。

ジョブ（Jobs）

ジョブは、ワークフロー内で実行される一連のタスクの集まりです。

ステップ（Steps）

ステップはジョブ内で実行される個々のタスクです。

アクション（Actions）

アクションはGitHub Actionsの最小の構成要素です。アクションを使用することで、独自のカスタムタスクを作成したり、他のユーザーが作成したアクションを利用したりできます。公式のアクションはGitHub Marketplaceで提供されており、様々な開発ツールやサービスと連携することが可能です。

実践と解説

といっても、上記の説明だけだとまだよくわからないと思いますので、次に実践的な例をご紹介します。
まず、リポジトリを用意した後に、以下のようなYAMLファイルを作成します。.github/workflows直下に書いたYAMLファイルがワークフローとして認識されます。

.github/workflows/ci.yml

name: Workflow

on:
  pull_request:
    branches:
      - develop
      - master
      
jobs:
  frontend-ci:
    runs-on: ubuntu-latest
    container: node:20.10.0-buster-slim

    defaults:
      run:
        working-directory: ./

    steps:
      - name: check out repositry
      - uses: actions/checkout@v4

      - name: setup node
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: install 
        run: npm install

      - name: eslint
        run: npm run lint

      - name: test
        run: npm run test

      - name: build
        run: npm run build

次に、上記のYAMLファイルがやっていることを順番に解説していきます。

name: Workflow

Workflowという名前でワークフローを定義しています。

on:
  pull_request:
    branches:
      - develop
      - master

developもしくはmasterブランチにプルリクエストされた場合は、このワークフローを実行します。

jobs:
  frontend-ci:

frontend-ciという名前のジョブを定義します。

runs-on: ubuntu-latest

frontend-ciというジョブを実行する際に、Ubuntuの最新版であるubuntu-latestという実行環境を使用します。

container: node:20.10.0-buster-slim

Dockerのコンテナには、node:20.10.0-buster-slimというものを使用します。

defaults:
  run:
    working-directory: ./

ワークフロー内の全てのrunステップで使用されるデフォルトの動作設定を定義しています。具体的には、working-directory: ./はGitHub Actionsがコマンドを実行する際のデフォルトの作業ディレクトリを指定しています。

steps:

ステップを定義しています。ステップの中には、複数のアクションを定義することができます。

- name: check out repositry
- uses: actions/checkout@v4

check out repositryという名前でアクションを定義しています。nameをつけると、github actions上でそのアクション名が表示されるので、実際にgithub actionsを使うときに見やすくなります。実際にやっていることはusesで記載しており、ここではレポジトリのソースコードをチェックアウトしています。なお、今回のactions/checkout@v4というアクションは、Githubが公式に用意しているアクションです。こういったアクションは、Marketplaceで確認できます。（興味のある方は、上記のリンク先から確認してみてください。）

- name: setup node
  uses: actions/setup-node@v4
    with:
      node-version: '20'

node.jsを設定しています。withではパラメータを設定することができ、ここではnode.jsのバージョンを指定しています。

- name: install 
  run: npm install

runはlinuxコマンドを実行することができます。ここではnpmのライブラリをインストールしています。

- name: eslint
  run: npm run lint

ESLintの実行。

- name: test
  run: npm run test

単体テストの実行。

- name: build
  run: npm run build

コードのビルド。

以上になります。特にツールを新たに導入することなくこのような作業を自動化できるので、Github Actionsがとても便利なことがお分かり頂けたらかと思います。

Github Actions以外のツール

ちなみに、Github Actions以外だと以下のようなものもあります。

CircleCI
Jenkins
Travis CI
GitLab CI

参考

まとめ

GitHub Actionsを活用することで、開発効率を高めることができます。ソフトウェアのビルド、テスト、デプロイなどを効率的に管理することが可能になります。

Xについて

僕のXアカウントでは、主にweb開発、AI、会社経営のノウハウについて発信しています。もし興味があれば、フォローしていただけると嬉しいです。

プログラミング学習サポート&キャリア相談について

プログラミング学習サポート&キャリア相談も始めました。興味のある方はこちらから詳細をご覧ください。