オンライン小説エディタで採用したサービスとCI/CD
こんにちは、先日こんな記事を書きました。
オンライン小説エディタ『まくらぎ』は、開発段階から継続的に改善を行うことを前提として設計されています。
ありがたいことにフィードバックをいくつか頂き、徐々に反映を行っています。
この記事では手際よくWebサービスに改善を施せる環境のために、サービスの裏側をどう構築したのかを解説していきます。
CI/CD まわりの全容
まくらぎのサービスは図のような流れで動いています。
図下半分が開発者が関わるところですが、例えば新機能を追加したいときのフローは以下の通りです。
・docker-composeを使ってローカル開発サーバを起動、新機能を実装
・developへpush
・firestoreのルールに変更があればGithub Actionsがプレビュー環境へ自動デプロイ
・Cloudflare Pagesのプレビュー環境へ自動デプロイ
・必要があれば、zero-trustの認証を経由してプレビュー環境へアクセスして確認
・mainブランチへのプルリクエストを発行
・Github Actionsがunitテスト(jest)、e2eテスト(Playwright)を自動実行
・問題がなければマージ
・Cloudflare Pages、Firestoreのプロダクション環境にデプロイが行われ、リリース完了
リポジトリ管理はモノレポで行っており、一つのリポジトリにフロントエンド、バックエンド(Firebase)、他全て詰まっています。
Cloudflare Pagesの仕組みを使い、各ブランチへpushするたびにその状態でデプロイされた環境が生成されます。
mainブランチがProduction環境として設定されており、他のブランチへのプッシュは全てPreview環境としてデプロイされます。
全てのプッシュに対してその時点での状態を保持してくれるので、特定のブランチ、以前の状態などを簡単に確認することが出来ます。
なお、Preview環境が見えるとマズいので、Cloudflare zero-trustの Access機能によって認証を設定しており、開発者以外はアクセスできません。
自動テスト
まくらぎの開発では、機能ごとのテストを行うユニットテストと、ユーザーのシナリオに合わせたE2Eテストの二つを実行しています。
Github Actionsで実行されており、開発上でのトラブル未然防止、そして開発者の心理的負担軽減に大きく貢献しています。
使用しているライブラリは以下の通りです
ユニットテスト……jest
E2E……Playwright
ユニットテスト
外部サイト記法での出力機能や、エディタコアシステムの各機能の検証に使用しています。
入力と想定される出力をいくつかパターン化し、機能を実装するたびに増えていきます。
テストを先に書いてから実装を入出力に合わせて作ることもあれば、開発で出た不具合に合わせて正常なパターンを後から作ることもあります。
E2Eテスト
Playwrightを用いてシナリオに沿ったテストを行います。
エディタの直接操作、表示などが適切に行われているかをチェックします。
ローカルストレージをjsonで保存できるので、各シナリオに合わせたストレージを事前に用意しています。
オンライン小説エディタというサービスの特性上ビューに対する検証が多く必要なため、E2Eテストで多くの要素を見るようなバランスになっています。
Firebase Firestore/Authentication
APIサーバを構築するコストを減らすため、データベースとしてFirestoreを利用しています。
Firestoreのルールによって他人のコンテンツを変更したり出来ないようにしていますが、セキュリティ的にも重要なので、各パターンを網羅したテストを用意しています。通常のユニットテストとは別にFirestoreルールの変更のたびに検証され、通過した場合のみFirebaseへデプロイされるようになっています。
なおFirestoreのアクセスは非ログインモードでは使われることはなく、ログインして初めてデータの保存などに使われます（認証はFirebase Authenticationで、現在はTwitterのみの連携です）
microCMS
静的なサイトコンテンツの管理にはmicroCMSというヘッドレスCMSを利用しています。
マニュアル、利用規約、その他サイト設定などは全てこのサービスの上で管理しているのですが、Next.jsのビルド時に情報を取得して埋め込んでいるため、ユーザーから直接アクセスされることはありません。
またCloudflareとのwebhook連携によって、microCMSでコンテンツを変更し終えると自動的に各環境へのデプロイが走るようになっています。
終わりに
以上がオンライン小説エディタ『まくらぎ』の開発運用環境とコンポーネントです。
一つのWebサービスをCI/CD込みでしっかり立てる際の、それほど大規模ではないパターンの一つになったのではないかと思います。
Discussion