skiapi-frontend:NewAPI/SKIAPI ゲートウェイのフロントエンドコンソール

skiapi-frontend は自分の SKIAPI デプロイ用に書いた純粋なフロントエンドコンソールで、バックエンドは NewAPI 互換のインターフェースを使う。技術スタックは React 19 + Vite + MUI v7、シングルページアプリで、/api と /v1 経由でバックエンドと通信する。担当するのはフロントエンドだけ、認証・課金・ルーティング・キーまわりはバックエンドに任せる。チャネル、ユーザー、トークン、ログ、課金、引き換えコード、モデルルーティング、システム設定を全部ブラウザ内で管理する。

チャネルが肝。アップストリームは五十種類以上に対応していて、OpenAI、Azure、Claude、Gemini/Vertex、DeepSeek、xAI、Ollama、OpenRouter、通義、智譜、Moonshot、さらに Midjourney や Suno といったものまで。どれもテスト用のダイアログ付きで、ワンクリックで疎通するか分かる。バックエンドのログを掘ってどれが落ちたか推測する必要はない。

ユーザーは一般・管理者・スーパー管理者の三段階。決済は Alipay、WeChat、Stripe、Creem、Waffo に対応。ブラウザ内に Playground と Chat を用意してあって、モデルを設定すればその場で試せる。ツール呼び出し付きの AI アシスタント (src/components/common/AiAssistant.jsx) も仕込んであって、管理画面で気軽に聞ける。i18next で七言語、デフォルトは簡体字中国語、日本語は意図的に残した、神戸にいるので。

フォールトトレランスは本番で少しずつ磨き上げたもの。ブラウザ拡張が DOM に余計なものを差し込んで React をクラッシュさせるので、DOM パッチを入れて防ぐ。新バージョンを出すと古い chunk のロードが失敗するのでリトライを入れた。起動しないときは起動ウォッチドッグで /legacy/ にフォールバックする。API 層ではリクエストの重複排除もやっている。

開発はいつもの通り、npm install してから npm run dev。dev サーバーはデフォルトで /api、/v1 を http://127.0.0.1:3001 にプロキシする。バックエンドを変えるなら VITE_PROXY_TARGET を設定する。デプロイは scripts/deploy.py 経由で、ビルド、パッケージング、SSH 転送、静的ディレクトリの切り替え、nginx の reload まで一気通貫、完了後に smoke test を走らせる。バージョン番号はまだ 0.0.0 のままで正式リリースはしていないが、ずっと実際のデプロイで動いている。