Edited at

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


デザイナーと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が見れる。

Storybooks


セキュリティー

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で行う。