「自分だけの Technology Radar」を構築できる「Build Your Own Radar」を以下の記事で紹介した💡

Build Your Own Radar サービスに入力する Technology Radar ファイルとしては Google Sheets / CSV / JSON を使うことができて，もし Build Your Own Radar を企業やチームで構築するなら Technology Radar ファイルを「GitHub 管理」したくなると思う．

今回は検証として，GitHub に CSV ファイルをコミットしたら GitHub Actions と Playwright for Python を組み合わせて「自動的に Technology Radar を構築する仕組み」を試してみた．構成はザッと以下のような感じで，最終的に Playwright for Python で Build Your Own Radar の "スクリーンショット" と "PDF" を取得して GitHub Actions のアーティファクトに保存する．

`.github/workflows/byor.yaml`

GitHub Actions のワークフローを以下のように構成した．

まず，1点目のポイントは GitHub Actions の「サービスコンテナ」を使っているところで，ワークフローの中に Build Your Own Radar コンテナを起動して http://localhost/ でアクセスできるようにしている．また CSV ファイルを読み込ませるために volumes を指定してホスト側をマウントしている．

docs.github.com

2点目のポイントは GitHub にコミットした CSV ファイルを sudo cp -p ${GITHUB_WORKSPACE}/files/* /files でマウントしたホスト側のディレクトリにコピーしているところ．検証中にハマったのは Build Your Own Radar コンテナを起動したときに実行される build_and_start_nginx.sh の中に cp /src/build-your-own-radar/spec/end_to_end_tests/resources/localfiles/* ./files/ と実装されていて，デフォルトの radar.csv と radar.json がセットアップされることに気付かなかったこと．GitHub にコミットした CSV ファイルが反映されずに結構な時間を溶かした🌀

他は Playwright for Python を実行するために Python 環境をセットアップしたり，GitHub Actions のアーティファクトに "スクリーンショット" と "PDF" を保存したりしている❗️他は自由に変えてもらえればと〜

name: Build Your Own Radar (BYOR)

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    services:
      byor:
        image: wwwthoughtworks/build-your-own-radar
        ports:
          - 80:80
        volumes:
          - /files/:/opt/build-your-own-radar/files
    steps:
      - uses: actions/checkout@v3
      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.10'
      - name: Install dependencies
        run: |
          pip install -r requirements.txt
      - name: Set up Playwright
        run: |
          playwright install
      - name: Wait for BYOR container running
        run: |
          # Wait for launching container
          sleep 60
          sudo cp -p ${GITHUB_WORKSPACE}/files/* /files
      - name: Build radar
        run: |
          python byor.py
      - name: Upload artifacts
        uses: actions/upload-artifact@v3
        with:
          name: byor-artifacts
          path: artifacts/
          retention-days: 90

GitHub Actions のワークフローから実行している Playwright for Python コードも以下に載せておく．もっとキレイに実装できる気もするけど，ポイントとしては "スクリーンショット" と "PDF" を取得しているところ．

`byor.py`

from playwright.sync_api import sync_playwright
from time import sleep

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()

    page.goto('http://localhost/')

    page.locator('input[name="sheetId"]').fill('http://localhost/files/radar.csv')
    page.locator('a.button').click()

    # Wait for "Your Technology Radar will be available in just a few seconds"
    page.wait_for_selector('div#radar')

    page.screenshot(path='artifacts/byor.png', full_page=True)
    page.pdf(path='artifacts/byor.pdf', format='A4')

    browser.close()

アーティファクト

GitHub Actions の実行が終わると GitHub Actions のアーティファクトに byor-artifacts.zip が保存される．その中に byor.png と byor.pdf が含まれているので，継続的に Build Your Own Radar の履歴を残せるようになった❗️GitHub Actions の retention-days 設定には注意〜