codh-mirror に Firebase 認証と JSONkeeper 互換 API を後付けして IIIF Curation の編集ワークフローまで成立させる — 前回『動かない』と書いたところからの方針転換
暫定ミラー codh-mirror について、前回記事では『認証・保存バックエンドは結局動かない』としていたところを、後から方針転換して Firebase 認証と JSONkeeper 互換 API (Cloudflare Workers + D1 / PythonAnywhere の二系統) を実際に動かすまでの記録です。
codhiiiffirebasefirebaseuijsonkeepercloudflare-workerspythonanywheregithub-pagesmirrorarchive
台本(フルテキスト)
動画の掛け合いを書き起こしたものです。音声を再生しづらい場合はこちらをお読みください。
オープニング
- codh-mirror に Firebase 認証と JSONkeeper 互換 API を後付け
- 前回「動かない」としていた認証・保存系を方針転換して実現
- うさぎ
- こんにちは。今日は CODH ツール群の暫定ミラーに、Firebase 認証と保存バックエンドを後付けした記録を紹介します。
- WhiteCUL
- 前回の記事では「動かない」と書いていたんですよね？
- うさぎ
- そうです。前回はログインとキュレーション保存は復旧の対象外として、閲覧専用の暫定ミラーとしていました。
- WhiteCUL
- 方針転換のきっかけは何だったんですか？
- うさぎ
- JSONkeeper 互換のサーバを 2 系統立てたタイミングで、サーバ側が揃っているのだからミラー本体も認証・保存を有効化してしまおう、という流れになりました。
- WhiteCUL
- ミラーが完全に動くようになったんですね。
Firebase プロジェクトの差し替え
- Authorized domains に GitHub Pages ドメインを追加
- authFirebase.js の firebaseConfig を自前プロジェクトに差し替え
- WhiteCUL
- Firebase の設定はどう変えたんですか？
- うさぎ
- オリジナルは codh-81041 プロジェクトを参照していましたが、これは自分たちでは触れないので、既存の個人プロジェクトを当てました。
- WhiteCUL
- GitHub Pages からログインするために何が必要でしたか？
- うさぎ
- Firebase Console の Authorized domains に GitHub Pages のドメインを追加することが必須でした。デフォルトでは localhost しか許可されていないので。
- WhiteCUL
- authFirebase.js の差し替えは全ツールに必要だったんですか？
- うさぎ
- Viewer、Manager、Editor、Board の 4 ファイルに同じ変更を行いました。Player は保存機能がないので authFirebase.js を持っていません。
signInFlow: popup の落とし穴
- FirebaseUI 3.x のデフォルトはリダイレクトモード
- GitHub Pages のサブパス環境では popup を明示指定が必須
- WhiteCUL
- 一番ハマった問題は何でしたか？
- うさぎ
- Viewer は動くのに Manager や Editor のログインが完了しない、という問題でした。OAuth 同意画面を経て戻ってきても、認証状態が変わらなかったんです。
- WhiteCUL
- 原因は何だったんですか？
- うさぎ
- Viewer だけ signInFlow: 'popup' が明示されていて、他のツールにはなかったんです。FirebaseUI 3.x のデフォルトはリダイレクトモードで、GitHub Pages のサブパスではうまく動きません。
- WhiteCUL
- どう直したんですか？
- うさぎ
- Manager、Editor、Board の authFirebase.js に signInFlow: 'popup' の 1 行を追加するだけで直りました。
JSONkeeper エンドポイントの差し替え
- 5 ツール計 9 箇所の curationJsonExportUrl を Cloudflare Workers 版に書き換え
- sed コマンド 1 発で差し替え・巻き戻し可能
- WhiteCUL
- 保存先のエンドポイント変更はどうやったんですか？
- うさぎ
- Viewer、Manager、Editor、Player、Board の 5 ツールにある curationJsonExportUrl という URL 計 9 箇所を書き換えました。
- WhiteCUL
- sed コマンドで一括変換できるんですね。
- うさぎ
- そうです。find で該当ファイルを探して sed で一発置換できます。撤収時もこの逆方向に 1 発で戻せます。
- WhiteCUL
- バックエンドは 2 系統あるんですか？
- うさぎ
- Cloudflare Workers と D1 で実装したものを本流、PythonAnywhere の Flask 版を塩漬けの参照実装として並走させています。切り替えは URL を変えるだけです。
Manager のリンク相対化
- サブツールリンクを絶対 URL から相対パス ../iiif-curation-viewer/ に変更
- GitHub Pages の兄弟ディレクトリ構成に対応
- WhiteCUL
- Manager のサブツールリンクも変更したんですか？
- うさぎ
- Manager には Viewer や Editor で開くリンクがあるんですが、元は codh.rois.ac.jp への絶対 URL でした。今は応答しないので 404 になっていました。
- WhiteCUL
- どう変えたんですか？
- うさぎ
- GitHub Pages では各ツールが兄弟ディレクトリに並んでいるので、../iiif-curation-viewer/ のような相対 URL に書き換えました。
- WhiteCUL
- 撤収時の対応も考えてあるんですね。
- うさぎ
- オリジナルが復旧したら sed で元の絶対 URL に戻せます。クライアント側の差し替えは URL だけなので、ロールバックが容易な設計にしています。
トラブルシューティングとまとめ
- Authorized domains 未設定 / signInFlow 未指定 / URL 書き換え漏れが主な落とし穴
- 撤収は 3 ステップで完了できる
- WhiteCUL
- 詰まりやすいポイントをまとめてもらえますか？
- うさぎ
- auth/unauthorized-domain エラーは Authorized domains 未追加、別タブが閉じるのに状態が変わらないのは signInFlow 未指定、404 エラーは URL 書き換え漏れです。
- WhiteCUL
- 振り返ってどんな気づきがありましたか？
- うさぎ
- 暫定ミラーの「どこまでやるか」は復旧見込みと運用負荷のバランスで変わります。上流の再開が見えないと、結局サーバ側まで自前で持つほうが現実的になりました。
- WhiteCUL
- クライアント側の変更はシンプルにまとまったんですね。
- うさぎ
- そうです。差し替え点は Firebase Web config と curationJsonExportUrl の URL だけです。サーバ側をどう実装するかが大半の作業でした。