GitLab Pagesを開発ワークフローに取り込んでみた

GitLabには、GitLab Pagesという静的ウェブサイトを公開する機能があります。普段の開発を行っていると現状の状況を可視化したなることが多くあると思います。チームとして共通指標として確認できるものがあると良いと思います。GitLab Pagesを利用してみると開発のcomit & pushの流れに乗せることができ、ちょうど良いので今回は、GitLab Pagesについて紹介しようと思います。

GitLab Pagesとは

GitLab Pagesは、GitLab CI/CDを利用して簡単にウェブサイトを公開できる機能のことです。GitLabが提供するCI/CDパイプラインを通して、利用することが前提となっています。生成方法について、https://gitlab.com/pages/plain-html/-/tree/masterが参考になるのでこちらを参考にして下さい。

利用方法の一例

弊社のサーバサイドは、主にgolangをメインで利用し、少し規模が大きくなる場合は、Clean Architectureを利用して実装することが多くあります。今回は、単体テストの結果を可視化するという観点で記載します。単体テストは、ローカルでも行いますが、CIプロセスの中でも自動で行うようにしています。パイプラインは、次のような3ステージを持つ構成の.gitlab-ci.ymlを利用しています。※. 説明に不要な部分は、省いています。

プロジェクトの構成は、下記のようになっているとします。

├── README.md
├── golang
│   ├── README.md
│   ├── bin
│   │   ├── godoc
│   │   └── mockgen
│   ├── hogehoge
│   │   ├── boot
│   │   ├── boothock
│   │   ├── c.out
│   │   ├── common
│   │   ├── conf
│   │   ├── controllers
│   │   ├── coverage.html
│   │   ├── domain
│   │   ├── function.go
│   │   ├── go.mod
│   │   ├── go.sum
│   │   ├── infrastructure
│   │   ├── localRun.sh
│   │   ├── makefile
│   │   ├── mocks
│   │   ├── repositories
│   │   ├── services
│   │   └── snipets
│   ├── pkg
│   │   ├── mod
│   │   └── sumdb
│   └── setenv.fish
└── public
    ├── index.html
    └── style.css

GitLab CI/CDの設定は、以下のようにしました。今回は、単純に単体テストを行って、取得したカバレッジをHTMLとして出力して、それをGitLab Pagesを使って可視化しています。

image: golang:1.13

stages:
  - build
  - test
  - deploy

before_script:
  - echo ${GOPATH}
  - export APP_TOP_DIR=${PWD}/golang
  - export GOPATH=${PWD}/golang

unit-test:
  stage: test
  script:
    - cd ${APP_TOP_DIR}/hogehoge && make test
  after_script:
    - mkdir -p public/develop/unittest
    - mv ${PWD}/golang/hogehoge/coverage.html public/develop/unittest
  artifacts:
    paths:
      - public

build-app:
  stage: build
  script:
    - env
    - echo ${GOPATH}
    - echo ${APP_TOP_DIR}
    - cd ${APP_TOP_DIR}/hogehoge && make build

##############################################
# unittest結果のGitLabPagesへのマッピング
##############################################
pages:
  stage: deploy
  script:
    - echo 'Upload the coverage report'
  only:
    - develop
  artifacts:
    paths:
      - public

##############################################
# 開発環境へデプロイする
##############################################
deploy-app:
  stage: deploy
  image: google/cloud-sdk:latest
  only:
    - develop
  script:
    - env
    - echo ${GOPATH}
    - echo ${APP_TOP_DIR}
    - cd ${APP_TOP_DIR}/hogehoge && make deploy

ちなみに上の例ですと、./develop/unittest/coverage.htmlというような形でリンクをはっておけばトップページからアクセスができます。

GitLab pagesを利用するときの注意点ですが、実は書き方が決まっている部分があります。実際、下記のような制約があります。

公開フォルダは、publicで固定
ジョブ名は、”pages”固定
pagesのartifactsのパスは、”public”固定
公開したいコンテンツのアップタイミングは、”deploy”のみ

おわりに

制約はありますが、この制約になれれば結構使えます。他にもAPIのドキュメントを自動生成するなど、チーム内で共通で参照すべき情報などを最新のコミット内に合わせた更新することも可能です。手軽に利用できるので情報の可視化などをする際の一つの選択肢としてみてはいかがでしょうか。

GitLab Pagesとは

利用方法の一例

おわりに

この記事を書いた人