RareJob Tech Blog

レアジョブテクノロジーズのエンジニア・デザイナーによる技術ブログです

Pug + gitlab pages + fractalでちょっとだけ幸せなコーディング作業

ジャンボです。 暑い日が続きますが、みなさん。

カポエラやってますか?

私はやっています。

最近の実験

さて。 ちょっと丸っとマークアップする案件があり、実験してみた件です。

f:id:jumbos5:20190815185438p:plain

ざっくり書くとこんな感じのフローです。

① AppのPush

Pug + Sass + gulpな構成にしたのは好きだからです。アイコンも全体的に夏っぽくて可愛いです。

② GitLab-CI

要件として社内から適当にHTMLとかホスティングして見たいというのがありつつも、上記の技術セットでマークアップをしたかったので、社内で運用されているGitLabのPagesでうまいことやれないかと考慮した結果、なんやかんやありつつもうまくいきました。 AWSのリソースを使うのも考えたんですが、一番ミニマムでやる方法を考えた結果ここに行き着きました。

GitLab pagesでは .public がデフォルトでhostingされるためにGitLab CIでmaster push時にビルドして出力されたassetsをコピーしているだけです。

// .gitlab-ci.yml
pages:
  script:
  - npm i
  - npm run build
  - cp -r public .public
  artifacts:
    paths:
    - public
  only:
  - master

Github pagesは経験があったんですが、社内にホスティングされたGitLabで動かすのには少しつまずきました。

③ Build & Deploy to Pages, ④ Hosting to Pages

実質やることはないです。 .gitlab-ci.yml を入れておけばよしなに動きます。

またこの時に fractal を設定しておけばこちらも一緒に Pages上で見れるので あとからstyleguideを見たいというときもリポジトリをcloneしてビルドしなきゃという手間もなく楽チンですね。fractal-pug-adapterを入れればpugも使えます。

ミニマムな構成で◎

Vue + Storybookな構成も考えましたが、技術要件上そこまでリッチにする必要もなく開発速度と構成のミニマム化を考えてこの構成でマークアップを進めてみました。GitLab Pagesの仕様でURLが {group name}.{domain}/{application name} みたいになっちゃうので参照パスが絶対パスでやると面倒なことになるのでここだけ工夫が必要です。

あとはローカルで開発するときと大差なく動くのでチームでさくっと静的なページを作るときはこの構成もありだなという感じでした。