StorybookをGitHub上にBuildしていつでもみれるようにする

# はじめに

こんにちは、エンジニアのkeitaMaxです。

今回は、StorybookをGitHub上にBuildしていつでもみれるようにするために、GitHubActionsの設定をしていきます。

# 参考にする記事

以下の記事を参考に今回は進めていきます。

https://qiita.com/shun198/items/18f852caea2b4068ebaf

# ymlファイルの作成

GitHubActionsを使用するので、ymlファイルを新しく作成します。

`deploy-storybook.yml`を以下のように作成しました。

```yml:deploy-storybook.yml
name: DeployStorybook

on:
  push:
    branches:
      - develop
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Chekcout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: package.json
          cache: 'npm'
          cache-dependency-path: '**/package-lock.json'
      - name: Install Node Dependencies
        run: npm ci
      - name: Build storybook
        run: npm run build-storybook
      - name: Upload Documents
        uses: actions/upload-pages-artifact@v3
        with:
          path: storybook-static

  deploy:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

```

# GitHubの設定

GitHubの設定をします。

設定したいリポジトリ > Settings > Pages > Build and deployment

の中のものをGitHubActionsに設定します。

![スクリーンショット 2024-06-13 0.07.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/210396b6-0f74-c7b4-672c-9c9b42ca73ce.png)

これで設定完了です。

# 実際にPushしてデプロイしてみる

設定が完了したので実際にPushしてデプロイしてみましょう。

Pushすると、Actionsタブで実際に動いているのが確認できます。

![スクリーンショット 2024-06-13 0.11.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/fdc0c8fb-d4a5-e232-fb80-848e89c7d3fb.png)

「Storybookをデプロイ」となっているところをクリックして中を見てみると、以下のような感じになっています。

![スクリーンショット 2024-06-13 0.12.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/4835e17e-7c1d-4e07-1a8a-dbd0a76c0a98.png)

これの処理が無事完了すると以下のようにチェックマークがつきます。

![スクリーンショット 2024-06-13 0.13.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/b69d1877-81e3-2e21-43c2-1813f7472c9f.png)

これでデプロイまで完了しました。

# ページを見てみる

デプロイまで完了したので実際にページをみてみます。

`deploy`と書いてあるところにURLが書いてあるのでそれをクリックします。

![スクリーンショット 2024-06-13 0.15.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/12ff8528-8a6d-d2aa-1ba1-1cf74c795895.png)

すると以下のようにStorybookの画面が表示されます。

![スクリーンショット 2024-06-13 0.17.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/c1256506-c0eb-3035-b836-3100ae0e6d26.png)

これで今回の目標が達成されました。

# おまけ

おまけで、このURLをリポジトリのTOPにおいていつでも見れるようにします。

以下の画像のAboutと書いてあるところにURLを置きたいと思います。

![スクリーンショット 2024-06-13 0.18.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/4a7a3be3-898b-b333-3199-7668837ca526.png)

Aboutの横の歯車マークを押し、WEBサイトのところに先ほど見ていたURLをコピペして`Save Changes`を押してください。

![スクリーンショット 2024-06-13 0.20.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/0b9c9b68-85c9-e9b2-5883-ad1c3725ebad.png)

すると以下のようにリポジトリのTOPにURLが表示され、すぐに画面を確認できるようになります。

![スクリーンショット 2024-06-13 0.21.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/ccedf680-8216-b025-c3f5-2d3740e5f631.png)



# おわりに

簡単にしかも無料でできるなんてもっと早くやっておけばよかったと思います。

中身のコード見たい方は以下のURLからGitHubに行ってみてください！

https://github.com/NiheiKeita/react-component-materials

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://qiita.com/shun198/items/18f852caea2b4068ebaf