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

セキュリティー

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