CDN アーキテクチャ設計書

1. 概要

@ecauth/auth-js の UMD/ESM ビルドを Cloudflare Pages で配信し、EC-CUBE プラグインから cdn.ec-auth.io 経由で読み込む。

背景

• EC-CUBE プラグインは composer require でインストールされるが、npm パッケージのビルド成果物（UMD ファイル）は PHP パッケージに含まれない
• CDN 配信にすることで、プラグイン側のアセット管理（node_modules からのコピー、ビルドステップ）が不要になる
• 将来のマルチプラットフォーム展開（WordPress、Magento 等）でも同じ CDN URL を利用可能

2. アーキテクチャ全体像

flowchart TB
    subgraph GitHub["GitHub"]
        Release["GitHub Release
(v0.1.3)"]
        Actions["GitHub Actions
(publish.yml)"]
        npm["npmjs.com
(@ecauth/auth-js)"]
    end

    subgraph Cloudflare["Cloudflare"]
        Pages["Cloudflare Pages
(ecauth-cdn)"]
        Edge["Cloudflare Edge Cache"]
        DNS["DNS
cdn.ec-auth.io"]
    end

    subgraph Client["EC-CUBE / ブラウザ"]
        Script["<script src="cdn.ec-auth.io/...">"]
    end

    Release -->|trigger| Actions
    Actions -->|pnpm publish| npm
    Actions -->|upload artifacts| Release
    Actions -->|wrangler pages deploy| Pages
    DNS --> Edge
    Edge -->|cache miss| Pages
    Script -->|HTTPS| Edge

デプロイフロー

1. GitHub Release を作成（v0.1.3 等）
2. publish.yml ワークフローがトリガー
3. npm publish → ビルド成果物を Release にアップロード → 過去バージョンをダウンロード → Cloudflare Pages にデプロイ
4. cdn.ec-auth.io 経由でアクセス可能

3. URL 設計

https://cdn.ec-auth.io/auth-js/{version}/ecauth-auth.umd.js
https://cdn.ec-auth.io/auth-js/{version}/ecauth-auth.esm.js
https://cdn.ec-auth.io/auth-js/latest/ecauth-auth.umd.js

プラグインのリリース版は固定バージョン URL を使用し、開発時は latest を利用する。

EC-CUBE プラグインでの利用

<script src="https://cdn.ec-auth.io/auth-js/0.1.3/ecauth-auth.umd.js"></script>
<script>
  EcAuth.webauthn.authenticate({
    optionsUrl: '{{ url("ecauth_passkey_authenticate_options") }}',
    verifyUrl: '{{ url("ecauth_passkey_authenticate_verify") }}',
    csrfToken: csrfToken
  });
</script>

4. インフラ構成

Cloudflare リソース（Terraform）

Terraform 構成は ecauth-infrastructure/environments/cdn/ で管理。

# environments/cdn/main.tf
resource "cloudflare_pages_project" "ecauth_cdn" {
  account_id        = var.cloudflare_account_id
  name              = "ecauth-cdn"
  production_branch = "main"
}

resource "cloudflare_pages_domain" "cdn" {
  account_id   = var.cloudflare_account_id
  project_name = cloudflare_pages_project.ecauth_cdn.name
  name         = "cdn.ec-auth.io"
}

resource "cloudflare_dns_record" "cdn" {
  zone_id = var.cloudflare_zone_id
  name    = "cdn"
  type    = "CNAME"
  content = "ecauth-cdn.pages.dev"
  ttl     = 1
  proxied = true
}

1Password シークレット

5. CI/CD パイプライン

publish.yml（ecauth-auth-js）

flowchart LR
    A["Release 作成"] --> B["Build & Test"]
    B --> C["バージョン検証"]
    C --> D["npm publish
(skip if published)"]
    D --> E["Release に
artifacts アップロード"]
    E --> F["cdn-dist 準備
(current + past versions)"]
    F --> G["Cloudflare Pages
deploy --branch=main"]

安全策

過去バージョンの蓄積

Cloudflare Pages は毎回全ファイルをデプロイするため、過去バージョンを残す仕組みが必要。

現在の方式: GitHub Releases からビルド成果物をダウンロードして cdn-dist に含めてデプロイ。

cdn-dist/
├── auth-js/
│   ├── 0.1.1/
│   │   ├── ecauth-auth.umd.js
│   │   └── ecauth-auth.esm.js
│   ├── 0.1.2/
│   │   ├── ecauth-auth.umd.js
│   │   └── ecauth-auth.esm.js
│   ├── 0.1.3/
│   │   ├── ecauth-auth.umd.js
│   │   └── ecauth-auth.esm.js
│   └── latest/
│       ├── ecauth-auth.umd.js
│       └── ecauth-auth.esm.js

将来の方式: バージョン数が増えた場合、Cloudflare R2（オブジェクトストレージ）への移行を検討。追記型デプロイが可能になり、過去バージョンの再ダウンロードが不要になる。詳細は ecauth-auth-js#4 を参照。

6. 関連リポジトリと変更対象

参考資料

• Cloudflare Pages
• Cloudflare R2
• Wrangler CLI - pages deploy
• @ecauth/auth-js 実装計画
• EcAuth ドメインアーキテクチャ