🦊

【中編】HugoでビルドしたポートフォリオをGitLab Pagesで良い感じにホスティングする: Pages/Runnerを構築する

2023/11/12に公開

Docker

GitLab

compose

tech

🐋始めに

前回「個人的には大成功です。」とか言ってたやつ誰？？？
はい…。絶望いたします。

自前のGitLabではPagesの利用に設定が必要
CI/CDジョブの実行にはRunnerが必要

上記2点に紆余曲折を経て気付き、構築(設定)した話です。

参考情報

GitLab Pages: 静的サイトをリポジトリでホスティングできる機能

GitLab Runner: CI/CDパイプラインでジョブを実行するアプリケーション
https://docs.gitlab.com/runner/

🛠構築手順

ディレクトリ構成

プロジェクトのディレクトリ構成は下記の通りです。
★を付けたファイルが大事です。

repository_management
|-- compose.yml   ★
|-- .env
|-- gitlab
|   `-- volume
|       |-- etc
|       |   `-- gitlab
|       |       `-- gitlab.rb   ★
|       `-- var
|           |-- log
|           |   `-- gitlab
|           `-- opt
|               `-- gitlab
|-- gitlab-runner
|   `-- volume
|       `-- etc
|           `-- gitlab-runner
|               `-- config.toml   ★
`-- script
    |-- compose_down.sh
    `-- compose_up.sh

1. gitlab.rbを作成する

コンテナにマウントするgitlab.rbは下記の通りです。

gitlab.rb

# リバースプロキシを使うために設定
external_url "https://rm.zetsubo.net"
nginx['listen_https'] = false
nginx['listen_port'] = 80

# Pagesを使うために設定   ★
pages_external_url "https://zetsubo.net"
pages_nginx['listen_https'] = false
pages_nginx['listen_port'] = 80

# メールサーバー(SMTP)を使うために設定
gitlab_rails['smtp_enable'] = true
gitlab_rails['smtp_address'] = "smtp-relay.sendinblue.com"
gitlab_rails['smtp_port'] = 465
gitlab_rails['smtp_user_name'] = "your@email.com"
gitlab_rails['smtp_password'] = "your-password"
gitlab_rails['smtp_domain'] = "rm.zetsubo.net"
gitlab_rails['smtp_authentication'] = "login"
gitlab_rails['smtp_enable_starttls_auto'] = false
gitlab_rails['smtp_tls'] = true
gitlab_rails['gitlab_email_from'] = "gitlab@rm.zetsubo.net"
gitlab_rails['gitlab_email_reply_to'] = "noreply@rm.zetsubo.net"

Pagesの設定を追加しました。
pages_nginxはGitLabをリバースプロキシの後ろで立てたので書きました。
pages_external_urlは少しずる(？)をしていて、サブドメインなしのURLを書いています。
理由はSSL証明書で、"*.zetsubo.net"のワイルドカード証明書を発行してるんですが、真面目に"rm.zetsubo.net"と書くと"<グループ名>.rm.zetsubo.net"(サブドメインのサブドメイン)でPagesがホスティングされてしまい、具合が悪いのです…。

参考情報

2. compose.ymlを作成する

compose.ymlは下記の通りです。

compose.yml

services:
  gitlab:
    image: gitlab/gitlab-ce:latest
    container_name: rm-gitlab
    restart: always
    networks:
      - repository-management
      - reverse-proxy
    labels:
      - traefik.enable=true
      # HTTP
      - traefik.http.routers.gitlab.rule=Host(`rm.zetsubo.net`, `ze.zetsubo.net`)   ★
      - traefik.http.routers.gitlab.entrypoints=websecure
      - traefik.http.routers.gitlab.tls=true
      - traefik.http.routers.gitlab.service=gitlab
      - traefik.http.services.gitlab.loadbalancer.server.port=80
    stdin_open: true
    tty: true
    # user: ${USER_ID}:${GROUP_ID}
    volumes:
      - ./gitlab/volume/etc/gitlab:/etc/gitlab
      - ./gitlab/volume/var/log/gitlab:/var/log/gitlab
      - ./gitlab/volume/var/opt/gitlab:/var/opt/gitlab
      # - /etc/group:/etc/group:ro
      # - /etc/passwd:/etc/passwd:ro
      - /usr/share/zoneinfo/Asia/Tokyo:/etc/localtime:ro

  gitlab-runner:   ★
    image: gitlab/gitlab-runner:latest
    container_name: rm-gitlab-runner
    restart: always
    networks:
      - repository-management
    stdin_open: true
    tty: true
    # user: ${USER_ID}:${GROUP_ID}
    volumes:
      - ./gitlab-runner/volume/etc/gitlab-runner:/etc/gitlab-runner
      # - /etc/group:/etc/group:ro
      # - /etc/passwd:/etc/passwd:ro
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - /usr/share/zoneinfo/Asia/Tokyo:/etc/localtime:ro

networks:
  repository-management:
    external: true
  reverse-proxy:
    external: true

Runnerは公式を参考にしました。
GitLabのラベルではHTTPのルールに"ze.zetsubo.net"を追加しました(グループ名がzeなので)。

参考情報

3. コンテナを起動する

ここまで来たら一旦コンテナを起動してください。

まず、Runnerを使いたいリポジトリ(静的サイトのソースを管理するリポジトリ)の設定画面でRunnerを作成します。

プラットフォームはLinux、Tagsは"タグのないジョブの実行"にチェックを入れました。
"ランナーを作成"ボタンをクリックします。

次に、Runnerを登録します。

ステップ1に表示されているコマンドをコピーして、Runnerコンテナでコマンドを実行します。
(トークンモロ出しですが気にしないでください)

$ docker container exec -it <コンテナ名> gitlab-runner register --url https://rm.zetsubo.net --token glrt-818xwZgP6TNKJDxzaqW9

対話形式でいくらか設定しました。

項目	値	備考
url	https://rm.zetsubo.net	----
name	zetsubo-engineer	何でもOK
executor	docker	----
image	debian:latest	----

設定するとGitLabの画面が自動で遷移すると思います。

参考情報

4. config.tomlを更新する

コンテナにマウントするconfig.tomlは下記の通りです。

config.toml

concurrent = 1
check_interval = 0
shutdown_timeout = 0

[session_server]
  session_timeout = 1800

[[runners]]
  name = "zetsubo-engineer"
  url = "https://rm.zetsubo.net"
  id = 4
  token = "your-token"
  token_obtained_at = 2023-11-11T17:36:47Z
  token_expires_at = 0001-01-01T00:00:00Z
  executor = "docker"
  [runners.cache]
    MaxUploadedArchiveSize = 0
  [runners.docker]
    tls_verify = false
    image = "debian:latest"
    privileged = false
    disable_entrypoint_overwrite = false
    oom_kill_disable = false
    disable_cache = false
    volumes = ["/cache"]
    shm_size = 0
    network_mtu = 0
    pull_policy = ["if-not-present"]   ★

自前でビルドしたDockerイメージを使ってRunnerを動かしたかったので、pull_policyを"if-not-present"に設定しました。

5. 設定を確認する

リポジトリのPagesの設定画面で下記の画面が出ていたらOKです。

また、リポジトリにRunnerが割り当てられていることも確認します。
Runnerの状態が緑になっていればOKです。

🐳終わりに

成果物

Pages/Runnerを構築(設定)しました。
これでHugoのソースをpushしたら自動でビルドが走ってPagesにデプロイされる環境が整いました。
次回は「どうやってHugoでポートフォリオ作るの？」の話を投稿しようと思います。
皆さんの参考になれば嬉しいです。

🐋始めに

🛠構築手順

1. gitlab.rbを作成する

2. compose.ymlを作成する

3. コンテナを起動する

4. config.tomlを更新する

5. 設定を確認する

🐳終わりに

Discussion