デザイナーと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で行う。