Cloudflare Functions を活用した GitHub Actions トリガー自動化導入レポート

📝 概要

Astro を用いたブログ運用において、
これまで 調査 → md作成 → GitHubコミット → push → Cloudflareデプロイ → 反映
という一連の流れが手間だったため、

Google Drive の .md を GitHub Actions で自動取り込みし、
ブラウザ上から同期を実行できるワークフローを構築した。

UIボタンを押せば workflow_dispatch が実行され、
Drive→GitHub→Pagesデプロイ→反映まで自動化される。

🎯 改善目的

Before（旧運用）	After（改善後）
md作成後に手動コミットが必須	ブラウザの同期ボタン1つでOK
反映のタイミングが分からない	Actions + Pages 自動連携で反映
更新作業の心理的コストが高い	執筆フローが極めて軽量化

📌 実装構成まとめ

GitHub Actions

workflow_dispatch + schedule(cron)両対応
Google Drive→blogフォルダへ自動コピー
commit差分があれば push
drive-sync.yml が中枢

on:
  workflow_dispatch:
  schedule:
    - cron: '0 15 * * *' # JST 0時

Cloudflare Functions

📁 functions/api/run-drive-sync.ts

import type { EventContext } from '@cloudflare/workers-types';

export interface Env { GITHUB_TOKEN: string; }

export const onRequestPost = async (context: EventContext<Env, any, any>) => {
  const { env } = context;
  if (!env.GITHUB_TOKEN) return new Response("GITHUB_TOKEN is not configured", { status: 500 });

  const url = "https://api.github.com/repos/noinet/antigravity-techblog/actions/workflows/drive-sync.yml/dispatches";
  const res = await fetch(url,{
      method:"POST",
      headers:{Authorization:`Bearer ${env.GITHUB_TOKEN}`,Accept:"application/vnd.github+json","Content-Type":"application/json"},
      body:JSON.stringify({ ref:"main" })
  });

  return res.ok
    ? new Response(JSON.stringify({ok:true}),{status:200})
    : new Response("Failed to trigger workflow",{status:500});
};

🔑 GITHUB_TOKEN は Cloudflare Pages Environment Variables に設定
→ 安全に GitHub Actions をトリガーできる

Astro に同期ボタンを追加

<button id="sync-btn">🔄 ブログ同期</button>

<script>
  document.getElementById("sync-btn").onclick = async ()=>{
    const res = await fetch("/api/run-drive-sync",{method:"POST"});
    if(res.ok) alert("同期開始しました。反映はデプロイ完了後です。");
    else alert("エラーが発生しました。ログを確認してください。");
  }
</script>

※ localhostでも本番URLに向ければ実行確認可
※ 反映は Cloudflare Pages デプロイ完了後

🚀 拡張の可能性

次に狙える改善	方法
デプロイ完了検知	Pages API をPolling監視
進行状況UI	Loader/Toastなどで表示
Slack通知	成功時Webhook送信
Actions進行監視ページ	GitHub RESTでRunログ取得

学び

Functions導入により ブラウザ→GitHub Actions が安全に実行可能に
.envとPages変数でローカル/本番分離できるのは◎
今後はデプロイ待ちUX改善でさらに快適になる

最終状態

項目	結果
Functions導入	✔ 完了
GitHub Actionsとの連携	✔ 成功
UI同期ボタントリガー	✔ 実運用可能
デプロイ検知UX	🔜 次フェーズで対応余地

まとめ

今回、md同期と反映がワンクリックで完了する環境を整備した。
未来的な執筆ワークフローの第一段階を達成。

次の成長タスク：

Deploy完了ポーリングAPI導入
UIで反映完了を通知
ログ可視化・Slack通知連携

継続改善余地は大きい。