Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

SolidStart

最終更新 Markdown で表示Agent セットアップ

Solid ↗ は、JSX をベースにした現代的な開発体験で、パフォーマンスの高いアプリケーションを生成することに焦点を当てたオープンソースのウェブアプリケーションフレームワークです。

このガイドでは、SolidStart ↗（Solid のメタフレームワーク）で実装した新しい Solid アプリケーションを作成し、Cloudflare Pages でデプロイします。

新しいプロジェクトを作成する

create-cloudflare ↗ CLI（C3）で新しいプロジェクトをセットアップします。C3 は新しいプロジェクトディレクトリを作成し、Solid の公式セットアップツールを起動し、すぐにデプロイするかどうかを選べます。

create-cloudflare で新しい Solid プロジェクトを作成するには、次のコマンドを実行します。

npm create cloudflare@latest -- my-solid-app --framework=solid

スターターの選択を求められます。利用できるオプションから任意のものを選びます。次に Server Side Rendering（サーバーサイドレンダリング）を有効にするか尋ねられるので、yes と答えます。最後に TypeScript を使うか尋ねられるので、yes または no を選びます。

create-cloudflare は、Wrangler CLI と SolidStart Cloudflare Pages アダプターを含む依存関係をインストールし、セットアップの質問を表示します。

プロジェクトの依存関係をインストールしたあと、アプリケーションを起動します。

npm run dev

SolidStart の Cloudflare 設定

SolidStart を Cloudflare Pages にデプロイできるように設定するには、設定ファイルを次のように更新します。

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
+  server: {
+    preset: "cloudflare-pages",

+    rollupConfig: {
+      external: ["node:async_hooks"]
+    }
+  }
});

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Cloudflare Pages でデプロイする

create-cloudflare CLI（C3）でデプロイする

create-cloudflare（C3） ↗ で新しい Solid プロジェクトを作成すると、C3 はプロジェクトに必要な依存関係をすべてインストールし、CLI からデプロイするかどうかを尋ねます。デプロイするとサイトが公開され、デプロイ URL が渡されます。

Cloudflare ダッシュボードからデプロイする

サイトを Pages にデプロイするには、次の手順を実行します。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選びます。

  3. Pages タブを選びます。

  4. Import an existing Git repository を選びます。

  5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

  6. Set up builds and deployments セクションで、次の情報を入力します。

設定オプション 値
Production branch main
Build command npm run build
Build directory dist

サイトの設定が終わったら、最初のデプロイを開始できます。Cloudflare Pages が npm、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。 Solid リポジトリに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も利用できるので、本番に出す前に変更後の見た目を確認できます。

さらに学ぶ

このガイドを完了すると、Solid サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？