GitLab Pages と GitHub Pages + GitHub Actions の使い勝手を比べてみました。

作ったページ

比較用に作ったページはこんな感じのものです (どちらも内容は同じ):

CI/CDジョブの動作要件

以下の動きになるように設定します。

  • テストは push のたびに動作する
  • ページのデプロイは master / main ブランチに push された場合のみ動く

GitHub の設定

GitHub の定義ファイル (.github/workflow/main.yml) には以下のように記述。

name: CI

on:
  push:
  pull_request:
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Node.js 12.x を利用
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: 依存ライブラリ収集
        run: npm ci

      - name: テスト実行
        run: npm run test -- --coverage --watchAll=false

      - name: ビルド
        if: ${{ github.ref == 'refs/heads/main' }}
        run: npm run build

      - name: デプロイ
        if: ${{ github.ref == 'refs/heads/main' }}
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

GitLab の設定

GitLab の定義ファイル (.gitlab-ci.yml) には以下のように記述。

image: node

stages:
- test
- deploy

test:
  stage: test
  only:
  - branches
  - merge_requests
  script:
  - npm install
  - npm run test -- --coverage --watchAll=false
  - npm run build
  artifacts:
    paths:
    - build

pages:
  stage: deploy
  only:
  - master
  variables:
    GIT_STRATEGY: none
  script:
  - mv build public
  artifacts:
    paths:
    - public

設定内容の比較と印象

定義ファイルの書き方に関しては、(後発のためか) GitLab Actions の方が汎用性が高く洗練されている印象があります。

GitHub の方が勝っていると思えた部分

  • GitLab Pages の場合、「ジョブ名は必ず pages」「publicフォルダのみが対象」という命名規約の縛りがあるのに対して、 GitHub にはそれがない。
  • GitHub Actions はステップごとに条件指定 (if: ${{ github.ref == ...) ができる。
  • GitHub Actions は既存のアクションを再利用することで複雑な処理を簡単に呼び出すことができる。

GitLab の方が勝っていると思えた部分

  • GitHub の if: ${{ github.ref == ... よりも、GitLab の only.master の方が直感的でわかりやすい。 (GitHub には on.push.branches.main という書き方もあるがこちらはワークフロー全体にしか適用できない)

実行時間

今日の時点では GitHub の圧勝でした。

GitHub (30秒)

GitHub

GitLab (2分55秒)

GitLab

かわかみしんいち。島根県津和野町在住のフリーランスエンジニア。複合現実(Mixed Reality)と3DUXでおもちゃを作るのが趣味。 https://github.com/ototadana