LoginSignup
13
2

はじめに

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

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

参考にする記事

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

ymlファイルの作成

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

deploy-storybook.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

これで設定完了です。

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

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

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

スクリーンショット 2024-06-13 0.11.32.png

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

スクリーンショット 2024-06-13 0.12.23.png

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

スクリーンショット 2024-06-13 0.13.31.png

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

ページを見てみる

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

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

スクリーンショット 2024-06-13 0.15.38.png

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

スクリーンショット 2024-06-13 0.17.09.png

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

おまけ

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

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

スクリーンショット 2024-06-13 0.18.31.png

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

スクリーンショット 2024-06-13 0.20.07.png

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

スクリーンショット 2024-06-13 0.21.17.png

おわりに

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

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

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

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

参考

13
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
2