アナログ

アナログ ↗は、Vite ↗とNitro ↗によって動作するAngularのフルスタックメタフレームワークです。

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

`create-cloudflare`を使用して新しいプロジェクトを作成する

新しいアナログプロジェクトを作成し、Cloudflare Pagesにデプロイする最も簡単な方法は、create-cloudflare ↗ CLI（C3とも呼ばれます）を使用することです。始めるには、ターミナルを開いて次のコマンドを実行します。

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

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

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

C3はセットアッププロセスを案内し、公式のアナログ作成ツールであるcreate-analogを使用して新しいプロジェクトを作成します。また、Wrangler CLIとともに必要なアダプターもインストールします。

バインディング

バインディングは、アプリケーションがKV、Durable Objects、R2、およびD1などのCloudflare開発者製品と対話することを可能にします。

プロジェクトでバインディングを使用する予定がある場合は、最初にローカルおよびリモート開発用のバインディングを設定する必要があります。

アナログでは、サーバーサイドコードはAPIルート ↗を介して追加できます。defineEventHandler()メソッドを使用してAPIエンドポイントを定義し、提供されたcontextフィールドを介してCloudflareのコンテキストにアクセスできます。contextフィールドを使用すると、アプリケーションに設定されたバインディングにアクセスできます。

以下のコードブロックは、アナログでKV名前空間にアクセスする例を示しています。

export default defineEventHandler(async ({ context }) => {
  const { MY_KV } = context.cloudflare.env;
  const greeting = (await MY_KV.get("greeting")) ?? "こんにちは";

  return {
    greeting,
  };
});

開発中のバインディングの設定

C3を介して作成されたプロジェクトには、開発中のバインディング作業を簡素化するNitroモジュールがインストールされています：

const devBindingsModule = async (nitro: Nitro) => {
  if (nitro.options.dev) {
    nitro.options.plugins.push('./src/dev-bindings.ts');
  }
};

export default defineConfig({
  ...
  plugins: [analog({
    nitro: {
      preset: "cloudflare-pages",
      modules: [devBindingsModule]
    }
  })],
  ...
});

このモジュールは、開発中にイベントコンテキストにバインディングを追加するプラグインを読み込みます：

import { NitroApp } from "nitropack";
import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";

export default defineNitroPlugin((nitroApp: NitroApp) => {
  nitroApp.hooks.hook("request", async (event) => {
    const _pkg = "wrangler"; // バンドルをバイパス！
    const { getPlatformProxy } = (await import(
      _pkg
    )) as typeof import("wrangler");
    const platform = await getPlatformProxy();

    event.context.cf = platform["cf"];
    event.context.cloudflare = {
      env: platform["env"] as unknown as Env,
      context: platform["ctx"],
    };
  });
});

上記のコードでは、getPlatformProxyヘルパー関数がプロジェクトのwrangler.tomlファイルに定義されたバインディングを自動的に検出し、ローカル開発でそれらのバインディングをエミュレートします。wrangler.tomlでのバインディングの設定方法については、Wranglerのバインディングに関する設定情報を参照してください。

Env型（context.cloudflare.envで使用される）の新しい型定義は、次のコマンドでwrangler.tomlから生成できます：

npm run cf-typegen

新しいバインディングをwrangler.tomlに追加するたびにこれを行う必要があります。

デプロイされたアプリケーションでのバインディングの設定

デプロイされたアプリケーションでバインディングにアクセスするには、Cloudflareダッシュボードでバインディングを設定する必要があります。

デプロイメント

新しいプロジェクトを作成する際、C3はアプリケーションの初期バージョンを直接アップロードを介してデプロイするオプションを提供します。プロジェクトディレクトリ内で次のコマンドを実行することで、いつでもアプリケーションを再デプロイできます：

npm run deploy

Git integration

In addition to Direct Upload deployments, you can deploy projects via Git integration. Git integration allows you to connect a GitHub or GitLab repository to your Pages application and have your Pages application automatically built and deployed after each new commit is pushed to it.

Setup requires a basic understanding of Git ↗. If you are new to Git, refer to GitHub’s summarized Git handbook ↗ on how to set up Git on your local machine.

GitHubリポジトリを作成する

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:

# C3を使用してアプリケーションを構築した場合や、すでに変更をコミットした場合は、以下の3つのコマンドをスキップしてください
git init
git add .
git commit -m "初回コミット"

git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin main

Pagesプロジェクトを作成する

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
Workers & Pages > アプリケーションを作成 > Pages > Gitに接続に進み、新しいPagesプロジェクトを作成します。

まだ行っていない場合は、GitHubアカウントへのアクセスを承認するよう求められます。Cloudflareは、ソースからプロジェクトを監視およびデプロイするためにこれが必要です。特定のリポジトリへのアクセスを制限することもできますが、Cloudflare Pagesに追加のリポジトリを追加したい場合は、GitHubの設定 ↗内でこのリストを手動で更新する必要があります。

作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで次の情報を提供します：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`dist/analog/public`

オプションで、プロジェクト名フィールドをカスタマイズできます。デフォルトではGitHubリポジトリの名前が使用されますが、一致する必要はありません。プロジェクト名の値は、*.pages.devサブドメインとして割り当てられます。

設定が完了したら、保存してデプロイを選択します。

最初のデプロイパイプラインの進行状況を確認します。Pagesはすべての依存関係をインストールし、指定された通りにプロジェクトをビルドします。Cloudflare Pagesは、新しいコミットがプッシュされるたびに自動的にプロジェクトを再ビルドしてデプロイします。

さらに、プレビューのデプロイメントにアクセスでき、プルリクエストのためにビルドとデプロイのプロセスを繰り返します。これにより、変更を本番環境にデプロイする前に、実際のURLでプロジェクトの変更をプレビューできます。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings