コンテンツにスキップ

Nuxt

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

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

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

create-cloudflare CLI (C3)は、Cloudflare Pages用にNuxtサイトを構成します。ターミナルで以下のコマンドを実行して、新しいNuxtサイトを作成します：

Terminal window
npm create cloudflare@latest -- my-nuxt-app --framework=nuxt

C3は一連のセットアップ質問を行い、nuxi (公式Nuxt CLI) ↗を使用して新しいプロジェクトを作成します。C3は、Wrangler CLIとともに必要なアダプターもインストールします。

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

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

Terminal window
npm run deploy

C3なしでプロジェクトを構成してデプロイする

C3なしでNuxtプロジェクトをデプロイするには、Nuxtのスタートガイド ↗に従ってください。Nuxtプロジェクトをセットアップした後、Git統合ガイドまたはDirect Uploadガイドのいずれかを選択して、Cloudflare PagesにNuxtプロジェクトをデプロイします。

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:

Terminal window
# 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プロジェクトを作成する

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

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

  1. 作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで以下の情報を提供します：
Configuration option Value
Production branch main
Build command npm run build
Build directory dist

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

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

進行中の最初のデプロイパイプラインを確認します。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.tomlファイルに定義されたバインディングを自動的に検出し、ローカル開発でそれらのバインディングをエミュレートします。wrangler.tomlでのバインディングの設定に関する詳細は、Wranglerの設定情報 ↗を参照してください。

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

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

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

適切な型サポートを得るには、プロジェクトのルートに新しいenv.d.tsファイルを作成し、バインディングを宣言する必要があります。

以下は、KVNamespaceバインディングを追加する例です：

import {
  CfProperties,
  Request,
  ExecutionContext,
  KVNamespace,
} from "@cloudflare/workers-types";


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

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

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

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

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


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

Learn more

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

関連リソース

チュートリアル

Nuxtに関する他のチュートリアルについては、以下のリソースを参照してください：

デモアプリ

Nuxtを使用したデモアプリケーションについては、以下のリソースを参照してください：

  • Nuxt Image Gallery : A web application to create an image gallery with Cloudflare R2 with a built-in image editor.
  • AI Chat : A full-stack application made with Nuxt to chat with various Cloudflare Workers AI LLM.
  • Atidraw : A web application made with Nuxt that lets you to create, enhance, and share your drawings with the world. Harnessing the power of Cloudflare R2 and Cloudflare AI to store and enhance your drawings.
  • Atidone : A full-stack application made with Nuxt, Cloudflare D1 and Authentication to store your todos on the web.
  • Atinotes : Store Markdown notes in Cloudflare KV with this full-stack application made with Nuxt & deployed on Cloudflare Pages.
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings