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秒)
GitLab (2分55秒)