Remix

Remix ↗ は、ウェブの力を最大限に活用することに焦点を当てたフレームワークです。Cloudflare Workersのように、最新のJavaScript APIを使用し、意味のあるHTTPステータスコード、キャッシング、ユーザビリティとパフォーマンスの最適化など、ウェブの基本に重点を置いています。

このガイドでは、新しいRemixアプリケーションを作成し、Cloudflare Pagesにデプロイします。

新しいプロジェクトの設定

create-cloudflare ↗ CLI (C3) を使用して新しいプロジェクトを設定します。C3は新しいプロジェクトディレクトリを作成し、Remixの公式セットアップツールを起動し、即座にデプロイするオプションを提供します。

create-cloudflareを使用して新しいRemixプロジェクトを作成するには、次のコマンドを実行します：

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

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

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

create-cloudflareは、Wrangler CLIや必要なアダプターなどの追加依存関係をインストールし、セットアップに関する質問を行います。

プロジェクトの設定が完了したら、ディレクトリを変更し、次のコマンドを実行してプロジェクトをレンダリングします：

# Cloudflare Pagesを選択
cd my-remix-app
npm run dev

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 remote add origin https://github.com/<your-gh-username>/<repository-name>
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 Remix 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 > Create application > Pages > Connect to Gitを選択します。
作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで次の情報を提供します：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`build/client`

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

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

Wrangler CLI経由でデプロイ

新しいRemixプロジェクトを作成するためにcreate-cloudflare(C3) ↗を使用した場合、C3は自動的にプロジェクトをwranglerでスキャフォールディングします。プロジェクトをデプロイするには、次のコマンドを実行します：

npm run deploy

Remixアプリケーションにバインディングを作成して追加する

Remixアプリケーションにバインディングを追加するには、Bindingsを参照してください。バインディングを使用すると、アプリケーションがKVネームスペース、Durable Objects、R2ストレージバケット、およびD1データベースなどのCloudflare開発者製品と対話できるようになります。

ローカル開発におけるリソースのバインディング

Remixは、WranglerのgetPlatformProxyを使用して、Cloudflare環境をローカルでシミュレートします。getPlatformProxyは、プロジェクトの vite.config.ts ファイルでcloudflareDevProxyVitePlugin ↗を介して設定します。

ローカル開発でリソースをバインドするには、wrangler.tomlファイルでバインディングを設定する必要があります。詳細については、Bindingsを参照してください。

wrangler.tomlファイルでバインディングを設定したら、プロキシは loader または action 関数内の context.cloudflare で利用可能になります：

export const loader = ({ context }: LoaderFunctionArgs) => {
  const { env, cf, ctx } = context.cloudflare;
  env.MY_BINDING; // ここでバインドされたリソースにアクセス
  // ... ここにさらにローダーコード...
};

envタイプの修正

wrangler.tomlに追加のバインディングを追加したときに、context.cloudflare.envが正しく型付けされていないことに気付いたかもしれません。

これを修正するには、npm run typegenを実行して不足している型を生成します。これにより、worker-configuration.d.tsで定義されたEnvインターフェースが更新されます。コマンドを実行した後、上記のように context.cloudflare.env を使用して loader または action でバインディングにアクセスできます。

本番環境におけるリソースのバインディング

本番環境でリソースをバインドするには、Cloudflareダッシュボードでバインディングを設定する必要があります。詳細については、Bindingsのドキュメントを参照してください。

Cloudflareダッシュボードでバインディングを設定した後、プロキシは上記のように loader または action 関数内の context.cloudflare.env で利用可能になります。

例：RemixアプリケーションでD1データベースにアクセスする

例として、RemixアプリケーションでD1データベースをバインドしてクエリを実行します。

D1データベースを作成します。詳細については、D1ドキュメントを参照してください。
wrangler.tomlファイルでD1データベースのバインディングを設定します：

[[ d1_databases ]]
binding = "DB"
database_name = "<YOUR_DATABASE_NAME>"
database_id = "<YOUR_DATABASE_ID>"

npm run typegenを実行して、バインディングのTypeScript型を生成します。

npm run typegen

> typegen
> wrangler types

 ⛅️ wrangler 3.48.0
-------------------
interface Env {
  DB: D1Database;
}

loader関数内でD1データベースにアクセスします：

import type { LoaderFunction } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";

export const loader: LoaderFunction = async ({ context, params }) => {
  const { env, cf, ctx } = context.cloudflare;
  let { results } = await env.DB.prepare(
    "SELECT * FROM products where id = ?1"
  ).bind(params.productId).all();
  return json(results);
};

export default function Index() {
  const results = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>Remixへようこそ</h1>
      <div>
        D1からの値：
        <pre>{JSON.stringify(results)}</pre>
      </div>
    </div>
  );
}

Learn more

By completing this guide, you have successfully deployed your Remix 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