UIレビューを楽にするためにPR作成をトリガーにしたStorybookをS3 + CloudFrontへ自動デプロイの仕組みを作った

name: Storybook Preview

on:
  pull_request:
    types: [opened, synchronize, reopened, closed]
    paths:
      - "apps/web/**"
      - "packages/**"
      - ".github/workflows/storybook-preview.yml"

# 同じPRの連続pushは最新だけ残す
concurrency:
  group: storybook-preview-${{ github.event.pull_request.number }}
  cancel-in-progress: true

permissions:
  id-token: write # OIDC
  contents: read
  pull-requests: write # プレビューURLのコメント投稿・更新

env:
  AWS_REGION: ap-northeast-1
  STORYBOOK_STACK_NAME: MyApp-stg-storybook
  PREVIEW_PREFIX: pr/${{ github.event.pull_request.number }}

jobs:
  deploy:
    if: github.event.action != 'closed'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: jdx/mise-action@v2
      - run: pnpm install --frozen-lockfile
      - run: pnpm build-storybook
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: ${{ vars.AWS_STORYBOOK_PREVIEW_ROLE_ARN }}
          aws-region: ${{ env.AWS_REGION }}
      - name: 配信先の解決
        id: target
        run: |
          resolve_output() {
            aws cloudformation describe-stacks --stack-name "$STORYBOOK_STACK_NAME" \
              --query "Stacks[0].Outputs[?OutputKey=='$1'].OutputValue" --output text
          }
          echo "bucket=$(resolve_output WebBucketName)" >> "$GITHUB_OUTPUT"
          echo "distribution_id=$(resolve_output DistributionId)" >> "$GITHUB_OUTPUT"
          echo "preview_url=$(resolve_output WebUrl)/${PREVIEW_PREFIX}/" >> "$GITHUB_OUTPUT"
      - name: S3へ同期
        run: |
          aws s3 sync apps/web/storybook-static "s3://${{ steps.target.outputs.bucket }}/${PREVIEW_PREFIX}/" \
            --delete --no-progress
      - name: CloudFrontキャッシュ無効化
        run: |
          aws cloudfront create-invalidation \
            --distribution-id "${{ steps.target.outputs.distribution_id }}" \
            --paths "/${PREVIEW_PREFIX}/*"
      - name: PRにプレビューURLをコメント
        uses: actions/github-script@v7
        env:
          PREVIEW_URL: ${{ steps.target.outputs.preview_url }}
          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
        with:
          script: |
            const marker = "<!-- storybook-preview -->";
            const body = [
              marker,
              "### 📚 Storybook プレビュー",
              "",
              process.env.PREVIEW_URL,
              "",
              `- コミット: ${process.env.HEAD_SHA.slice(0, 7)}`,
              "- PRをpushするたびに更新され、クローズ時に削除されます",
            ].join("\n");
            const { owner, repo } = context.repo;
            const issue_number = context.payload.pull_request.number;
            const comments = await github.paginate(github.rest.issues.listComments, { owner, repo, issue_number, per_page: 100 });
            const existing = comments.find((c) => c.body?.includes(marker));
            if (existing) {
              await github.rest.issues.updateComment({ owner, repo, comment_id: existing.id, body });
            } else {
              await github.rest.issues.createComment({ owner, repo, issue_number, body });
            }

  cleanup:
    if: github.event.action == 'closed'
    runs-on: ubuntu-latest
    steps:
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: ${{ vars.AWS_STORYBOOK_PREVIEW_ROLE_ARN }}
          aws-region: ${{ env.AWS_REGION }}
      - name: 配信先の解決
        id: target
        run: |
          resolve_output() {
            aws cloudformation describe-stacks --stack-name "$STORYBOOK_STACK_NAME" \
              --query "Stacks[0].Outputs[?OutputKey=='$1'].OutputValue" --output text
          }
          echo "bucket=$(resolve_output WebBucketName)" >> "$GITHUB_OUTPUT"
          echo "distribution_id=$(resolve_output DistributionId)" >> "$GITHUB_OUTPUT"
      - name: プレビューを削除
        run: |
          aws s3 rm "s3://${{ steps.target.outputs.bucket }}/${PREVIEW_PREFIX}/" --recursive
          aws cloudfront create-invalidation \
            --distribution-id "${{ steps.target.outputs.distribution_id }}" \
            --paths "/${PREVIEW_PREFIX}/*"

const bucket = new s3.Bucket(this, "WebBucket", {
  blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
  removalPolicy: cdk.RemovalPolicy.DESTROY,
  autoDeleteObjects: true,
  // PRクローズ時の削除に失敗しても溜まらないよう、30日で自動削除する
  lifecycleRules: [
    { prefix: "pr/", expiration: cdk.Duration.days(30) },
    { abortIncompleteMultipartUploadAfter: cdk.Duration.days(1) },
  ],
});

new s3deploy.BucketDeployment(this, "DeployWeb", {
  sources: [s3deploy.Source.asset("../../../apps/web/storybook-static")],
  destinationBucket: bucket,
  distribution,
  distributionPaths: ["/*"],
  // BucketDeploymentはソースに無いオブジェクトを削除（prune）するため、
  // 本体のデプロイでPRプレビューまで消さないよう除外する
  exclude: ["pr/*"],
});

// IAMロール側がこのタグでキャッシュ無効化の対象をStorybook配信だけに絞る
cdk.Tags.of(this).add("variant", "storybook");

// workflowが同期先を解決するための出力
new cdk.CfnOutput(this, "WebUrl", { value: `https://${distribution.domainName}` });
new cdk.CfnOutput(this, "WebBucketName", { value: bucket.bucketName });
new cdk.CfnOutput(this, "DistributionId", { value: distribution.distributionId });

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  // /pr/123/ → /pr/123/index.html
  if (uri.endsWith("/")) {
    request.uri = uri + "index.html";
    return request;
  }

  // /pr/123 → /pr/123/ へリダイレクト
  // Storybookはアセットを相対パス（./sb-manager/...）で参照するため、
  // 末尾スラッシュがないとブラウザが /pr/ 基準で解決して壊れる
  // ※ クエリ文字列（?path=/story/... など）の引き継ぎは記事では省略しています
  if (!uri.includes(".")) {
    var origin = "https://" + request.headers.host.value;
    return {
      statusCode: 301,
      statusDescription: "Moved Permanently",
      headers: { location: { value: origin + uri + "/" } },
    };
  }

  return request;
}

const previewRole = new iam.Role(this, "GithubStorybookPreviewRole", {
  assumedBy: new iam.WebIdentityPrincipal(githubOidcProvider.openIdConnectProviderArn, {
    StringEquals: {
      "token.actions.githubusercontent.com:aud": "sts.amazonaws.com",
      // フォークからのpull_requestはOIDCトークンを発行できないため、同一リポジトリのPRに限られる
      "token.actions.githubusercontent.com:sub": `repo:${GITHUB_REPO}:pull_request`,
    },
  }),
  inlinePolicies: {
    StorybookPreviewSync: new iam.PolicyDocument({
      statements: [
        // 一覧取得は pr/ 配下に限る
        new iam.PolicyStatement({
          actions: ["s3:ListBucket"],
          resources: [storybookBucketArn],
          conditions: { StringLike: { "s3:prefix": ["pr/*"] } },
        }),
        // AWS CLIがリージョン解決のために呼ぶことがある
        new iam.PolicyStatement({
          actions: ["s3:GetBucketLocation"],
          resources: [storybookBucketArn],
        }),
        new iam.PolicyStatement({
          actions: ["s3:PutObject", "s3:DeleteObject"],
          resources: [`${storybookBucketArn}/pr/*`],
        }),
        // ディストリビューションIDは後から決まるため、タグ条件でStorybook配信だけに絞る
        new iam.PolicyStatement({
          actions: ["cloudfront:CreateInvalidation"],
          resources: [`arn:aws:cloudfront::${this.account}:distribution/*`],
          conditions: { StringEquals: { "aws:ResourceTag/variant": "storybook" } },
        }),
        new iam.PolicyStatement({
          actions: ["cloudformation:DescribeStacks"],
          resources: [`arn:aws:cloudformation:${this.region}:${this.account}:stack/MyApp-stg-storybook/*`],
        }),
      ],
    }),
  },
});