Works — Corporate site
docata.jp
Astro と Cloudflare Workers で作った、ランニングコストがドメイン代だけのコーポレートサイト。このサイトそのものの構成です。
Tech stack
技術スタック
- フレームワーク
- Astro 7完全静的（SSG）。ページ表示に JavaScript を必要としない
- 言語
- TypeScriptstrict 設定
- HTML / CSS
- スタイル
- CSS（フレームワークなし）CSS カスタムプロパティでデザイントークンを管理。Astro のスコープ付き CSS
- ホスティング
- Cloudflare WorkersStatic Assets のみ。Worker スクリプトなし
- CI / CD
- Cloudflare Workers BuildsGitHub 連携。main への push で自動ビルド・デプロイ
- WranglerCloudflare 公式 CLI（npx wrangler deploy）
- リポジトリ
- GitHubPrivate リポジトリ
- ドメイン / DNS
- Cloudflare DNSネームサーバーを Cloudflare に移管。Worker のカスタムドメイン
- Cloudflare Redirect Ruleswww → ルートドメインへ 301 リダイレクト
- お名前.comドメインレジストラ
- アクセス解析
- Cloudflare Web AnalyticsCookie を使わないプライバシー配慮型
- フォント
- Zen Kaku Gothic New / Inter TightGoogle Fonts。表示を止めない非同期読み込み
- 実行環境
- Node.js 22.12+
Architecture
システム構成
- LocalMac で開発Astro の開発サーバーで確認しながらコードを書く
- GitHubmain ブランチへ pushPrivate リポジトリ。push が公開の合図
- Workers Builds自動ビルド・デプロイ
npm run build→npx wrangler deploy - CloudflareStatic Assets として配置dist/ の HTML・CSS・画像を世界中のエッジへ。push から 1 分前後で反映
- Visitordocata.jp にアクセスwww.docata.jp は docata.jp へ 301 リダイレクト
- Cloudflare DNS名前解決・プロキシドメインは Worker のカスタムドメインとして接続
- Edge静的ファイルを配信存在しない URL は 404 ページを返す（not_found_handling）
- AnalyticsWeb Analytics で計測Cookie なしでアクセス数を把握
Decisions
なぜ、この構成にしたのか
- 01
ランニングコストを「ドメイン代だけ」にする
コーポレートサイトはアクセスが急増するものではありません。サーバーもデータベースも持たない静的サイトにすれば、Cloudflare の無料枠の中で運用でき、毎月の固定費はかかりません。中小企業のシステムでも、まず「維持費がかからない形」を考えるのが出発点です。
- 02
あえて Cloudflare を選ぶ
Vercel（MINT CARS）と Google Firebase（i7）は別の案件ですでに使っています。今回は知見を広げる目的で Cloudflare を採用しました。Workers の Static Assets は、静的ファイルを世界中のエッジから配信でき、将来 API が必要になれば同じ Worker に処理を足せるのも決め手です。
- 03
Astro で「必要なときだけ JavaScript」
Astro は、何もしなければ JavaScript を一切送らない HTML を出力します。動きが必要な部分だけ小さなスクリプトを足せるので、表示の速さとデザインの自由度を両立できます。将来 microCMS を入れるときも、ビルド時にデータを取得する形でそのまま静的サイトを保てます。
- 04
SSR 構成から完全静的へ切り替える
create-cloudflare で作成した直後は、Cloudflare アダプター付きの SSR 構成（KV / Images バインディングあり）でした。このサイトには不要なため、アダプターと型定義を外し、output: static の完全静的構成に切り替えています。
- 05
CSS フレームワークを使わない
ページ数が少なく、デザインの細部まで作り込みたいサイトなので、Tailwind CSS などは使わず素の CSS で組んでいます。色・余白・書体はすべて CSS カスタムプロパティで一元管理しています。
Numbers
コストと表示速度
- 月額の固定費
- 0円
- Performance
- 99
- Accessibility
- 100
- SEO
- 100
※ 固定費はドメイン代を除く。スコアは Lighthouse（モバイル）による 2026 年 10 月時点の計測値です。
Pitfalls
つまずいたこと
- 01
Worker 名と wrangler.jsonc の name を一致させる
一致していないと、Workers Builds が失敗したり、別の Worker が新しく作られたりします。
- 02
astro add cloudflare を安易に実行しない
静的サイトのつもりでも、実行すると SSR 構成に戻り、不要なバインディングが復活します。
- 03
プレビュー用ワイルドカード DNS に注意
カスタムドメインを「Production and Preview」で有効にすると *.docata.jp が自動で作られ、明示的なレコードのないサブドメイン（www など）が Worker に吸い込まれます。www には明示的なレコードを作って解決しました。
- 04
複数の GitHub アカウントを使い分ける環境での認証
グローバル設定で github.com の認証を GitHub CLI に任せていたため、別アカウントの PAT が保存されませんでした。このリポジトリだけ macOS キーチェーンを使うようにリポジトリ単位の設定で上書きしています。
Roadmap
これからの拡張
- P1
制作ノートを Markdown で書き始める
Astro の Content Collections を使い、記事をファイルで管理します。
- P2
microCMS を導入する
記事や実績を管理画面から更新できるようにします。ビルド時に API からデータを取得するため、サイトは静的なまま。更新時は Webhook で再ビルドします。
- P3
お問い合わせフォームを Workers で作る
Cloudflare Turnstile でスパムを防ぎ、フォームの処理だけを Worker で行います。ページは静的なまま保ちます。