NTT DATA TECH
🐣

GitHub Actionsで静的HTMLをGitHub Pagesへ自動デプロイしてみた [CI/CD]

or
に公開
GitHub
CI/CD
tech

はじめに

「CI/CD ってなんだかふわっとしていてよくわからない」
「実際にどんな流れで動くのかイメージしづらい」

こんな思いから、今回は GitHub Actions を使って静的 HTML を GitHub Pages に自動デプロイする最小構成の CI/CD を試してみたので、記事にまとめます。

本格的な運用設計ではなく、最小の CI/CD を一度動かして、Pull Request から公開までの流れをざっくりつかむことが目的です。

この記事でわかること

  • CI/CD の基本的な考え方
  • GitHub Actions の役割
  • Pull Request 作成から GitHub Pages デプロイまでの流れ

この記事の想定読者

  • CI/CD という言葉は聞いたことがあるものの、自分で作って動かしたことはない人
  • GitHub Actions を使った基本的な自動化の流れをつかみたい人
  • まずは簡単な構成で CI/CD を試してみたい人

CI/CD とは

まずは、CI/CD の基本的な考え方を整理してみます。

CI（Continuous Integration）
継続的インテグレーションと呼ばれており、コードの変更を継続的に取り込み、変更に問題がないか検証を繰り返す考え方です。

CD（Continuous Delivery / Continuous Deployment）
継続的デリバリー、または継続的デプロイメントと呼ばれており、本番環境へ即座に反映できる状態を整えること、または本番環境への反映までを自動化することを指します。

CI/CD のメリットは、主に次のような点です。

  • 変更に強くなる
    継続的にリリースしやすくなり、繰り返し発生する作業のコストも下げやすくなります。
  • 品質を保ちやすい
    build や test を自動で実行できるため、バグを早い段階で見つけやすくなります。
  • 手作業が減って、ミスが減る
    build、test、deploy などの繰り返し作業を自動化できるので、ヒューマンエラーを防ぎやすくなります。
  • 作業時間を短縮できる
    リリースまでの時間が短くなり、開発者は設計や改善に注力できるようになります。

GitHub Actions とは

GitHub Actions は、GitHub 上でさまざまなワークフローを自動実行できる仕組みです。
GitHub Actions を使えば、pull_request や push などのイベントをきっかけに、YAML ファイルで定義した処理を自動で実行できます。

今回試した CI/CD の構成

今回の流れはシンプルで、次のようになっています。

  1. feature ブランチで変更する
  2. Pull Request を作成する
  3. CI で HTML と workflow の記述をチェックする
  4. main にマージする
  5. CD で GitHub Pages へデプロイする

最終的なフォルダ構成は以下のようになります。

github-actions-cicd-practice/
├─ README.md
├─ index.html
└─ .github/
  └─ workflows/
    ├─ ci.yml
    └─ cd.yml

実装してみた

まずは GitHub 上で、静的 HTML を公開するための最小構成を用意します。

1. GitHub でリポジトリを作る

検証用のリポジトリを 1 つ作ります。
今回は、github-actions-cicd-practice というリポジトリを作りました。

2. index.html を用意する

公開する HTML は次のようにしました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub Actions CI/CD Practice</title>
  </head>
  <body>
    <h1>GitHub Actions CI/CD Practice</h1>
    <p>CI/CD の動作確認用ページです。</p>
  </body>
</html>

3. CI 用 workflow を作る

.github/workflows/ci.yml という名前で YAML ファイルを作りました。

name: CI

on:
  pull_request:
    branches:
      - main

jobs:
  lint:
    runs-on: ubuntu-latest

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

      - name: Install actionlint
        run: |
          curl -sSfL https://raw.githubusercontent.com/rhysd/actionlint/main/scripts/download-actionlint.bash | bash

      - name: Run actionlint
        run: ./actionlint

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

      - name: Install HTMLHint
        run: npm install -g htmlhint

      - name: Check HTML
        run: htmlhint "*.html"

ここでは、main ブランチ向けの Pull Request をトリガーに処理を実行しています。
まず actions/checkout@v4 でリポジトリのコードを取得します。
その後、actionlint で GitHub Actions の workflow の記述をチェックし、HTMLHint で HTML ファイルの記述をチェックします。

4. CD 用 workflow を作る

次に、デプロイを自動実行するため、.github/workflows/cd.yml というファイルを作りました。

name: CD

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Prepare artifact
        run: |
          mkdir -p dist
          cp index.html dist/index.html

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist

      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

この workflow は、main ブランチへの push をきっかけに実行されます。
コードを取得し、公開用のファイルを用意したあと、GitHub Pages に自動デプロイします。

5. GitHub Pages を GitHub Actions に設定する

GitHub 上で Settings → Pages を開き、Build and deployment の Source を GitHub Actions に設定しておきます。

実際に動かしてみた

設定が終わったら、次は Pull Request と main へのマージを行い、CI/CD が実際に動くかを確認します。

1. 作業ブランチを作る

今回は Pull Request を起点に CI を動かしたいので、まずは作業ブランチを作ります。
今回は、feature/update-text という名前でブランチを作成しました。

2. index.html を少し変更する

次に、公開対象のファイルに小さな変更を入れます。
CI/CD の流れを確認することが目的なので、文言を少し変えただけです。

<p>CI/CD の動作確認用ページです。</p>

を、

<p>GitHub Actions で CI/CD の動作確認をしています。</p>

のように変更しました。

3. Pull Request を作る

変更をコミットしたら Pull Request を作成します。
ここで pull_request イベントが発火し、ci.yml が実行されます。

4. CI が成功することを確認する

Pull Request 作成をきっかけに ci.yml が実行され、問題なく CI が通ったことを確認できました。
以下のように緑ランプが点灯していれば成功です。

5. main にマージする

CI が通ったら、main にマージします。
今回の cd.yml は main への push をトリガーにしているので、ここで初めて CD が動きます。

6. CD が成功することを確認する

main にマージすると、今度は cd.yml が実行されます。
実行結果を確認すると、deploy ジョブが succeeded となっており、Deploy to GitHub Pages まで正常に完了していることがわかります。
GitHub Pages への自動デプロイが成功したと確認できました。

ちなみに、デプロイが失敗していると、以下のように赤く×が点灯します。

7. Pages の公開 URL を開く

最後に、GitHub Pages の公開URLにアクセスします。
更新した内容のページが表示されていれば、自動デプロイが完了したとわかります。

まとめ

今回は、静的 HTML を題材に GitHub Actions で CI と CD を分けた最小構成を試しました。

Pull Request 作成時には actionlint と HTMLHint によるチェックを実行し、main へのマージ後には GitHub Pages への自動デプロイを行っています。

試してみた感想

複雑な構成を作らなくても、自動デプロイまでの流れを実際に試してみるだけで、少しイメージがふくらみました。

いきなり複雑なアプリを作って試すのはハードルが高いですが、どのように動くのか簡単に見てみたい場合、まずはこのくらい小さく試してみるのがいいな！と思いました。

参考

NTT DATA TECH
NTT DATA TECH

NTT DATA公式アカウントです。 技術を愛するNTT DATAの技術者が、気軽に楽しく発信していきます。 当社のサービスなどについてのお問い合わせは、 お問い合わせフォーム nttdata.com/jp/ja/contact-us/ へお願いします。

設定によりコメント欄が無効化されています