pushしたらGitHubが自動でコマンドを動かす

pushしたらGitHubが自動でコマンドを動かす

Hello World ハンズオン

GitHub Actions を「とりあえず一度動かして、緑✓を見る」

このハンズオンのゴール

今日やることは、たった1つです。

> push したら、GitHub のサーバが自分の代わりにコマンドを実行し、

> Actions タブで緑の✓と、ログに Hello, World! が出るのを確認する。

• 理論や仕組みの細かい話は 解説資料 に置いてあります
• ここでは「動かして、緑を見る」体験だけに集中します
• テスト・デプロイ・複雑な設定は 今日は一切出てきません

イメージ: pushすると何が起きるか

自分のPCで git push すると、GitHub 側に置いた「指示書」を見て、

GitHub のサーバがコマンドを代わりに実行してくれます。

[自分のPC]  --- git push --->  [GitHub]
                                  |
                                  | 指示書(ci.yml)を読む
                                  v
                          [GitHubのサーバ]
                          echo "Hello, World!" を実行
                                  |
                                  v
                        Actionsタブに 緑✓ とログが残る

• 自分のPCでは何も動きません。動くのはGitHub側のサーバです
• この「指示書」が .github/workflows/ci.yml というファイルです

指示書 (ci.yml) の中身

配布物 starter/.github/workflows/ci.yml には、これが入っています。

name: Hello CI
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Say Hello
        run: echo "Hello, World!"
      - name: Show date
        run: echo "今日の日付: $(date)"

今日はこれを そのまま動かす だけです。書き換えは後半のドリルで。

手順0: 配布物を開く

配布された zip を ダウンロードフォルダなどに解凍し、できた starter フォルダを開きます。

解凍したフォルダの上で右クリック →「ターミナルで開く」(Mac は Finder の該当フォルダで Control+クリック → サービス →「フォルダに新規ターミナル」)。

# starter フォルダに移動する
cd starter

# 中身を確認する(.github もドット始まりだが -a で見える)
ls -la
ls -la .github/workflows

• .github/workflows/ci.yml が表示されればOKです
• ここではまだ Git のコマンドは打ちません(git status はこの段階ではエラーになります)

> .github はドット始まりなので Finder/エクスプローラーでは隠れがち。ls -la で確認するのが確実です。

手順1: GitHub に空のリポジトリを作る

ブラウザで GitHub を開いて、新しいリポジトリを作ります。

1. GitHub 右上の 「+」→ New repository
2. Repository name に好きな名前(例 hello-actions)を入力
3. Public を選ぶ ← ここが重要
4. README などは 追加しない(チェックを全部外す)
5. Create repository を押す

> なぜ Public か: Actions の無料利用枠が広く、今日のハンズオンで詰まりにくいからです。

作成後の画面に出る HTTPS の URL を、次の手順で使います。

手順2: push する (前半)

starter フォルダの中で、順番にコマンドを打ちます。

# このフォルダを Git 管理にして、ブランチ名を main にする
git init -b main

# 全ファイルを追加する(.github も含まれる)
git add .

# .github/workflows/ci.yml が追加されているか確認する
git status

# コミットする
git commit -m "first commit: hello actions"

• git status の "Changes to be committed" に .github/workflows/ci.yml が出ていればOK
• git add . で .github/workflows/ci.yml も一緒に追加されます
• ここまではまだ自分のPCの中だけの作業です

手順2: push する (後半)

手順1で作ったリポジトリの URL をつなぎます。

# <URL> は手順1の画面に出ていた HTTPS URL に置き換える
git remote add origin <URL>

# main ブランチを push する
git push -u origin main

• <URL> は https://github.com/自分の名前/hello-actions.git のような形です
• push が成功すると、ファイルが GitHub 側にアップされ、自動で指示書が動き始めます

手順3: Actions タブで緑✓を見る

push できたら、ブラウザでリポジトリのページを開きます。

1. リポジトリ上部のメニューから Actions タブをクリック
2. 一覧の一番上に、さっきのコミット名(first commit: hello actions)が出ます
3. 最初は黄色い丸(実行中)→ しばらくすると 緑の✓ に変わります
4. その行をクリックすると、実行の詳細が開きます

• 緑✓ = 指示書のコマンドが最後まで成功した、という印です
• まだ黄色なら、少し待ってからページを更新してください

手順4: ログに Hello, World! を見つける

詳細画面で、実際に出力されたログを確認します。

1. 詳細画面の左側に hello という名前のジョブがあります → クリック
2. Say Hello という行をクリックして開く
3. 中に Hello, World! と表示されていれば成功です
4. Show date の行を開くと、今日の日付: ... が出ています

> ここで見ている文字は、自分のPCではなく GitHub のサーバが実行した結果 です。これがCIの第一歩です。

動いた指示書をざっくり読む

緑✓を見られたところで、さっきの ci.yml を3行だけ振り返ります。

行	意味
name: Hello CI	この自動化の名前(Actionsタブに表示される)
on: push	いつ動くか → main に push したとき
run: echo "Hello, World!"	何をするか → このコマンドが実行された

• runs-on: ubuntu-latest = GitHub が用意する Linux サーバで動く、という意味
• jobs: の下の hello: が、今回の作業のまとまりの名前です

うまくいかないときは

よくある詰まりどころです。

• Actions タブに何も出ない

→ .github/workflows/ci.yml が push できているか、GitHub の Code 画面で確認

• 赤い✗になった

→ 詳細を開いて、赤くなっている行をクリックするとエラー内容が読めます

• push でエラーが出る

→ git remote -v で URL が正しいか確認、リポジトリが Public か再確認

> 焦らず「どの行が赤いか」だけ見れば、原因はほぼ特定できます。

ドリル1: 名前を出してみる

ここまでできたら、指示書を少しだけ書き換えます。

.github/workflows/ci.yml の Say Hello の行を、自分の名前に変えます。

      - name: Say Hello
        run: echo "Hello, さとう!"

そして、また push します。

git add .
git commit -m "ドリル: 名前を出す"
git push

• Actions タブを開いて、緑✓ と、ログに 自分の名前 が出れば成功です
• 「push するたびに自動で動く」感覚をここでつかみます

ドリル2: 出力を2行に増やす (余裕があれば)

さらに余裕があれば、run: を2行に増やしてみます。

      - name: Say Hello
        run: |
          echo "Hello, さとう!"
          echo "GitHub Actions、はじめました"

• run: | と書くと、その下に 複数行のコマンド を並べられます
• push して、ログに2行とも出ていれば成功です

> 「echo を増やす = サーバにやらせる作業を増やす」だけです。仕組みは同じです。

次は何ができる?

今日やったのは echo で文字を出すだけでした。

でも、この echo の部分を別のコマンドに変えるだけ で、できることが一気に広がります。

• echo を デプロイのコマンド に変えると → push するだけで公開される(これがCD)
• echo を テストのコマンド に変えると → push するたびに自動テスト(これがCIの本命)

> 仕組み(push → サーバが実行 → 緑✓)の詳しい話と、デプロイへの発展は 解説資料 / SWA教材 で扱います。

おつかれさまでした

今日のゴール: push して、Actions タブで緑✓と Hello, World! を確認する

これができれば、CI/CD の入り口は通過です。