Zenn
🦊

GitLab Pages

に公開

GitHub Copilot がなんか気味悪いんで、GitLab に移行しようかなーと。

まあ、もともと前職で GitLab を使ってて GitHub よりも良かったんで、そのうち移行しようと思ってたので良い機会ではある。

とりあえず GitHub Pages で管理してた tmtms.net のコンテンツを GitLab Pages に移行してみる。

GitLab Pages

GitHub Pages はリポジトリの Pages の設定から UI でシュッとできるんだけど、GitLab Pages は CI で設定する必要があるんでちょっとだけ面倒。

基本的には GitLab Pagesで静的ウェブサイトを公開する方法 | GitLab.JP に書いてあるとおり。

ユーザー用のトップページは GitLab 上で ユーザー名.gitlab.io という名前のリポジトリにしておく。

リポジトリのトップに .gitlab-ci.yml を作成して、pages ジョブで public 配下にファイルを作るだけ。

image: alpine:latest

pages:
  stage: deploy
  script:
    - mkdir -p public/
    - cp *.html *.txt public/
  artifacts:
    paths:
    - public
  only:
  - master

リポジトリに最初から public ディレクトリがあれば、別にコピーとかする必要はない。

git push すると CI/CD のパイプラインが実行されて、https://ユーザー名.gitlab.io として公開される。簡単。

他のリポジトリで同じようにするとそれは https://ユーザー名.gitlab.io/リポジトリ名/ として公開される。

GitHub と違って無料プランでプロジェクト(リポジトリ)を公開してなくてもページは公開できる。
非公開プロジェクトの場合はデフォルトではプロジェクトにアクセスできる人しか見れないようになってるので、公開したい場合は、「設定」→「一般」→「可視性、プロジェクトの機能、権限」→「ページ」で「全員」を設定する。

独自ドメイン

公開ページに独自ドメインを使うこともできる。だいたい GitHub Pages と同じ。

プロジェクトの「設定」→「Pages」で「新ドメイン」を押す。

ドメイン名を入力して「新しいドメインを作成」を押す。

「検証ステータス」に書かれてる _gitlab-pages-verification-code.example.com.net TXT gitlab-pages-verification-code=XXXXXXXXXXXXXXXX を DNS に登録して「⭯」を押すと、検証ステータスが「未検証」から「検証済み」に変わる。

「DNS」欄に書かれてる通りに example.com ALIAS username.gitlab.io. を DNS に設定して(ALIAS じゃなくて CNAME でもいいし、A で IPアドレスを直接書いてもいいらしい)、「変更を保存」すると、独自ドメインで公開される。

独自ドメインのサブドメインで公開したい場合も同様の手順でできる。

が、サブディレクトリとして https://example.com/リポジトリ名 のように公開することはできない。独自ドメインでなければ https://ユーザー名.gitlab.io/リポジトリ名/ として公開できるんだけども。

独自ドメインのサブディレクトリとして公開

Pages は CI で作ってるんで、メインプロジェクトの CI の中で他のリポジトリからコンテンツをコピーするのを思いついて、やってみたらうまく行った。

GitHub よりも面倒なだけあって柔軟に色々できて良い。

メインのリポジトリの .gitlab-ci.yml はこんな感じ。

image: alpine:latest

pages:
  stage: deploy
  script:
    - mkdir -p public/
    - cp *.html *.txt public/
    - wget --header "PRIVATE-TOKEN:$PRIVATE_TOKEN" https://gitlab.com/api/v4/projects/username%2Frepository1/repository/archive.zip
    - unzip archive.zip
    - mkdir -p public/repository1/
    - mv repository1-master-*/* public/repository1/
    - rm -f archive.zip
    - wget --header "PRIVATE-TOKEN:$PRIVATE_TOKEN" https://gitlab.com/api/v4/projects/username%2Frepository2/repository/archive.zip
    - unzip archive.zip
    - mkdir -p public/repository2/
    - mv repository2-master-*/* public/repository2/
    - rm -f archive.zip
    - wget --header "PRIVATE-TOKEN:$PRIVATE_TOKEN" https://gitlab.com/api/v4/projects/username%2Frepository3/repository/archive.zip
    - unzip archive.zip
    - mkdir -p public/repository3/
    - mv repository3-master-*/* public/repository3/
    - rm -f archive.zip
  artifacts:
    paths:
    - public
  only:
  - master

API で他のリポジトリのコンテンツを取得して、サブディレクトリ配下に配置するという流れ。

最初に「ユーザー設定」→「アクセストークン」で read_api スコープを持ったトークンを作成する。トークンの値をコピーしておく。
トークンの値を .gitlab-ci.yml に直接書いてもいいんだけど、ちょっとアレなんで、GitLab の変数に設定してそれを使うようにした。
メインリポジトリのプロジェクトの「設定」→「CI/CD」→「変数」に PRIVATE_TOKEN という名前で保存すると、.gitlab-ci.yml のなかで $PRIVATE_TOKEN として参照できる。

サブリポジトリを更新したときにメインの CI を動かす

メインリポジトリの CI が動いたときには公開ページが更新されるけど、サブリポジトリを更新してもメインの CI は動かないのでコンテンツが更新されない。

これはちょっと不便なので、サブリポジトリを更新したときに自動的にメインの CI が動くようにしたい。

Multi-project pipelines | GitLab にある trigger を使うと簡単にできた。

サブリポジトリの .gitlab-ci.yml を次のように書くだけ。簡単。

job:
  trigger: username/username.gitlab.io

おわり

GitHub よりは面倒だったけど、GitLab でもそんなに複雑じゃない仕組みでできた。

GitHub に置いてあるやつを GitLab に移していこう。

しかし zenn.dev は GitHub にしか対応していないのだった… 😖

Discussion

ログインするとコメントできます