FirebaseとVue.jsでMicroFrontendsした。

昨年7月に開催された Microservices Meetup vol.7 (Micro Frontends)

に参加して、「FirebaseをバックエンドにしてMicroFrontendsやったら良さそう」という事を思っていたのですが何もせず、年末になって暇になったのと、たまたま知人から上手くいきそうな話を頂いたので、試しに実装してみました。

何を作ったか

Demo

github.com

レビューの投稿・一覧だけを責務としたサービスを作りました。 「WordPressでメディアを運営していて、独自のレビューシステムを導入したいが、WordPressを拡張したくはない or 出来ないケース」を想定しています。

f:id:anoChick:20190106230009p:plainf:id:anoChick:20190106230013p:plain

<script src="https://unpkg.com/vue"></script>
<script src="https://anochick-revue.firebaseapp.com/revue-components.min.js"></script>
<revue-form subject-id='demo'></revue-form>
<revue-list subject-id='demo'></revue-list>

上記のタグを埋め込むだけで、「レビュー投稿フォーム」と「レビュー一覧」が利用できます。

記事そのものについてはこのサービスでは扱わず、記事IDをコンポーネントに与えて利用します。

subject-idは記事ID等の任意の文字列を想定していて、記事毎にレビューコメントをつけることが出来ます。

Firebase Authenticationを利用しており、ドメインの許可が必要な為、用意したデモサイトとjsfiddleでしか動きません。(もちろん設定すれば他サイトでも動くようになります。)

MicroFrontends

マイクロフロントエンドとは、平たく言うと、マイクロサービスのAPIを、HTTPやRPC等のエンドポイントではなく、DOMの一要素として提供する事です。

Micro Frontends - extending the microservice idea to frontend development

今回は、バックエンドにFirebaseを採用しましたが、APIはWebComponentsとして提供しているため、バックエンドの実装を意識せずにサービスを利用することが出来ます。

構成・実装

f:id:anoChick:20190106233934p:plain システム構成は↑の通りです。

Webコンポーネントソースコードは、FirebaseHostingでホスティングしています。

WebComponentsの実装には、Vue.js、@vue/web-component-wrapperを利用しています。

作ってみて

ユーザデータの作成にCloudFunctionを使っていることもあり、待ち時間がやや長く、地味に体験が悪くなってしまいました。 とはいえ、手軽に、サーバレスでMicroFrontendsなサービスが提供出来るのはなかなかおもしろいと思いました。

またなんか思いついたら作ります。

関連のある・参考にした記事

Vue CLI v3 を利用して、あらゆるサイトに埋め込める Web Component ベースの Qiita スライドビューアーを開発した話 - Qiita

【改訂版】 Firebase Cloud Firestore rules tips

Micro Frontends - extending the microservice idea to frontend development