モチベーション

• AngularでBlogコンテンツでも作るかぁー
  • 他のフレームワークは俺じゃない誰かがたくさん解説しとるやろ…
• Firebaseの機能をいろいろ使ってみてーな
• なるべくお金かけずにどうにかしてしてーな
• データをデザイン分離しときてーな（Headless CMS）
• とはいえ、SEOとかOGPも最低限は反映されるようにしてーな

できたのがこのサイト。

フロント

Angular13を利用する。テキストデータそのものはmarkdownにしといてprism.jsなどでレンダリングする。 Angularじゃなくてよくね？はまぁそうなんだけど、なんか後で動的なコンテンツとか追加するかもしれんし、ご愛嬌。

データストア

Blogデータの保存にはCloud Firestore 画像、その他のデータについてはCloud Storage for Firebase

#　ホスティング Firebase Hostingにアップロードしている。 ドメイン管理もGoogle domainsに寄せているのでFirebaseのコンソールで設定すると独自ドメイン管理が楽。

SSG

AngularではタイトルタグやOGP用のメタ情報をクローラーに食わせるのに問題があるため、
Scullyを使って、ページ生成。
URLのリスト生成にはFirebase Cloud Functionsを利用。以下のようなAPIを作成し、URLのリストを返すようにした。

import * as functions from "firebase-functions";

// The Firebase Admin SDK to access Firestore.
import * as admin from "firebase-admin";

admin.initializeApp();

export const blogs = functions.https.onRequest(async (request, response) => {

  const querySnapshot = await admin.firestore().collection("blog_contents")
      .select("id")
      .orderBy("update_date", "desc").get();
  const records = querySnapshot.docs.map((elem) => elem.data());

  response.set("Content-Type", "application/json");
  response.send(JSON.stringify(records));
});

CD

• GitHub Actionを運用するようにしてみた。 *https://firebase.google.com/docs/hosting/github-integration
• Pull requestをしたときにPreviewチャンネルを作成、mainにマージするとLiveサーバーにデプロイするようにした。

lighthouse

SSGの効果によりlighthouseのスコアは爆上がりした。あとは画像の幅高さの指定をできるようになれば完璧なはず。