Checkout アクションを使った GitHub Actions の使い方

はじめに

この実験（Lab）では、GitHub Actions ワークフローにおいて最も不可欠なステップの 1 つである actions/checkout アクションの使用方法を学びます。デフォルトでは、GitHub Actions ランナーは空のディレクトリで開始します。コードをビルド、テスト、またはデプロイするには、まずリポジトリをランナーのワークスペースにチェックアウトする必要があります。

ワークフローファイルを作成し、コードをチェックアウトするように設定し、その後、ログにファイル一覧を表示することでファイルがアクセス可能であることを確認します。このプロセスは、標準的な継続的インテグレーション（CI）パイプラインのセットアップをシミュレートします。

この実験（Lab）は、以前の実験（Lab）で作成したリポジトリを基盤とします。github-actions-demo リポジトリをクローンし、checkout アクションを使用する新しいワークフローを作成します。

ワークフローに actions/checkout@v4 を使用するステップを追加する

このステップでは、リポジトリをクローンし、actions/checkoutアクションを使用するワークフローを作成します。このアクションは、リポジトリを$GITHUB_WORKSPACE以下にチェックアウトするため、ワークフローからアクセスできるようになります。

github-actions-demoの GitHub リポジトリページで、緑色のCodeボタンをクリックします。
HTTPSタブが選択されていることを確認し、URL をコピーします。URL はhttps://github.com/your-username/github-actions-demo.gitのようになります。
LabEx 環境でターミナルを開きます。デフォルトのパスは~/projectです。
git cloneコマンドを使用してリポジトリをダウンロードします。your-usernameは実際の GitHub ユーザー名に置き換えてください。

cd ~/project
git clone https://github.com/your-username/github-actions-demo.git

クローンしたリポジトリに移動します。

cd ~/project/github-actions-demo

.github/workflowsディレクトリ内にci.ymlという名前の新しいワークフローファイルを作成します。

touch .github/workflows/ci.yml

WebIDE エディタで.github/workflows/ci.ymlを開き、以下の内容を追加します。この設定は、「CI」という名前のワークフローを定義し、すべてのプッシュイベントで実行されます。これには、ubuntu-latestで実行されるbuildという名前の単一ジョブが含まれ、コードをチェックアウトするステップが含まれています。

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

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

このuses: actions/checkout@v4の行は、GitHub Actions に対して、公式のチェックアウトアクションのバージョンv4をダウンロードして実行するように指示します。

ls -la コマンドでファイル一覧を表示するステップを追加する

このステップでは、checkoutアクションが正常にファイルを取得したことを確認するために、ワークフローに 2 番目のステップを追加します。標準のシェルコマンドを使用して、現在のディレクトリのファイル一覧を表示します。

.github/workflows/ci.ymlを開き、stepsリストに次のステップを追加します。インデントが前のステップと正しく揃っていることを確認してください。

- name: List files
  run: ls -la

完全な.github/workflows/ci.ymlファイルは次のようになります。

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: List files
        run: ls -la

runキーワードを使用すると、コマンドラインプログラムを実行できます。ここでは、ls -laがリポジトリのルートにあるすべてのファイル（隠しファイルを含む）を一覧表示します。

リポジトリに index.js という名前のサンプルファイルを作成する

このステップでは、リポジトリ内にサンプルファイルを作成します。このファイルは、ワークフローログで確認した際に、actions/checkoutアクションが正しく機能していることの証明となります。

リポジトリのディレクトリにいることを確認します。

cd ~/project/github-actions-demo

リポジトリのルートに index.js という名前のシンプルな JavaScript ファイルを作成します。

echo "console.log('Hello, GitHub Actions!');" > index.js

ファイルが作成されたことを確認するには、以下を実行します。

ls -l index.js

このファイルは、通常 CI パイプラインがビルドまたはテストするアプリケーションのソースコードを表します。

サンプルファイルとワークフローの更新をコミットしてプッシュする

このステップでは、変更をコミットし、GitHub にプッシュします。このコミットをプッシュすると、on: [push] の設定により、定義したワークフローがトリガーされます。

リポジトリのディレクトリにいることを確認します：

cd ~/project/github-actions-demo

リポジトリのステータスを確認し、追跡されていないファイルを確認します：

git status

.github/workflows/ci.yml と index.js が追跡されていない状態になっているはずです。

すべての変更をステージングします：

git add .

説明的なメッセージを付けて変更をコミットします：

git commit -m "Add CI workflow and index.js"

出力例：

[main ... ] Add CI workflow and index.js
 2 files changed, 14 insertions(+), 0 deletions(-)
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 index.js

変更を GitHub 上のリモートリポジトリにプッシュします：

git push

認証に関する注意：
git push を実行すると、WebIDE が自動的に認証を求めます。以下の詳細な手順に従ってください：

"The extension 'GitHub' wants to sign in using GitHub." というメッセージが表示されたポップアップが表示されます。「Allow」をクリックします。
新しい通知が表示されます。「Copy&Continue to GitHub」をクリックし、次のプロンプトで「Open」をクリックします。
開いたブラウザウィンドウで GitHub アカウントにログインし、コピーされた認証コードを入力します。認証を確認した後、ページは自動的に閉じます。
数秒待つと、ターミナルでプッシュ操作が正常に完了したことが確認できます。

プライバシーに関する注意：
WebIDE は認証目的で GitHub アカウントへのフルアクセスを要求します。プライバシーの懸念については心配する必要はありません。現在の実験（lab）が完了すると、LabEx VM は直ちに破棄され、認証情報や認可情報は保持されません。

この認証プロセスでは、ユーザー名や Personal Access Token を手動で設定する必要はありません。

出力例：

Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 4 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 512 bytes | 512.00 KiB/s, done.
Total 4 (delta 1), reused 0 (delta 0), pack-reused 0
To https://github.com/your-username/github-actions-demo.git
   1234567..abcdef1  main -> main

このプッシュにより、GitHub 上でワークフローがトリガーされます。

ワークフローの実行を確認し、ログ内のファイル一覧を検証する

コードをプッシュした後、ワークフローは GitHub 上で自動的にトリガーされます。ワークフロー実行ログを確認することで、checkoutアクションがファイルを正常に取得したことを検証できます。

ウェブブラウザで GitHub 上のリポジトリにアクセスします：https://github.com/your-username/github-actions-demo
リポジトリページの最上部にある Actions タブをクリックします。
ワークフロー実行が一覧表示されているはずで、おそらく「Add CI workflow and index.js」または「CI」という名前です。

注記： コードをプッシュした際、リポジトリ内に複数のワークフローファイルがある場合、複数の Actions がトリガーされることがあります。左側のサイドバーにあるワークフロー名を確認するか、右側のワークフロー実行リストを使用して、正しいワークフロー実行を特定してください。

ワークフロー実行のタイトルをクリックし、次に build ジョブをクリックします。
List files ステップを展開して出力を確認します。

リポジトリ内の index.js やその他のファイルを含む ls -la コマンドの出力が表示されるはずです。

Run ls -la
  ls -la
  shell: /usr/bin/bash -e {0}
total XX
drwxr-xr-x  X runner ... .
drwxr-xr-x  X runner ... ..
drwxr-xr-x  X runner ... .git
drwxr-xr-x  X runner ... .github
-rw-r--r--  X runner ... index.js
...

これにより、actions/checkout ステップがリポジトリを正常にチェックアウトしたことが確認できます。checkout ステップがない場合、ls -la コマンドは空のディレクトリしか表示しません。これは、ワークフローランナーに対してリポジトリファイルを利用可能にするために、checkout アクションが不可欠であることを示しています。

まとめ

この実験（Lab）では、actions/checkout アクションを使用した GitHub Actions ワークフローを正常に作成しました。以下の方法を学習しました。

.github/workflows ディレクトリ構造のセットアップ。
プッシュイベントでトリガーされるワークフローの定義。
actions/checkout@v4 を使用してリポジトリをランナーにクローンする方法。
ls -la を使用してファイルの存在を確認するステップの追加。

これは、ほぼすべての CI/CD パイプラインの基礎となるステップであり、後続のステップでアプリケーションコードのビルド、テスト、デプロイを可能にします。

Checkout アクションを使用した GitHub Actions