ウェブサイトを公開するまでの全工程

はじめに -- この記事の目的

第1章 -- デプロイとは何か

「ローカル」と「本番」

デプロイに必要な3つの要素

1. コード -- 動くアプリケーション（Next.js、React等）
2. サーバー -- コードを実行する場所（Vercel、Cloudflare、AWS等）
3. ドメイン -- アクセスするためのURL（toniolab.com等）

第2章 -- サーバーの選択肢

Vercel -- 最も簡単

• GitHubにプッシュするだけで自動デプロイ
• Next.jsの開発元なので相性が完璧
• 設定ほぼゼロ
• 無料枠が大きい

Cloudflare -- 速いが複雑

• 世界300以上のエッジロケーション
• D1データベースがネイティブに使える
• Workerとして動くのでレスポンスが速い

重要な違い

第3章 -- Cloudflare Workers vs Pages

Pages -- 静的ファイル配信

Workers -- サーバーサイド実行

toniolab.comがWorkersを使う理由

wrangler.toml -- Workers設定ファイル

name = "toniolab"
main = ".open-next/worker.js"
compatibility_date = "2024-11-27"
compatibility_flags = ["nodejs_compat"]

[assets]
directory = ".open-next/assets"

[[d1_databases]]
binding = "DB"
database_name = "iwasaki-phrases"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

• name: Worker名。Cloudflareダッシュボードに表示される
• main: 実行されるJavaScriptファイル。opennextjsが生成する
• compatibility_flags: Node.jsのAPIを使えるようにするフラグ
• [assets]: 静的ファイル（CSS、画像等）の置き場所
• [[d1_databases]]: D1データベースの接続設定

第4章 -- CI/CD -- 自動デプロイの仕組み

CI/CDとは

1. コードを書く
2. npm run build でビルド
3. ビルド結果をサーバーにアップロード
4. サーバーを再起動

1. コードを書く
2. git push する
3. 以上。あとは自動。

GitHub Actions

name: Deploy to Cloudflare
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npx @opennextjs/cloudflare build
      - run: npx @opennextjs/cloudflare deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

1. on: push: branches: [main] -- mainブランチにプッシュされたら実行
2. runs-on: ubuntu-latest -- GitHubのLinuxサーバーで実行
3. actions/checkout@v4 -- リポジトリのコードをダウンロード
4. actions/setup-node@v4 -- Node.js 22をインストール
5. npm ci -- パッケージをインストール
6. opennextjs/cloudflare build -- Next.jsをCloudflare用にビルド
7. opennextjs/cloudflare deploy -- Cloudflareにデプロイ

なぜWindowsではなくGitHub Actionsか

第5章 -- D1データベース

D1とは

アクセス方法: バインディング vs REST API

Worker Secrets -- 秘密情報の管理

echo "YOUR_TOKEN" | npx wrangler secret put CLOUDFLARE_API_TOKEN

APIトークンの権限

第6章 -- Workerサイズ制限

無料プランの壁: 3 MiB

なぜサイズが大きくなるのか

何を削ったか

1. 世界地図ページ6個: 大きなTopoJSONデータ（739KB）を含む
2. 業務用コンポーネント170個: 請求書、工程表、顧客管理等。英語学習に不要
3. 未使用データファイル40個: 料理日記、健康ジャーナル等
4. プロトタイプページ13個: 古いダッシュボード、レビュー機能等

重要な教訓

1. 不要なコードを入れない: 使わないページ・コンポーネントは削除
2. 大きなデータファイルに注意: JSONの地図データ等は特に重い
3. 有料プランの検討: $5/月で10 MiBまで。3 MiBがきつい場合は現実的
4. バンドル分析: どのファイルが大きいかを確認してから最適化する

第7章 -- DNS とカスタムドメイン

ドメインとは

ドメインの設定手順

1. ドメイン購入: Cloudflare Registrar等で取得（年$10程度）
2. DNSレコード設定: ドメインがどのサーバーを指すか設定
3. Workers側の設定: このドメインのリクエストを受け付けるよう設定

作業の流れ

1. Cloudflare Registrarでドメイン取得済み
2. Workers設定 → Routes → Custom Domains → toniolab.com を追加
3. SSL証明書が自動発行
4. https://toniolab.com でアクセス可能に

第8章 -- トラブルシューティング実録

エラー1: Pages デプロイで404

エラー2: GitHub push が拒否される

エラー3: D1が空のデータを返す

エラー4: D1アクセスが「account not authorized」

エラー5: Worker サイズ超過

エラー6: TypeScript型エラーでビルド失敗

第9章 -- 全体像の整理

デプロイパイプラインの流れ

ローカルでコードを編集
      ↓
git push origin main
      ↓
GitHub Actions が起動（ubuntu-latest）
      ↓
npm ci（パッケージインストール）
      ↓
opennextjs/cloudflare build（Next.js→Worker変換）
      ↓
opennextjs/cloudflare deploy（Cloudflareにアップロード）
      ↓
Worker更新 → toniolab.com に反映

関係する技術の地図

• Next.js: アプリケーションフレームワーク
• opennextjs-cloudflare: Next.js→Cloudflare変換ツール
• Cloudflare Workers: サーバーレス実行環境
• Cloudflare D1: エッジSQLデータベース
• GitHub Actions: CI/CDパイプライン
• GitHub Secrets: 秘密情報の安全な保管
• Worker Secrets: ランタイムの環境変数
• DNS: ドメインとサーバーの紐付け
• wrangler: Cloudflareの管理CLI

覚えておくべき数字

おわりに

• Workers/Pagesの違い
• CI/CDの仕組み
• データベースの認証と権限
• バンドルサイズの最適化
• DNSとドメインの設定