.mdファイルで執筆するデータドリブンなブログを作った

前書き

ブログ開設の背景

本ブログのサービス構成

（図はGoogle Cloud Developer Architectueで描いた．） サイトの構築にはNext.jsを，cssはTailwind，markdownのレンダリングにはremarkのエコシステムを使用した． Cloud Runにアプリを載せ，GitHubにpushすると自動でデプロイされるようにした． データインジェストに関しては，22年7月からPub/Subに新機能として追加されたBigQuery subscriptionを使用した．

Next.jsによるmarkdownブログ投稿サイトの構築

npx create-next-app --example with-docker <YOUR-APP-NAME>

const extractLevel = (line: string) => {
  const m = line.match(/<h(\d)/);
  if(m === null){
    return;
  }
  return parseInt(m[1]);
};

const extractText = (line: string) => {
  const m = line.match(/<h\d>(.*)<\/h\d>/);
  if(m === null){
    return;
  }
  return m[1];
};

const exatrctToc = (content: string) => {
  const sectionHeadings: SectionHeading[] = [];
  const lines = content.split('\n');
  lines.forEach((line) => {
    if (line.startsWith('<h')) {
      const level = extractLevel(line);
      if(level === undefined){
        return;
      }
      const text = extractText(line);
      if(text === undefined){
        return;
      }
      const id = text.toLowerCase().replace(/ /g, '-');
      sectionHeadings.push(
        new SectionHeading(level, text, id)
      );
    }
  });
  return sectionHeadings;
};

const constructHtmlToc = (sectionHeadings: SectionHeading[]) => {
  let tocHtml = '';
  let currentLevel = 0;
  sectionHeadings.forEach((sh) => {
    if (sh.level > currentLevel) {
      tocHtml += `<ol class="marker:text-white">`;
    } else if (sh.level < currentLevel) {
      tocHtml += `</ol>`;
    }
    tocHtml += `<li><a href="#${sh.id}">${sh.title}</a></li>`;
    currentLevel = sh.level;
  });
  return tocHtml;
};

const addIdsToHeadings = (content: string) => {
  const lines = content.split('\n');
  lines.forEach((line: string, index: number) => {
    if (line.startsWith('<h')) {
      const level = extractLevel(line);
      if(level === undefined){
        return;
      }
      const text = extractText(line);
      if(text === undefined){
        return;
      }
      const id = text.toLowerCase().replace(/ /g, '-');
      lines[index] = `<h${level} id="${id}">${text}</h${level}>`;
    }
  });
  return lines.join('\n');
};

export async function getServerSideProps({ params }: Context) {
  const file = fs.readFileSync(`posts/${params.postName}.md`, 'utf-8');
  const { data, content } = matter(file);
  const htmlContent = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeStringify)
    .process(content);
  const htmlToc = constructHtmlToc(exatrctToc(htmlContent.toString()));

  return {
    props: {
      frontMatter: data,
      content: addIdsToHeadings(htmlContent.toString()),
      toc: htmlToc,
      postName: params.postName,
    }
  };
}

• 投稿するのが自分一人であること
• 投稿頻度が頻繁ではない予定であること
• 当面，訪問者数が増える見込みはないこと🥲 を考慮すると，Node.js側でファイルを全探索して検索を行なってもさほどパフォーマンスが悪化することは無いだろうという楽観的な考えに落ち着いた．

Cloud Runへのデプロイ

Cloud Runから「CREATE SERVICE」を押下し，「Continuously deploy new revisions from a source repository」を選択，「SET UP WITH CLOUD BUILD」を押下するとGitHubの認証とソースリポジトリの選択をする．これだけで push → deploy の自動化が完了．簡単．Cloud Run様々．

デプロイしたアプリからGCPのサービスを認証する場合（例えば本ブログのようにアプリ内でPub/Subトピックにメッセージを送信するなど）には，Cloud Runに構成したサービスに対してサービスアカウントを登録することができるので，認証情報の管理をせずにIAM側で権限設定を完結できるのもありがたい🙌

Pub/SubのBigQuery subscription

1. Pub/Subのサービスアカウント（ service- @gcp-sa-pubsub.iam.gserviceaccount.com ）に roles/bigquery.dataEditor と roles/bigquery.metadataViewer を付与
2. BigQueryにテーブルを作成
3. Pub/Subにトピックとトピックに紐付くBigQuery subscriptionを作成 「2. 」でBigQueryに作成するテーブルは送信するデータの種類やトピックのスキーマと整合性を取る必要がある点に注意が必要．

• subscription_name ( STRING )
• message_id ( STRING )
• publish_time ( TIMESTAMP )
• data ( BYTES, STRING or JSON )
• attributes ( STRING or JSON ) 因みに，BigQuery subscriptionを使用する場合にはメッセージのメタデータを送信することを強く推奨する．BigQuery subscriptionはpush型のsubscriptionである都合上，同一のデータが複数回BigQuery内に連携される可能性がある．そこで，message_idをメタデータとして送信しておくと，データの重複を省きやすくなるのである．

後書き

• 自然言語による記事の検索
• タグによる記事の検索/絞り込み
• コメント機能 などなど．

今後の投稿予定