【ハイブリッド開発】温故知新！FTP本番×Cloudflare Pagesプレビューで実現する5つの堅実Web開発手法

移行作業中の機会損失
├── 本番環境の停止リスク
├── 新システムの学習コスト
├── 予期しない不具合の対応
└── 元に戻せないという心理的プレッシャー

┌─────────────────┐    ┌────────────────────┐
│   本番環境      │    │  プレビュー環境    │
│  FTPサーバー     │    │ Cloudflare Pages   │
│                │    │                   │
│ ✅ 20年の実績    │    │ ✅ PR自動生成      │
│ ✅ 安定稼働      │    │ ✅ 即座にレビュー   │
│ ✅ ゼロ変更      │    │ ✅ 完全無料        │
└─────────────────┘    └────────────────────┘
         │                        │
         └────────┬─────────────────┘
                 │
         ┌───────────────┐
         │ 開発者の理想  │
         │ 両方のメリット │
         └───────────────┘

修正 → FTPアップロード → 本番確認 → 問題発見 → 慌てて修正

修正 → PR作成 → プレビュー確認 → レビュー → 承認 → FTP自動デプロイ

{
  "build": {
    "command": "npm run build",
    "destination": "dist",
    "environment": {
      "NODE_VERSION": "18"
    }
  },
  "preview": {
    "alias": "preview.your-domain.com"
  }
}

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

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to FTP
        uses: SamKirkland/FTP-Deploy-Action@4.3.3
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/

1. 機能ブランチ作成
   git checkout -b feature/new-feature

2. 開発・コミット・プッシュ
   git push origin feature/new-feature

3. PR作成
   → Cloudflare Pagesが自動でプレビュー生成
   → URL: https://abc123.your-project.pages.dev

4. レビュー・承認
   → プレビューURLで実際の動作を確認

5. mainマージ
   → GitHub ActionsがFTPサーバーに自動デプロイ

# 解決策：パーミッション確認
chmod 755 dist/

# 解決策：環境変数の統一
environment:
  BASE_URL: "https://your-domain.com"

# 解決策：キャッシュ活用
- name: Cache dependencies
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

本番: WordPress（動的CMS）
プレビュー: 静的生成版（Cloudflare Pages）

本番: オンプレサーバー
プレビュー: Cloudflare Pages

本番: 共用レンタルサーバー
プレビュー: 静的ビルド版