デザイナーとStorybookをS3上で共有

おはようございます、モチベーションクラウドの開発に参画している@sinpaoutです。

開発の流れ

UI部品をStorybookで管理しデザイナーが部品の組合せで画面デザインを行う。
Storybook化されている部品で完結するデザインはワイヤーレベルのもので実装する。
デザインの差異などが発生したらStorybookが正解とする。

問題

• デザイナーが簡単にStorybookを閲覧できる環境がない
• 開発現場にいる場合はエンジニアのPCを覗いて閲覧するしかない
• 見ているブランチが古かったりする
• リモートの場合は見れないがどうしているのだろうか！！

解決策

• Storybookを静的にビルドしS3で展開てい共有
• 成果物はブランチ単位でビルドし、誰でも簡単に見れるようにする

S3の展開への流れ

手動で実行するshellを用意し、エンジニアが実行してアップロードする。
将来はCIと連携してPushのたびにビルドされるようにすることも可能。
ブランチ一覧のページを用意し、見ているブランチを認識できるようにする。

展開コマンド

./bin/publish-storybook.sh

詳細

aws s3 sync などのコマンドが使えるようにする。
現場では awsアカウントは開発でログインしているので aws-cli は普通に使用可能

npm-scriptsの用意

"storybook:build": "rm -rf tmp/storybook && build-storybook -c ./js/.storybook -o tmp/storybook",

バケットと同期

# bin/publish-storybook.sh

branch=$(git symbolic-ref --short HEAD)
# "/" は問題ありそうなので一旦 "_" に置き換えておく
folder=$(echo $branch | sed -e "s/[/]/_/g")

yarn storybook:build

# コンテンツはbranchesディレクトリ配下におく
aws s3 sync $STORYBOOK_PATH "s3://$S3_FOLDER/branches/$folder" \
  --delete \
  --acl public-read

※ acl が public-read だが後述するセキュリティーで制限している

ブランチのデータ

S3上のフォルダー一覧をbranches.txtとして書き出す。
不要な文字列を切り取る。

aws s3 ls "s3://$S3_FOLDER/branches/" | \
  sed -e "s/ PRE //g" | \
  sed -e 's/[ /]//g' > tmp/branches.txt

ブランチ一覧の表示用ページ

ブランチ一覧を表示するhtmlファイルもアップロード。
htmlファイルはS3にあれば動作するがgitで管理したいので毎回アップロードしておく。

htmlの中身は同じディレクトリのbranches.txt をajaxで読み込んで
一覧のリンクを表示するのみ。

aws s3 sync js/.storybook/s3 \
  "s3://$S3_FOLDER" \
  --exclude "*" \
  --include "index.html" \
  --acl public-read

Storybookの一覧

各リンクからStorybookが見れる。

セキュリティー

ACLをpublicにしているがバケットポリシーで社内からしか見れないようにIP制限する。

バケットポリシージェネレーター：
https://awspolicygen.s3.amazonaws.com/policygen.html

後始末

ビルドしたコンテンツの削除処理はS3に任せる。

バケット → 管理 → ライフサイクルルールの追加

名前とスコープ：
ライフサイクル名は分かりやすいのを入力。

prefixはバケットを除いたディレクトリのパス
my-bucket/storybook/branches の場合はstorybook/branches にする。

移行：
何もしない

有効期限：
現行バージョン をチェック
オブジェクトの現行バージョンを失効する をチェック
日数を90にする。

これでコンテンツが作成されてから90日後に消去される。

はまったポイント

S3の静的サイトホスティングのパスが分かりづらい。
htmlファイルなどのコンテンツの詳細にあるリンクは遷移できない。

バケット名 → プロパティ → Static website hosting → エンドポイント を使う必要がる。

先ず始めてみるならこれだけで十分だがSSLやドメインの設定はCloud Frontで行う。