ウェイブに新卒入社してから3年目に突入したKSです！

今回は、私の関わっているプロジェクトで、GitLab Pagesを用いてStorybook確認用のWebサイト(社内用)を公開したのでご紹介いたします。

本記事内容は、GitLab Pagesの導入がメインとなります。

そのため、GitLabやStorybookの導入に関しては、触れておりません。
その他、公開するリポジトリの状態として、StorybookはWebpack管理されており、Docker化されております。
各種設定に関してもあくまで一例参考にしていただけたらと思います。

GitLab Pagesとは
GitLab Pages導入背景
GitLab PagesでStorybookを公開するまでの流れ
おわりに

GitLab Pagesとは

GitLab Pagesは、GitLabのリポジトリから静的なWebサイトを直接公開できる機能です。
独自ドメインを設定してWebサイトを公開することも可能です。
すでにGitLab環境があれば、簡単に導入することができます。

GitLab Pages導入背景

常に最新のStorybookを確認する方法として静的Webサイトを公開する必要がありました。
そこで、今回採用したのが、GitLab Pagesです。

GitLab Pagesの導入には以下のメリットがありました。

弊社でGitLabを使用しているため、別途サーバーを立ち上げる必要がない
Storybookの更新自動化(CI/CD)
アクセス制限が容易に行える(後述)

といいつつも、、、

実際導入となると、ハマりポイントがありました😭
次に、ハマりポイントにも触れつつ、GitLab PagesでStorybookを公開までの流れについてご説明致します。

GitLab PagesでStorybookを公開するまでの流れ

事前準備

今回、GitLab Pagesを導入した方法は、公式ドキュメントに記載されている中のWildcard domains with TLS supportで対応しました。
この方法では、事前準備として以下の対応が必要でした。

ワイルドカードDNSの登録によるドメイン取得
ワイルドカードSSL証明書の取得

SSL証明書は、Let's Encryptで取得いたしました。
今回は、１プロジェクトでお試し導入のため、ドメインを指定してSSL証明書を取得し使用いたしました。

GitLab Pages有効化

GitLab PagesはデフォルトでOFFになっております。
GitLabの設定ファイルを修正し、GitLab PagesをONにする必要があります。まずは、gitlab.rbに以下のコードを追加致します。

## gitlab.rb

gitlab_pages['enable'] = true
pages_nginx['redirect_http_to_https'] = true

# 事前準備で取得したドメイン
pages_external_url 'https://hogehoge.jp'

# 事前準備で取得したSSL証明書
pages_nginx['ssl_certificate'] = "/fullchain.pem"
pages_nginx['ssl_certificate_key'] = "/privkey.pem"

設定を追加したら、以下のコマンドで設定を反映させます。

$ gitlab-ctl reconfigure

GitLab Pagesにアクセス制限追加

今回導入するStorybookは社内向けのため、外部からのアクセス制限を追加する必要がありました。
アクセス制限を追加する方法として、以下の２通りの方法がありました。

Access controlを用いたアクセス制限方法(GitLab Pagesの追加機能)
Nginxを用いたアクセス制限方法

今回は、2.の方法でアクセス制限を追加致しました。
ここで、Access controlでアクセス制限しないのか？と疑問に思う方もいるかと思います。
ここだけの話、実は、最初にAccess controlでアクセス制限を追加していたのですが、不具合が発生し導入を断念致しました😇
発生した不具合に関しては後述致します。

次に、それぞれの導入方法についてご説明致します。

1. Access controlを用いたアクセス制限方法

Access controlとは、GitLab 11.5で追加された新機能です。
アクセス制限の種類は公式ドキュメントに明記されております。
この機能を用いて、リポジトリごとにアクセス制限を追加することが可能です。

Access controlを追加するための設定はgitlab.rbに以下のコードを追加し再起動するだけです。

## gitlab.rb

gitlab_pages['access_control'] = true

再起動後、リポジトリの設定でSettings > General > Permissions内にPagesという項目が追加されます。
ここで、アクセス制限の種類を選択することが可能です。

ここまでの流れだと、特に導入時にハマりポイントはありませんでしたが、、、

次に、なぜ導入を断念したかご説明致します。

Access control不具合内容

Access control導入後、数日間は問題なく動作しておりました。
しかし、しばらくすると、Pagesにアクセスした際、503エラーが発生しアクセス拒否になってしまいました。

なぜ？🤔

原因に関して調査しましたが、解決の糸口を見つけることはできませんでした。
似たような挙動になる旨のIssuesはありましたが、原因を特定したIssuesは存在せず、かなりハマってしまったため、今回は導入を断念する結果となりました。

ただし、要件は外部からのアクセス制限を追加することだったため、スピード感を重視し、別の方法での実装に切り替えました。

2. Nginxを用いたアクセス制限方法

アクセス制限とありますが、実際にはIPアドレス制限です。
具体的な対応方法としては、GitLab Pagesで自動生成されるNginxの設定ファイルに、別途IPアドレス制限用のファイルを読み込ませます。こちらも対応方法はシンプルです。

まずは、外部読み込み用のconfファイルを作成致します。

## hogehoge.conf

# 許可するIPアドレス
allow ×××.×××.×××.×××;
deny all;

次に、gitlab.rbに以下のコードを追加し、先ほど作成したconfファイルを読み込むように設定致します。

## gitlab.rb

pages_nginx['custom_gitlab_server_config'] = "include /etc/gitlab/hogehoge.conf;"

修正は以上で、最後に再起動すればアクセス制限完了です。

GitLab PagesでStorybook公開

単純にhtmlファイルを公開するのみであれば、公式ドキュメントの設定で公開することができます。
今回は、build-storybook.shというStorybook公開用のスクリプトを作成して実行しております。
追加、修正したファイルは以下の通りです。(追加分以外は省略しております。)
重要なポイントにコメントしております。

## .gitlab-ci.yml

stages:
  - pages

# この名称はpages固定にする必要があります。
pages:
  stage: pages
  script:
    - ./scripts/build-storybook.sh
  artifacts:
    paths:
    - public
  only:
    - master

## package.json

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .public -s ./.storybook/"
  },
}

## build-storybook.sh

set -o errexit

mkdir .public
mkdir public/storybook

IMAGE_NAME=${RANDOM}
CONTAINER_NAME=${RANDOM}
docker build ./frontend -t ${IMAGE_NAME}

# コンテナ内でstorybookをbuildし、公開用のファイル生成
docker run --name="${CONTAINER_NAME}" ${IMAGE_NAME} npm run build-storybook

# コンテナ内で生成されたファイルをコンテナからホストへコピー
docker cp ${CONTAINER_NAME}:/app/.public/. ./.public/
docker rm $CONTAINER_NAME
docker rmi $IMAGE_NAME

# 最終的に公開するファイルをpublic配下にしておけばOK
mv .public/* public/storybook

注意事項として、公式ドキュメントにも記述がある通り、公開できるディレクトリはpublic配下となります。
そのため、別のディレクトリを公開対象に設定するとアクセスできないためご注意ください。

最後に、修正した内容をリポジトリにpushし、masterブランチにマージすると、Storybookが公開されているかと思います！！
今回の設定だと、https://[Group名].hogehoge.jp/[Repository名]/storybook/index.html でアクセスすることができます！

f:id:sys_wwwave:20190930145914p:plain