Skip to content

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

Vite 3

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

Vite ↗ は、フロントエンド開発者向けの次世代ビルドツールです。Vite 3 のリリース ↗ により、新しいコマンドライン（CLI）の改善、スターターテンプレート、その他 ↗ を使ってフロントエンドアプリケーションを作れます。

Cloudflare Pages は Vite 3 プロジェクトをネイティブにサポートしています。サブ秒のビルド初期化など、Pages のビルドプロセスの改善 ↗ に関するブログ記事を参照し、Vite 3 と Cloudflare Pages でアプリケーションのビルドツールを最適化する方法を確認してください。

このガイドでは、Vite 3 で新しいプロジェクトを始め、Cloudflare Pages にデプロイする方法を説明します。

npm create vite@latest
✔ Project name: … vite-on-pages
✔ Select a framework: › vue
✔ Select a variant: › vue

Scaffolding project in ~/src/vite-on-pages...

Done. Now run:

  cd vite-on-pages
  npm install
  npm run dev

次に新しい GitHub リポジトリを作成し、GitHub の gh コマンドライン（CLI） ↗ でコードをプッシュします。

git init
Initialized empty Git repository in ~/vite-vue3-on-pages/.git/
git add .
git commit -m "Initial commit"                                           vite-vue3-on-pages/git/main +
[main (root-commit) dad4177] Initial commit
 14 files changed, 1452 insertions(+)
gh repo create
✓ Created repository kristianfreeman/vite-vue3-on-pages on GitHub
✓ Added remote [email protected]:kristianfreeman/vite-vue3-on-pages.git
git push

サイトを Pages にデプロイする手順は次のとおりです。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application > Pages > Import from an existing Git repository を選択します。

  3. 新しい GitHub リポジトリを選択します。

  4. Set up builds and deployments で、Build command に npm run build、Build output directory に dist を設定します。

設定が終わったら、Save and Deploy を選択します。

最初のデプロイパイプラインが進行中であることが表示されます。Pages は指定どおりにすべての依存関係をインストールし、プロジェクトをビルドします。プロジェクトをデプロイすると、<YOUR_PROJECT_NAME>.pages.dev サブドメインで利用できます。プロジェクトのサブドメインは Workers & Pages > Pages プロジェクトを選択 > Deployments で確認できます。

Cloudflare Pages は、新しいコミットをプッシュするたびにプロジェクトを自動で再ビルドしてデプロイします。

さらに、プレビューデプロイ も使えます。プルリクエストに対してビルドとデプロイの処理を繰り返します。これにより、本番に出す前に実際の URL でプロジェクトの変更をプレビューできます。

さらに学ぶ

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

役に立ちましたか？