New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Intro to Storybook
Chapters
  • 開始
  • 簡易元件
  • 複合元件
  • 資料
  • 頁面
  • 部署
  • 進行測試
  • 外掛
  • 總結
  • 參與

部署 Storybook

學習把 Storybook 部署到線上的方法
此社群翻譯還未更新至最新版本的 Storybook。請透過英文版本的更變,協助我們更新此翻譯。 歡迎發送 Pull Request.

在這套教學的過程中,我們已經在本地端機器打造元件。有一些進展後,要把成果分享出去,藉以獲得回饋。接下來,要把 Storybook 部署到線上,協助隊友檢查 UI 的實作方法。

以靜態 App 輸出

部署 Storybook 的第一件事是以靜態網頁 app 輸出。這是 Storybook 的內建功能,而且已經預先設定好了。

執行 yarn build-storybook 就會在 storybook-static 資料夾輸出靜態的 Storybook。接著,就可以部署到任何靜態網站放置服務。

發布 Storybook

這一份教學使用 Storybook 維護團隊製作的免費發布服務:Chromatic,可以在雲端安全地部署與放置 Storybook。

在 Github 設定 Repository

開始之前,本地端的程式碼得要與遠端版本控制服務同步。在《開始》那章節,專案進行初始設定時,就已經有一份本地端 Repository。在這階段,已經有一組可以推到遠端的 commit。

點此到 Github 為專案開新 Repository。取名為 “Taskbox”,跟本地端的專案一樣。

GitHub setup

在新的 Repo 裡,用以下指令加上 repo 的 git 專案 origin 網址:

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

最後,把本地端 repo 推到在 GitHub 的遠端 repo。

Copy
git push -u origin main

安裝 Chromatic

新增開發模式的 dependency。

Copy
yarn add -D chromatic

安裝好套件後即可使用 Github 帳號登入 Chromatic(Chromatic 只會要求一點權限)。接著,新增名為 "taskbox" 的專案,與剛剛設定好的 Github Repository 同步。

點擊在 collaborator 下方的 'Choose GitHub repo',接著選擇 Repo。

複製專案裡產生,識別用的 'project-token'。在文字指令列執行下方那行,即可 build 和部署 Storybook。記得要把 'project-token' 換成專案的 token。

Copy
yarn chromatic --project-token=<project-token>

Chromatic running

完成之後,發布出去的 Storybook 連結是 https://random-uuid.chromatic.com。與團隊分享此連結來獲得回饋。

以 Chromatic 套件部署出去的 Storybook

萬歲!只用了 1 個指令就將 Storybook 發布。只是,每次想要獲得 UI 實做回饋的時候,都要手動執行指令會覺得很冗。理想狀況應該是只要推程式碼時,就會發布最新版本。也就是,得要進行持續部署 Storybook。

以 Chromatic 進行持續部署

既然專案是放在 Github Repository,就可以使用持續整合 (CI) 服務,自動部署 Storybook。GitHub Actions 是 Github 的免費 CI 服務,可以輕鬆地自動發布。

加入 GitHub Action 來部署 Storybook

在專案的根目錄新增 .github 資料夾,其中再新增 workflows 資料夾。

如下方所示,新增 chromatic.yml 這個檔案。把 CHROMATIC_PROJECT_TOKEN 以專案的 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: yarn
        #👇 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/react/zh-tw/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

💡 因為版面因素,沒有特別講 GitHub secrets。 Secrets 是 Github 提供的安全環境變數,就不用把 project-token 直接寫在程式碼裡面。

提交 Action

在文字指令列,用以下的指令來把做好的修改送出去:

Copy
git add .

接著,進行提交:

Copy
git commit -m "GitHub action setup"

最後,推上遠端 Repository:

Copy
git push origin main

只要設定好 Github action,每次推程式碼的時候,Storybook 就會部署到 Chromatic。在 Chromatic,可以找到專案裡所有發布過的 Storybook。

Chromatic 的使用者儀表板

按下最新 Build,最上面的那一項就是。

接著,按 View Storybook 按鈕,就可以看到最新版本的 Storybook。

Chromatic 裡的 Storybook 連結

用此連結跟團隊成員分享。這對標準 App 開發流程或炫耀成果都很用有 💅。

Keep your code in sync with this chapter. View af610d9 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
進行測試
瞭解測試 UI 元件的方法
✍️ Edit on GitHub – PRs welcome!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI