Storybookのデプロイ先をNetlifyからS3に移管した話
ゴール
静的ウェブサイトのホスティングがされた S3 に storybook をデプロイしたい
背景
storybook のデプロイに netlify を使っていたが、ビルド時間が増えるにつれ無料枠でまかないきれなくなり、より安価な構成を求め、S3 に行き着いた。ついでにどうせなら AWS CDK(TypeScript)使ってインフラをコード化する。
サンプル
作業内容
- Nuxt create-nuxt-app
- Storybook のインストール
- AWS CDK の実装
- circleci の設定
ポイント
最近ハマってることや、詰まりそうな箇所など
.yarnrc と .node-version
yarnrc でsave-prefix ""を追加し、インストールするバージョンを固定する
また node-version も指定したげる
Nuxt に src ディレクトリ追加する
普通に create-nuxt-app すると root 直下にディレクトリ大量にできるので src ディレクトリに移動する
ここら辺が該当
storybook を手動でインストール
公式に書いてあるnpx sb initでも良いんだけども scss 読み込んだり、typescript の stories を読み込むための設定に変えるのが面倒だったので手動でインストール
一応typescript 用の addonもあるっぽい
ここら辺が該当
以前書いたやつ(storybook のバージョン古いのでお気をつけください)
vue ファイルをインポートするためにvue-shim.d.tsの追加
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
CDK で s3bucket の作成
const bucket: s3.Bucket = new s3.Bucket(this, config.name, {
versioned: false,
bucketName: config.bucketName,
// 静的ウェブサイトホスティングのための設定
publicReadAccess: true,
removalPolicy: cdk.RemovalPolicy.DESTROY,
// storybookの確認のためだけなので保存期間は2週間ぐらいに設定
lifecycleRules: [
{
expiration: Duration.days(14),
prefix: "branches/",
},
],
// 静的ウェブサイトホスティングのための設定
websiteIndexDocument: "index.html",
});
// デプロイ時に aws s3 sync コマンドを使用するのに必要な権限まわり
const policyStatement: iam.PolicyStatement = new iam.PolicyStatement({
effect: iam.Effect.ALLOW,
actions: ["s3:ListBucket", "s3:PutObject", "s3:GetBucketAcl"],
resources: [
`arn:aws:s3:::${config.bucketName}`,
`arn:aws:s3:::${config.bucketName}/*`,
],
principals: [new iam.AccountPrincipal(context.iam)],
});
bucket.addToResourcePolicy(policyStatement);
circleCI の設定
ブランチ名から/を_に変換してバケットのbranches/配下の{branch_name}/ディレクトリにビルドした storybook のファイル群をアップロードする
- run:
name: Deploy to S3
command: |
branch=$(echo $CIRCLE_BRANCH | sed s#/#\_#g)
aws s3 sync ./storybook-static/ "s3://$STORYBOOK_BUCKET_NAME/branches/$branch" \
--delete
ビルド後のファイル群をディレクトリごと gitignore してしまうと circleCI でのジョブの実行中にビルド後のディレクトリがないよって怒られるので gitignore の設定でディレクトリのみ残すように設定する
storybook-static/*
!storybook-static/.gitkeep
あとがき
公開された storybook に basic 認証かけたくなったら
単純な s3 の静的ホスティングではなく cloud front 使った方が良さげ
Discussion