3社連携アーキテクチャ & 構築議事録

VSC・GitHub・Cloudflareの役割分担と、手動脱却を果たした作業全容のまとめ

ポータルへ戻る

三位一体の役割分担図

ローカル工房（作業机）

VS Code

手元のパソコン内部でファイルを書き換えたり、JSONデータを整える場所。

あなたの操作:

・コード・単語の編集

・Ctrl + S で保存

・下部ターミナルで送信合図

中間金庫（マスター保管庫）

GitHub

インターネット上に完全非公開（Private）で配置された、過去すべての履歴を持つ中央金庫。

役割:

・全ファイルの安全保管

・更新データの着信窓口

・Cloudflareへ更新を即時通報

世界配信所（電波塔）

Cloudflare Pages

GitHubからデータを受け取り、世界中のエッジサーバーへ即座に公開・配信するプラットフォーム。

自動処理:

・着信を自動検知（Webhook）

・数秒で最新版を全世界配置

・PIN認証によるアクセス防護

1 PCで編集・保存 (Ctrl+S)

2 3行コマンド送信 (Push)

3 GitHub金庫に格納

4 Cloudflareが自動反映！

本日の導入作業議事録

STEP 1: 開発環境の基盤構築

Git for Windowsの導入 & VS Code連携

PC内にバージョン管理エンジン「Git」をインストール。VS Code内蔵ターミナルから直接Gitコマンドが扱える状態を確立。

STEP 2: リポジトリ設計

GitHub上の受け皿作成 & 初回Push

アカウント hirotech86 直下に非公開リポジトリ training-hub を開設。7ファイル（認証、単語カード、JSON、分析ボード群）を一括アップロード。

STEP 3: 自動配信の確立

Cloudflare PagesとGitリポジトリの直結

手動ドラッグ＆ドロップ方式を廃止し、GitHubとPagesを連携。Framework Preset「None」の静的最適化構成で即時ビルド・公開パイプライン（CI/CD）を開通。

明日からの最短ルーティン（VSCで打つだけ）

git add .
git commit -m "update data"
git push origin main

これだけで数十秒後に本番URL（https://training-hub-dr6.pages.dev）へ自動反映されます。