Skip to content

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

Nuxt

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

Nuxt ↗ は、Vue.js ベースの開発をシンプルかつ強力にする Web フレームワークです。

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

動画チュートリアル

create-cloudflare CLI（C3）で新しいプロジェクトを作成する

create-cloudflare CLI（C3） は、Nuxt サイトを Cloudflare Pages 向けに設定します。ターミナルで次のコマンドを実行し、新しい Nuxt サイトを作成します。

npm create cloudflare@latest -- my-nuxt-app --framework=nuxt --platform=pages

C3 は一連のセットアップ質問を表示し、公式の Nuxt CLI である nuxi ↗ で新しいプロジェクトを作成します。必要なアダプターと Wrangler CLI もインストールします。

プロジェクト作成後、C3 はデフォルトの Nuxt テンプレートを使い、Cloudflare Pages と完全互換になるよう更新した my-nuxt-app ディレクトリを生成します。

新しいプロジェクトの作成時、C3 は Direct Upload でアプリケーションの初期バージョンをデプロイするかどうかを尋ねます。プロジェクトディレクトリ内で次のコマンドを実行すると、いつでも再デプロイできます。

npm run deploy

C3 を使わずにプロジェクトを設定してデプロイする

C3 を使わずに Nuxt プロジェクトをデプロイするには、Nuxt のはじめにガイド ↗ に従います。Nuxt プロジェクトを用意したら、Git 連携ガイド または Direct Upload ガイド を選び、Cloudflare Pages にデプロイします。

Git 連携

Direct Upload によるデプロイに加えて、Git 連携 でもプロジェクトをデプロイできます。Git 連携では、GitHub または GitLab のリポジトリを Pages アプリケーションに接続し、新しいコミットがプッシュされるたびに Pages アプリケーションを自動でビルドしてデプロイします。

セットアップには Git ↗ の基本的な理解が必要です。Git を初めて使う場合は、ローカルマシンへの Git の導入について、GitHub の Git handbook の要約 ↗ を参照してください。

GitHub リポジトリを作成する

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

# Skip the following three commands if you have built your application
# using C3 or already committed your changes
git init
git add .
git commit -m "Initial commit"

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

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

サイトを 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 セクションで、次の情報を入力します。

設定項目値
本番ブランチmain
ビルドコマンドnpm run build
ビルドディレクトリdist

任意で Project name フィールドを変更できます。デフォルトは GitHub リポジトリ名ですが、一致している必要はありません。Project name の値が *.pages.dev サブドメインになります。

  1. 設定が終わったら、Save and Deploy を選びます。

最初のデプロイパイプラインが進行中であることが分かります。Pages は指定どおりに依存関係をすべてインストールし、プロジェクトをビルドします。新しいコミットをプッシュするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。

加えて、プレビューデプロイ も使えます。プルリクエストに対して同じビルドとデプロイを繰り返します。本番に出す前に、実際の URL で変更を確認できます。

Nuxt アプリケーションでバインディングを使う

バインディング を使うと、アプリケーションから KV、Durable Objects、R2、D1 などの Cloudflare 開発者製品と連携できます。

プロジェクトでバインディングを使う場合は、先にローカル開発とリモート向けのバインディングを設定してください。

ローカル開発向けにバインディングを設定する

C3 で作成したプロジェクトには nitro-cloudflare-dev が含まれます。これは開発中のバインディング操作を簡単にする nitro モジュールです。

export default defineNuxtConfig({
	modules: ["nitro-cloudflare-dev"],
});

このモジュールは getPlatformProxy ヘルパー関数 を使います。getPlatformProxy は、プロジェクトの Wrangler 設定ファイルで定義したバインディングを自動検出し、ローカル開発でエミュレートします。Wrangler 設定ファイルでのバインディング設定は、バインディングの Wrangler 設定 を参照してください。

デプロイ済みアプリケーション向けにバインディングを設定する

デプロイ済みアプリケーションでバインディングにアクセスするには、Cloudflare ダッシュボードで バインディングを設定 します。

TypeScript プロジェクトにバインディングを追加する

適切な型サポートを得るには、プロジェクトのルートに新しい env.d.ts ファイルを作成し、バインディング を宣言します。wrangler types を実行して、Cloudflare ランタイム型を生成しておいてください。

次は KVNamespace バインディングを追加する例です。

declare module "h3" {
	interface H3EventContext {
		cf: CfProperties;
		cloudflare: {
			request: Request;
			env: {
				MY_KV: KVNamespace;
			};
			context: ExecutionContext;
		};
	}
}

Nuxt アプリケーションからバインディングにアクセスする

Nuxt では、サーバールートとミドルウェア ↗ でサーバーサイドのコードを追加します。API エンドポイントは defineEventHandler() で定義し、渡される context フィールドから Cloudflare のコンテキストにアクセスできます。context フィールドから、アプリケーションに設定したバインディングへアクセスできます。

次のコードは、Nuxt で KV 名前空間にアクセスする例です。

export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

	return {
		// ...
	};
});
export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

	return {
		// ...
	};
});

さらに学ぶ

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

役に立ちましたか？