GitHub Actions 成果物 - ビルドデータの永続化

はじめに

継続的インテグレーション (CI) パイプラインにおいて、あるジョブが生成したファイル（コンパイル済みバイナリ、webpack バンドル、テストレポートなど）を保持したり、他のジョブと共有したりしたい場合があります。これらのファイルはアーティファクト (artifacts) と呼ばれます。

デフォルトでは、ワークフローの実行中に作成されたファイルは、実行が終了すると失われます。それらを永続化するには、それらをアーティファクトとして「アップロード」する必要があります。

この実験 (Lab) では、dist ディレクトリを作成するビルドプロセスをシミュレートするように Node.js ワークフローを変更し、actions/upload-artifact アクションを使用してそのディレクトリを保存する方法を学びます。

この実験 (Lab) は、以前の実験 (Labs) で作成したリポジトリを基盤としています。github-actions-demo リポジトリを使用します。

ビルドファイルを生成するためのワークフローの更新

このステップでは、ワークフローファイルを変更してビルドプロセスをシミュレートします。dist ディレクトリとダミーの成果物ファイルを作成するステップを追加します。

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

出力例：

Cloning into 'github-actions-demo'...
remote: Enumerating objects: X, done.
remote: Counting objects: 100% (X/X), done.
remote: Total X (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (X/X), done.

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

cd ~/project/github-actions-demo

WebIDE エディタを使用して、新しいワークフローファイル .github/workflows/upload-artifacts.yml を作成します。このファイルは、左側のファイルエクスプローラーの project/github-actions-demo/.github/workflows/ の下にあります。
基本的なワークフロー構造の作成から始めます。ワークフロー名とトリガーを追加します。

name: Upload Artifacts

on: [push]

jobs セクションを追加し、ランナーを指定してビルドジョブを定義します。

jobs:
  build:
    runs-on: ubuntu-latest

steps セクションを追加します。まず、チェックアウトステップを追加します。

steps:
  - uses: actions/checkout@v4

Node.js セットアップステップを追加します。

- name: Use Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20"

依存関係をインストールするステップを追加します。

- name: Install dependencies
  run: npm install

dist ディレクトリと、その内部にファイルを作成するビルドステップを追加します。

- name: Build project
  run: |
    mkdir dist
    echo "This is the build artifact" > dist/build.txt

テストステップを追加します。

- name: Run tests
  run: npm test

完成したファイルは次のようになります。

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test

解説

mkdir dist: dist という名前のディレクトリを作成します。
echo ... > dist/build.txt: コンパイルされたアセットをシミュレートするために、dist の内部にシンプルなテキストファイルを作成します。

変更を加えたら、ファイルを保存します (Ctrl+S または Cmd+S)。

actions/upload-artifact@v4 を使用して dist ディレクトリをアップロードする

いくつかのファイルを生成したので、それらをアップロードする必要があります。公式の actions/upload-artifact アクションを使用します。

.github/workflows/upload-artifacts.yml 内で、ジョブの最後に新しいステップを追加します。

- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: build-assets
    path: dist

完全なファイルは次のようになります。

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test
      - name: Upload build artifact
        uses: actions/upload-artifact@v4
        with:
          name: build-assets
          path: dist

解説

uses: actions/upload-artifact@v4: アップロードを処理するアクションを呼び出します。
name: build-assets: GitHub UI に表示されるアーティファクトの名前です。
path: dist: アップロードするディレクトリ（またはファイル）です。

ファイルを保存します (Ctrl+S または Cmd+S)。

コミット、プッシュを行い、GitHub UI でアーティファクトを確認する

このステップでは、変更をコミットし、GitHub にプッシュします。これにより、更新したワークフローがトリガーされます。

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

cd ~/project/github-actions-demo

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

git add .

変更をコミットします：

git commit -m "Add build step and upload artifacts"

変更を 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 を手動で設定する必要はありません。