Chapters

Storybook をデプロイする

Storybook をインターネット上にデプロイする方法を学びましょう

このコミュニティの翻訳は、最新の Storybook バージョンに対応していません。英語ガイドの最新の変更を適用して、この日本語ガイドの更新にご協力ください。 Pull requests を大歓迎します。.

ここまで、ローカルの開発マシンでコンポーネントを作成してきました。しかし、ある時点で、フィードバックを得るためにチームに作業を共有しなければならないこともあるでしょう。チームメートに UI の実装をレビューしてもらうため、Storybook をインターネット上にデプロイしてみましょう。

静的サイトとしてエクスポートする

Storybook をデプロイするには、まず静的サイトとしてエクスポートします。この機能はすでに組み込まれて、使える状態となっているので、設定について気にする必要はありません。

npm run build-storybook を実行すると、storybook-static ディレクトリーに Storybook が静的サイトとして出力されますので、静的サイトのホスティングサービスのデプロイ出来ます。

Storybook を発行する

このチュートリアルでは、Storybook のメンテナーが作成した、無料のホスティングサービスである Chromatic を使用します。Chromatic を使えば、クラウド上に Storybook を安全に、デプロイしホストすることができます。

GitHub にリポジトリーを作成する

デプロイの前に、リモートのバージョン管理サービスへローカルのコードを同期しなければなりません。はじめにの章でプロジェクトを初期化した際に、ローカルのリポジトリーはすでに作成されています。また、この段階でリモートリポジトリーにプッシュできるコミットがあるはずです。

ここから GitHub にアクセスし、リポジトリーを作りましょう。リポジトリーの名前はローカルと同じく「taskbox」とします。

GitHub のセットアップ

新しいリポジトリーを作ったら origin の URL をコピーして、次のコマンドを実行し、ローカルの Git プロジェクトにリモートを追加します:

Copy

git remote add origin https://github.com/<your username>/taskbox.git

最後にローカルリポジトリーを GitHub のリモートリポジトリーにプッシュします:

Copy

git push -u origin main

Chromatic を使う

パッケージを開発時の依存関係に追加します。

Copy

npm install -D chromatic

パッケージをインストールしたら、GitHub のアカウントを使用して Chromatic にログインします。(Chromatic は一部のアクセス許可を要求します。) 「taskbox」という名前でプロジェクトを作成し、GitHub のリポジトリーと同期させます。

「colaborators」の下にある Choose from GitHub をクリックし、リポジトリーを選択します。

作成したプロジェクト用に生成された一意の project-token をコピーします。次に、Storybook をビルドし、デプロイするため、以下のコマンドを実行します。その際、コマンドの <project-token> の場所にコピーしたトークンを貼り付けるのを忘れないでください。

Copy

npx chromatic --project-token=<project-token>

Chromatic を実行する

実行が完了すると、Storybook が発行されて、https://random-uuid.chromatic.com のようなリンクができます。このリンクをチームに共有すれば、フィードバックが得られるでしょう。

Chromatic パッケージを使用してデプロイされた Storybook

やりました！Storybook が一つのコマンドだけで発行できました。ですが、UI を実装し、フィードバックを得たいと思ったときに、毎回コマンドを手動実行するのは非効率です。理想的なのは、コードをプッシュすると自動的に最新のコンポーネントが発行されることです。それには、Storybook を継続的にデプロイしていく必要があります。

Chromatic を使用した継続的デプロイメント

もうプロジェクトは GitHub にホストされているので、Storybook を自動的にデプロイする継続的インテグレーション (CI) が使用できます。GitHub アクションは GitHub に組み込まれている CI サービスで、自動発行が簡単にできます。

Storybook をデプロイするために GitHub アクションを追加する

プロジェクトのルートフォルダーに .github というフォルダーを作成し、さらにその中に workflows というフォルダーを作成します。

chromatic.yml を以下の内容で新規に作成します。CHROMATIC_PROJECT_TOKEN を先ほどのトークンで置き換えてください。

Copy

.github/workflows/chromatic.yml

# Workflow name
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - run: npm install
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/angular/ja/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

💡 簡潔にするため GitHub secrets には言及していません。GitHub secrets は GitHub によって提供されるセキュアな環境変数なので、project-token をハードコードする必要はありません。