ジャンボです。 暑い日が続きますが、みなさん。
カポエラやってますか?
最近の実験
さて。 ちょっと丸っとマークアップする案件があり、実験してみた件です。
ざっくり書くとこんな感じのフローです。
① 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}
みたいになっちゃうので参照パスが絶対パスでやると面倒なことになるのでここだけ工夫が必要です。
あとはローカルで開発するときと大差なく動くのでチームでさくっと静的なページを作るときはこの構成もありだなという感じでした。