Solid

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

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

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

スターターを選択するように求められます。利用可能なオプションの中からいずれかを選択してください。次に、サーバーサイドレンダリングを有効にするかどうかを尋ねられます。yesと答えてください。最後に、TypeScriptを使用するかどうかを尋ねられます。yesまたはnoのいずれかを選択してください。

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

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

npm run dev

SolidStart Cloudflareの設定

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

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

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

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

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

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でデプロイする

Deploy via the `create-cloudflare` CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new Solid project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL.

Cloudflareダッシュボード経由でデプロイする

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。
作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定で次の情報を提供します：

設定オプション	値
プロダクションブランチ	`main`
ビルドコマンド	`npm run build`
ビルドディレクトリ	`dist`

サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pagesがnpm、プロジェクトの依存関係をインストールし、サイトをビルドしてデプロイするのを確認できます。

サイトをデプロイした後、プロジェクトのためのユニークなサブドメインが*.pages.devで提供されます。 Solidリポジトリに新しいコードをコミットするたびに、Cloudflare Pagesは自動的にプロジェクトを再ビルドしてデプロイします。また、新しいプルリクエストでのプレビュー展開にもアクセスでき、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

Learn more

By completing this guide, you have successfully deployed your Solid site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings