はじめに
こんにちは、エンジニアのkeitaMaxです。
今回は、StorybookをGitHub上にBuildしていつでもみれるようにするために、GitHubActionsの設定をしていきます。
参考にする記事
以下の記事を参考に今回は進めていきます。
ymlファイルの作成
GitHubActionsを使用するので、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に設定します。
これで設定完了です。
実際にPushしてデプロイしてみる
設定が完了したので実際にPushしてデプロイしてみましょう。
Pushすると、Actionsタブで実際に動いているのが確認できます。
「Storybookをデプロイ」となっているところをクリックして中を見てみると、以下のような感じになっています。
これの処理が無事完了すると以下のようにチェックマークがつきます。
これでデプロイまで完了しました。
ページを見てみる
デプロイまで完了したので実際にページをみてみます。
deployと書いてあるところにURLが書いてあるのでそれをクリックします。
すると以下のようにStorybookの画面が表示されます。
これで今回の目標が達成されました。
おまけ
おまけで、このURLをリポジトリのTOPにおいていつでも見れるようにします。
以下の画像のAboutと書いてあるところにURLを置きたいと思います。
Aboutの横の歯車マークを押し、WEBサイトのところに先ほど見ていたURLをコピペしてSave Changesを押してください。
すると以下のようにリポジトリのTOPにURLが表示され、すぐに画面を確認できるようになります。
おわりに
簡単にしかも無料でできるなんてもっと早くやっておけばよかったと思います。
中身のコード見たい方は以下のURLからGitHubに行ってみてください！
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました！
参考