コンテンツにスキップ

Vite 3

Vite ↗ は、フロントエンド開発者のための次世代ビルドツールです。Vite 3のリリース ↗により、開発者は新しいコマンドライン（CLI）改善、スターターテンプレート、そしてその他の機能 ↗を活用して、フロントエンドアプリケーションの構築を支援できます。

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

このガイドでは、Vite 3を使用して新しいプロジェクトを開始し、それをCloudflare Pagesにデプロイする方法を学びます。

Terminal window
npm create vite@latest
 
✔ プロジェクト名: … vite-on-pages
✔ フレームワークを選択: › vue
✔ バリアントを選択: › vue


~/src/vite-on-pages にプロジェクトをスキャフォールディング中...


完了しました。次に実行してください:


  cd vite-on-pages
  npm install
  npm run dev

新しいGitHubリポジトリを作成し、GitHubのghコマンドライン（CLI） ↗を使用してコードをプッシュします:

Terminal window
git init
~/vite-vue3-on-pages/.git/ に空のGitリポジトリを初期化しました
Terminal window
git add .
git commit -m "初回コミット"                                           vite-vue3-on-pages/git/main +
[main (root-commit) dad4177] 初回コミット
 14ファイルが変更され、1452行が追加されました
Terminal window
gh repo create
✓ GitHubにkristianfreeman/vite-vue3-on-pagesリポジトリを作成しました
✓ リモートを追加しました git@github.com:kristianfreeman/vite-vue3-on-pages.git
Terminal window
git push

サイトをPagesにデプロイするには:

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。
  3. 新しいGitHubリポジトリを選択します。
  4. ビルドとデプロイの設定で、npm run buildをビルドコマンドとして、distをビルド出力ディレクトリとして設定します。

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

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

Cloudflare Pagesは、新しいプッシュコミットごとにプロジェクトを自動的に再ビルドし、デプロイします。

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

Learn more

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

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings