FastAPI と Alpine.js で EXFO テスター管理パネルを軽量構築する

この投稿では、FastAPI と Alpine.js を使用して、EXFO テスターと連携する軽量なウェブアプリを作成する方法を紹介します。ユーザー認証、テスト結果の取得、そして簡単なダッシュボードを一つの HTML ページで実装できます。

なぜ FastAPI + Alpine.js なのか？

FastAPI は非同期に対応したモダンな Python フレームワークで、API やバックエンド構築に最適。
Alpine.js は HTML に対して軽量にインタラクティブ性を加える JavaScript ライブラリで、React や Vue を使うほどではない用途に最適。
この組み合わせにより、軽量かつ高速な内部ツールや管理画面を構築できます。

主な機能

セッションベースのログイン（ユーザー名＋パスワード）
ログインユーザーのみがアクセスできる API
ログイン後にテスト結果を取得する HTML+Alpine.js ダッシュボード
EXFO API との統合準備済（モックデータでテスト）

技術スタック

バックエンド：FastAPI（Python）
フロントエンド：HTML + Tailwind CSS + Alpine.js
認証：Cookie によるセッション管理
データ：モックのテスト結果データ（将来的に MongoDB などに対応可）

光ファイバー基礎用語

OLT（Optical Line Terminal）：通信事業者側の中心機器。複数の ONU にデータを送信。
ONU/ONT（Optical Network Unit/Terminal）：ユーザー側の機器。OLT からのデータを受信。
PON（Passive Optical Network）：受動分岐型光ネットワーク。中継器なしで分配。
GPON / XGS-PON：それぞれ 2.5Gbps / 10Gbps の速度規格。
dBm：光信号の強度を示す単位。

EXFO PON テスターの基本設定手順

1.テスターの接続
ドロップケーブルを EXFO テスターの ONT ポートに接続（PON ポートはオプションで ONU 接続用）

2.PON モードを選択
GPON、XGS-PON、または両方を選択

3.光信号の測定
下り（OLT → ONU）と上り（ONU → OLT）のパワーレベルを確認（通常 –8 dBm ～ –27 dBm が良好）

4.判定と結果確認
テスター上に Pass/Fail が表示される。必要に応じて閾値調整

5.結果の保存・出力
USB または API 経由で保存・取得可能

システム構成図（Mermaid.js）

graph TD
    A["EXFO Tester"] --> B["FastAPI Server"]
    B --> C["Session Auth API"]
    B --> D["Test Results API"]
    D --> E["MongoDB (optional)"]
    B --> F["Static HTML + Alpine.js"]
    F --> G["User Browser"]
    G -->|ログイン| C
    G -->|結果取得| D

EXFOとONUの構成フロー（Mermaid.js）

graph LR
    Start["開始"] --> Splitter["ドロップファイバーをEXFOテスター(ONTポート)に接続"]
    Splitter --> InlineTest["(オプション) ONUをPONポートに接続"]
    InlineTest --> Mode["PONモードを選択（GPON/XGS-PON）"]
    Mode --> PowerTest["光パワーテストを実行"]
    PowerTest --> Result["OLT RX / ONU TXのレベル確認"]
    Result --> Decision{"範囲内か？"}
    Decision -- Yes --> Save["結果を保存・エクスポート"]
    Decision -- No --> Adjust["再接続や再調整して再試験"]
    Save --> Done["完了"]
    Adjust --> PowerTest

FastAPI バックエンド（main.py）

pip install fastapi uvicorn python-multipart jinja2

from fastapi import FastAPI, Request, Form
from fastapi.responses import RedirectResponse, JSONResponse
from fastapi.templating import Jinja2Templates
from starlette.middleware.sessions import SessionMiddleware

app = FastAPI()
app.add_middleware(SessionMiddleware, secret_key="supersecret")
templates = Jinja2Templates(directory="templates")

users = {"admin": {"password": "1234"}}
fake_data = [
    {"id": 1, "onu": "ONU123", "status": "PASS"},
    {"id": 2, "onu": "ONU456", "status": "FAIL"},
]

def get_current_user(request: Request):
    return request.session.get("user")

HTML + Alpine.js フロントエンド（index.html）

<template x-if="!loggedIn">
  <form method="POST" action="/login">
    <input type="text" name="username" placeholder="ユーザー名">
    <input type="password" name="password" placeholder="パスワード">
    <button type="submit">ログイン</button>
  </form>
</template>

<template x-if="loggedIn">
  <div>
    <h2>ようこそ <span x-text="username"></span></h2>
    <ul>
      <template x-for="item in testResults">
        <li>
          <span x-text="item.onu"></span> - <span x-text="item.status"></span>
        </li>
      </template>
    </ul>
  </div>
</template>