evidenceを使ってgithub pagesにダッシュボードをアップロードする

はじめに

この記事はevicenceで作成したダッシュボードをGitHub pagesにアップロードするまでをまとめた記事です。

Evidenceとは

Evidenceは、シンプルにダッシュボードやデータビジュアライゼーションを構築・公開できるツールです。一般的なBIツールと異なり、コードベースでのカスタマイズや自動化が容易なため、開発者やデータサイエンティストにとって使いやすい設計となっています。

また、柔軟な設定と拡張性により、プロジェクトの要件に合わせた最適なダッシュボード作成が可能です。
詳細は以下の公式ドキュメントをご参照ください。

https://docs.evidence.dev/

構築手順

※手順内で{}で囲われている部分はご利用の環境に合わせて適宜変更してください。

事前準備

予めGitHubに空のリポジトリを用意しておいてください。

今回はリポジトリのURLがhttps://github.com/{username}/{repname}
であることを前提とします。

ローカル環境にデプロイ

まず、Node.jsとnpmがインストールされていることを確認し、作業用ディレクトリに移動してください。
任意の作業ディレクトリに移動した状態で、以下のコマンドを実行し、テンプレートプロジェクトをローカルにダウンロードします。

npx degit evidence-dev/template {repname}

cd {repname}
npm install
npm run sources
npm run dev

ここまで実行するとローカル環境にサンプルのプロジェクトが構築され、ブラウザでダッシュボードが確認できるようになります。

ソースを一度GitHubにプッシュ

リポジトリ内にGit管理を開始し、ローカルの変更をGitHubリポジトリへ反映させます。

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/{username}/{repname}.git
git push -u origin main

上記の手順では、まず全ファイルをステージングし、初回コミットを作成。その後、デフォルトブランチ名をmainに変更し、リモートリポジトリを登録してプッシュしています。

GitHub Pagesの設定変更

GitHubのwebページにアクセスし、Settings>Pages>SourceをGitHub Actionsに変更して置いてください。
変更後画面の上部にsave Changesが出ていれば設定完了です。

GitHub Pages用にconfig設定を変える

evidence.config.yamlの設定変更

GitHub Pagesで公開する際、サイトのルートパスがリポジトリ名に合わせて変更される必要があります。
evidence.config.yamlに以下の要素を追加してください。

deployment:
  basePath: /{repname}

package.jsonのビルドスクリプトの変更

package.jsonには、サイトのビルド時に出力先を指定するスクリプトが設定されています。
buildの部分を以下のように設定してください。

"scripts": {
  "build": "EVIDENCE_BUILD_DIR=./build/{repname} evidence build"
}

GitHub Actionsによる自動デプロイ設定

GitHub Actionsを利用して、mainブランチへのプッシュ時に自動でビルドとデプロイを行う設定を行います。
リポジトリ内に.github/workflows/deploy.yaml ファイルを作成してください。
.github/workflows/のディレクトリはデフォルトで存在しないので手動で作る必要があります。

※コードは公式のコードより引用

name: Deploy to GitHub Pages

on:
  push:
    branches: 'main' # or whichever branch you want to deploy from

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm install

      - name: build
        env:
          BASE_PATH: '/${{ github.event.repository.name }}'
          ## Add and uncomment any environment variables here
          ## EVIDENCE_SOURCE__my_source__username: ${{ secrets.EVIDENCE_SOURCE__MY_SOURCE__USERNAME }}
          ## EVIDENCE_SOURCE__my_source__private_key: ${{ secrets.EVIDENCE_SOURCE__MY_SOURCE__PRIVATE_KEY }}
        run: |
          npm run sources
          npm run build

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'build/${{ github.event.repository.name }}'

  deploy:
    needs: build
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

GitHubにプッシュ

ここまでの変更内容をGitHubにプッシュします。
プッシュ後、GitHub Actionsの処理がFailせずに完了していればOKです。

動作確認

GitHub Actions のデプロイが正常に完了すると、サイトが自動的に GitHub Pages 経由で公開されます。
ブラウザで以下の URL にアクセスし、Evidence ダッシュボードが正しく表示されることを確認してください。

https://{username}.github.io/{repname}/

まとめ

いかがだったでしょうか？
今回は、Evidenceで作成したダッシュボードをGitHub Pagesにアップロードするための一連の手順について解説しました。

本記事の手順が、あなたのダッシュボード公開作業の一助となれば幸いです。詳細や最新の情報については、公式ドキュメントやリポジトリをご参照ください。
また、私のX（旧Twitter）では、AIやデータ分析に関する情報を発信していますので、ぜひフォローをお願いします。

https://x.com/Linus_lab