近年のフロントエンド開発では、パフォーマンスとユーザー体験の向上が重要視されています。 SolidJS は React のような構文でありながら、仮想 DOM を使用せず、きめ細かいリアクティビティにより高速な動作を実現するフレームワークです。

SolidStart は、その SolidJS の力を最大限に活かすメタフレームワークで、SSR（サーバーサイドレンダリング）や静的サイト生成に対応しています。 そして Cloudflare Pages は、グローバルなエッジネットワーク上でアプリケーションを高速に配信できるプラットフォームですね。 この組み合わせにより、世界中のユーザーに低遅延で高速なアプリケーションを届けられるのです。

本記事では、SolidStart で構築したアプリケーションを Cloudflare Pages にデプロイし、エッジ環境で最適化する具体的な手順を解説します。

背景

SolidJS と SolidStart の特徴

SolidJS は、JSX 構文を使用しながらも仮想 DOM を使わない、新しいアプローチのフロントエンドフレームワークです。 リアクティビティのシステムが非常に効率的で、必要な部分だけが再レンダリングされるため、パフォーマンスが優れています。

SolidStart は SolidJS の公式メタフレームワークで、以下の機能を提供します。

#	機能	説明
1	SSR（サーバーサイドレンダリング）	初回表示を高速化し、SEO にも有利
2	ファイルベースルーティング	pages ディレクトリベースの直感的なルーティング
3	API ルート	サーバーサイド処理を簡単に実装
4	ストリーミング SSR	Suspense を活用した段階的なレンダリング
5	Islands アーキテクチャ	必要な部分だけをハイドレーション

以下の図は、SolidStart アプリケーションの基本的なアーキテクチャを示しています。

mermaidCopy codeflowchart TB
  client["クライアント<br/>(ブラウザ)"]
  edge["Edge サーバー<br/>(Cloudflare)"]
  app["SolidStart<br/>アプリケーション"]
  api["API ルート"]
  db[("データベース/<br/>外部 API")]

  client -->|リクエスト| edge
  edge -->|SSR 実行| app
  app -->|データ取得| api
  api -->|クエリ| db
  api -->|レスポンス| app
  app -->|HTML| edge
  edge -->|配信| client

この図から分かるように、SolidStart はクライアントとサーバーの両方で動作し、エッジ環境での実行に最適化されています。

Cloudflare Pages の強み

Cloudflare Pages は、Cloudflare の世界中に分散されたエッジネットワークを活用したホスティングサービスです。 主な特徴は以下の通りですね。

#	特徴	メリット
1	グローバル CDN	世界中のユーザーに低遅延で配信
2	Edge Functions	エッジでの動的処理が可能
3	無料枠が充実	小規模プロジェクトなら無料で利用可能
4	Git 連携	GitHub/GitLab からの自動デプロイ
5	プレビュー環境	PR ごとにプレビュー URL を自動生成

Cloudflare のエッジネットワークは世界 300 以上の都市に展開されており、ユーザーに最も近いロケーションからコンテンツが配信されます。

課題

従来のデプロイ方法の問題点

SolidStart アプリケーションを従来の方法でデプロイする際、いくつかの課題が存在します。

パフォーマンスの制限

通常の VPS やコンテナベースのホスティングでは、サーバーが特定の地域に配置されるため、遠隔地のユーザーにとってレイテンシが大きくなります。 例えば、東京にサーバーがある場合、ヨーロッパのユーザーは 200ms 以上の遅延を経験することも珍しくありません。

スケーラビリティの課題

突然のトラフィック増加に対応するには、手動でのスケーリング設定やオートスケーリングの構成が必要です。 これには追加のコストと運用負荷がかかってしまいますね。

インフラ管理の複雑さ

サーバーの管理、セキュリティパッチの適用、ロードバランサーの設定など、インフラ面での管理コストが発生します。

以下の図は、従来のデプロイとエッジデプロイの違いを示しています。

mermaidCopy codeflowchart LR
  subgraph traditional["従来型デプロイ"]
    user1["ユーザー<br/>(日本)"] -->|50ms| server1["サーバー<br/>(東京)"]
    user2["ユーザー<br/>(欧州)"] -->|200ms| server1
    user3["ユーザー<br/>(米国)"] -->|150ms| server1
  end

  subgraph edge_deploy["エッジデプロイ"]
    user4["ユーザー<br/>(日本)"] -->|10ms| edge1["Edge<br/>(東京)"]
    user5["ユーザー<br/>(欧州)"] -->|10ms| edge2["Edge<br/>(ロンドン)"]
    user6["ユーザー<br/>(米国)"] -->|10ms| edge3["Edge<br/>(NY)"]
  end

エッジデプロイでは、各地域のユーザーが最寄りのエッジロケーションにアクセスするため、レイテンシを大幅に削減できます。

解決策

Cloudflare Pages による Edge 最適化

Cloudflare Pages に SolidStart をデプロイすることで、上記の課題を解決できます。 具体的には以下のような最適化が実現できますね。

グローバルなエッジ配信

静的アセット（JavaScript、CSS、画像）だけでなく、SSR によって生成される動的な HTML も、エッジで実行され配信されます。 これにより、世界中のどこからアクセスしても、一貫して高速なレスポンスを提供できるのです。

自動スケーリング

Cloudflare のインフラは自動的にスケールするため、トラフィックの急増にも柔軟に対応します。 設定や追加コストを気にする必要がありません。

ゼロコンフィグのデプロイ

Git リポジトリと連携することで、コミットやマージのたびに自動的にビルド・デプロイが実行されます。

以下は、Cloudflare Pages での SolidStart デプロイフローです。

mermaidCopy codeflowchart TD
  code["コード<br/>プッシュ"] -->|Git| repo["GitHub/<br/>GitLab"]
  repo -->|Webhook| cf["Cloudflare<br/>Pages"]
  cf -->|ビルド| build["yarn install &<br/>yarn build"]
  build -->|成功| deploy["エッジに<br/>デプロイ"]
  deploy -->|配信| global["グローバル<br/>CDN"]
  global -->|アクセス| users["ユーザー"]

  build -->|失敗| notify["通知"]
  notify -->|修正| code

この自動化されたフローにより、開発者はコードに集中でき、インフラ管理の負担から解放されます。

アダプターの役割

SolidStart を Cloudflare Pages にデプロイするには、専用のアダプターを使用します。 アダプターは、SolidStart の出力を Cloudflare の実行環境に適合させる役割を果たします。

#	項目	内容
1	アダプター名	solid-start-cloudflare-pages
2	役割	Cloudflare Workers 形式に変換
3	SSR 対応	エッジでの SSR 実行をサポート
4	静的アセット	自動的に CDN に配置

具体例

それでは、実際に SolidStart アプリケーションを Cloudflare Pages にデプロイする手順を見ていきましょう。

プロジェクトのセットアップ

まず、SolidStart プロジェクトを作成します。

bashCopy code# SolidStart プロジェクトの作成
yarn create solid

プロジェクト作成時には、いくつかの質問に答える必要があります。

bashCopy code# プロジェクト名を入力
? Project name: my-solid-app

# テンプレートを選択（SolidStart を選択）
? Which template would you like to use?
❯ SolidStart

プロジェクトが作成されたら、ディレクトリに移動します。

bashCopy code# プロジェクトディレクトリに移動
cd my-solid-app

Cloudflare Pages アダプターのインストール

次に、Cloudflare Pages 用のアダプターをインストールします。

bashCopy code# Cloudflare Pages アダプターのインストール
yarn add -D solid-start-cloudflare-pages

このアダプターにより、SolidStart の出力が Cloudflare Workers 形式に変換されますね。

アダプターの設定

app.config.ts ファイルを開き、アダプターを設定します。

typescriptCopy code// app.config.ts
import { defineConfig } from '@solidjs/start/config';
import cloudflare from 'solid-start-cloudflare-pages';

export default defineConfig({
  // Cloudflare Pages アダプターを指定
  adapter: cloudflare(),
});

この設定により、ビルド時に Cloudflare Pages 向けの最適化が行われます。

ビルド設定の調整

package.json にビルドスクリプトが正しく設定されているか確認しましょう。

jsonCopy code{
  "name": "my-solid-app",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  }
}

vinxi build コマンドが、Cloudflare Pages 用の出力を生成します。

ローカルでの動作確認

デプロイ前に、ローカルで動作確認を行います。

bashCopy code# 開発サーバーの起動
yarn dev

ブラウザで http:​/​​/​localhost:3000 にアクセスし、アプリケーションが正常に動作することを確認してください。

bashCopy code# プロダクションビルドの実行
yarn build

ビルドが成功すると、.output ディレクトリにビルド成果物が生成されます。

Git リポジトリの準備

Cloudflare Pages は Git リポジトリと連携してデプロイを行います。 まず、プロジェクトを Git リポジトリに追加しましょう。

bashCopy code# Git リポジトリの初期化
git init

.gitignore ファイルが適切に設定されているか確認します。

gitignoreCopy code# .gitignore
node_modules/
.output/
.vinxi/
dist/
.env
.env.local

変更をコミットします。

bashCopy code# ファイルをステージング
git add .

# コミット
git commit -m "Initial commit: SolidStart with Cloudflare Pages adapter"

GitHub または GitLab にリポジトリを作成し、プッシュします。

bashCopy code# リモートリポジトリの追加（GitHub の例）
git remote add origin https://github.com/your-username/my-solid-app.git

# プッシュ
git push -u origin main

Cloudflare Pages でのプロジェクト作成

Cloudflare のダッシュボードから、新しい Pages プロジェクトを作成します。

手順 1: Pages ダッシュボードへアクセス

Cloudflare にログインし、左サイドバーから「Pages」を選択します。

手順 2: プロジェクトの作成

「Create a project」ボタンをクリックし、「Connect to Git」を選択します。

#	項目	設定値
1	Git プロバイダー	GitHub または GitLab を選択
2	リポジトリ	my-solid-app を選択
3	ブランチ	main または master

手順 3: ビルド設定

ビルド設定を以下のように指定します。

#	設定項目	値
1	Framework preset	SolidStart
2	Build command	yarn build
3	Build output directory	.output​/​public
4	Root directory	​/​ (デフォルト)

フレームワークプリセットで「SolidStart」を選択すると、これらの設定は自動的に入力されますね。

環境変数の設定

アプリケーションが環境変数を使用する場合、Cloudflare Pages のダッシュボードで設定できます。

typescriptCopy code// src/routes/api/config.ts
// 環境変数の使用例
export async function GET() {
  // Cloudflare Pages の環境変数にアクセス
  const apiKey = process.env.API_KEY;

  return new Response(
    JSON.stringify({ configured: !!apiKey }),
    {
      headers: { 'Content-Type': 'application/json' },
    }
  );
}

環境変数は、Cloudflare Pages のダッシュボードで以下のように設定します。

設定手順

1. プロジェクトの「Settings」タブを開く
2. 「Environment variables」セクションを選択
3. 「Add variable」をクリック
4. 変数名（例: API_KEY）と値を入力
5. 「Production」または「Preview」環境を選択

デプロイの実行

「Save and Deploy」ボタンをクリックすると、自動的にビルドとデプロイが開始されます。

mermaidCopy codesequenceDiagram
  participant dev as 開発者
  participant git as Git<br/>リポジトリ
  participant cf as Cloudflare<br/>Pages
  participant edge as Edge<br/>Network

  dev->>git: git push
  git->>cf: Webhook 通知
  cf->>cf: yarn install
  cf->>cf: yarn build
  cf->>edge: デプロイ
  edge-->>dev: デプロイ完了<br/>URL 発行

ビルドプロセスは、Cloudflare のダッシュボードでリアルタイムに確認できます。

デプロイ完了の確認

デプロイが成功すると、*.pages.dev ドメインが発行されます。

bashCopy code# 例: https://my-solid-app.pages.dev

ブラウザでアクセスし、アプリケーションが正常に動作していることを確認しましょう。

カスタムドメインの設定

独自ドメインを使用したい場合は、Cloudflare Pages でカスタムドメインを設定できます。

設定手順

1. プロジェクトの「Custom domains」タブを開く
2. 「Set up a custom domain」をクリック
3. ドメイン名を入力（例: app.example.com）
4. DNS レコードの設定を確認

Cloudflare が DNS を管理している場合、レコードは自動的に追加されます。

textCopy code# 自動的に追加される DNS レコード
app.example.com CNAME my-solid-app.pages.dev

外部の DNS プロバイダーを使用している場合は、指示に従って CNAME レコードを手動で追加してください。

Edge での SSR 最適化

SolidStart の SSR は、Cloudflare のエッジで実行されます。 これにより、ユーザーに最も近い場所でページが生成されるため、レスポンス時間が大幅に短縮されますね。

typescriptCopy code// src/routes/index.tsx
// SSR でのデータフェッチ例
import { createServerData$ } from 'solid-start/server';
import { RouteDataArgs, useRouteData } from 'solid-start';

export function routeData({ params }: RouteDataArgs) {
  // サーバーサイドでデータを取得
  // エッジで実行されるため、高速
  return createServerData$(async () => {
    const response = await fetch(
      'https://api.example.com/data'
    );
    return response.json();
  });
}

この関数は、ページがリクエストされるたびにエッジで実行され、最新のデータを取得します。

typescriptCopy code// コンポーネントでデータを使用
export default function Home() {
  const data = useRouteData<typeof routeData>();

  return (
    <main>
      <h1>SolidStart on Edge</h1>
      {/* データの表示 */}
      <div>{data()?.content}</div>
    </main>
  );
}

Suspense と組み合わせることで、ストリーミング SSR も活用できます。

キャッシュ戦略の実装

Cloudflare のエッジでは、レスポンスをキャッシュすることでさらなる高速化が可能です。

typescriptCopy code// src/routes/api/cached-data.ts
// キャッシュを活用した API ルート
export async function GET({ request }) {
  // キャッシュキーの生成
  const cacheKey = new Request(request.url, request);
  const cache = caches.default;

  // キャッシュを確認
  let response = await cache.match(cacheKey);

  if (!response) {
    // キャッシュミスの場合、データを取得
    const data = await fetchData();

    response = new Response(JSON.stringify(data), {
      headers: {
        'Content-Type': 'application/json',
        // 5分間キャッシュ
        'Cache-Control': 'public, max-age=300',
      },
    });

    // キャッシュに保存
    await cache.put(cacheKey, response.clone());
  }

  return response;
}

適切なキャッシュ戦略により、API のレスポンス時間を大幅に短縮できますね。

エラー処理とデバッグ

デプロイ後にエラーが発生した場合、Cloudflare Pages のログを確認します。

よくあるエラー 1: ビルドエラー

textCopy codeエラーコード: Build failed
エラーメッセージ:
Error: Cannot find module 'solid-start-cloudflare-pages'

発生条件: アダプターがインストールされていない、または package.json に記載されていない

解決方法:

1. package.json の devDependencies に solid-start-cloudflare-pages が含まれているか確認
2. 含まれていない場合、yarn add -D solid-start-cloudflare-pages を実行
3. 変更をコミット・プッシュ

よくあるエラー 2: Runtime Error

textCopy codeエラーコード: 500 Internal Server Error
エラーメッセージ:
TypeError: Cannot read property 'env' of undefined

発生条件: 環境変数が設定されていない、またはアクセス方法が間違っている

解決方法:

1. Cloudflare Pages のダッシュボードで環境変数を設定
2. コード内で process.env を使用していることを確認
3. 必要に応じて、Cloudflare Workers の env オブジェクトを使用

typescriptCopy code// 修正前（エラーになる可能性）
const key = process.env.API_KEY;

// 修正後（Cloudflare Workers の場合）
export async function GET({ platform }) {
  const key = platform.env.API_KEY;
  // ...
}

よくあるエラー 3: ルーティングエラー

textCopy codeエラーコード: 404 Not Found
エラーメッセージ:
Page not found

発生条件: SPA モードで動作しており、リロード時にルートが見つからない

解決方法:

1. app.config.ts で SSR が有効になっているか確認
2. _routes.json ファイルでルーティング設定を確認
3. Cloudflare Pages の「Functions」設定を確認

パフォーマンスモニタリング

デプロイ後は、Cloudflare Analytics でパフォーマンスを監視できます。

#	指標	確認内容
1	Time to First Byte (TTFB)	サーバーの応答速度
2	First Contentful Paint (FCP)	最初のコンテンツ表示時間
3	Cache Hit Rate	キャッシュの効果
4	Bandwidth	データ転送量

これらの指標を定期的にチェックし、必要に応じて最適化を行いましょう。

まとめ

本記事では、SolidStart アプリケーションを Cloudflare Pages にデプロイし、エッジ環境で最適化する手順を解説しました。

重要なポイント

SolidJS の高速性と SolidStart の SSR 機能、そして Cloudflare のグローバルなエッジネットワークを組み合わせることで、世界中のユーザーに高速なアプリケーションを提供できます。 アダプターの設定からデプロイまでの手順は比較的シンプルで、Git リポジトリと連携することで自動化された CI/CD パイプラインを構築できますね。

得られるメリット

#	メリット	効果
1	低レイテンシ	グローバルなエッジ配信により、どこからでも高速アクセス
2	自動スケーリング	トラフィック増加に自動対応
3	運用コスト削減	インフラ管理が不要
4	開発効率向上	自動デプロイで開発に集中できる

エッジでの SSR 実行やキャッシュ戦略を適切に実装することで、さらなるパフォーマンス向上も期待できます。 ぜひ、あなたの次のプロジェクトで SolidStart × Cloudflare Pages の組み合わせを試してみてください。

関連リンク

• SolidJS 公式サイト
• SolidStart ドキュメント
• Cloudflare Pages ドキュメント
• solid-start-cloudflare-pages アダプター
• Cloudflare Workers ドキュメント
• SolidJS GitHub リポジトリ