🤠

Storybookのデプロイ先をNetlifyからS3に移管した話

commits3 min read

ゴール

静的ウェブサイトのホスティングがされた S3 に storybook をデプロイしたい

背景

storybook のデプロイに netlify を使っていたが、ビルド時間が増えるにつれ無料枠でまかないきれなくなり、より安価な構成を求め、S3 に行き着いた。ついでにどうせなら AWS CDK(TypeScript)使ってインフラをコード化する。

サンプル

https://github.com/nus3/p-s3-storybook

作業内容

  1. Nuxt create-nuxt-app
  2. Storybook のインストール
  3. AWS CDK の実装
  4. 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 の作成

cdk-stack.ts
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 使った方が良さげ

GitHubで編集を提案

Discussion

ログインするとコメントできます