Qwik

Qwik ↗は、resumability ↗に焦点を当て、HTMLのサーバーサイドレンダリングとファイングレインのレイジーローディング ↗を通じて、インタラクティブな体験を最適化するために設計されたオープンソースのDOM中心の再開可能なWebアプリケーションフレームワークです。

このガイドでは、Qwik City ↗（Qwikのメタフレームワーク）を介して実装された新しいQwikアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。

新しいプロジェクトの作成

create-cloudflare ↗ CLI (C3)を使用して新しいプロジェクトを作成します。C3は新しいプロジェクトディレクトリを作成し、Qwikの公式セットアップツールを起動し、即座にデプロイするオプションを提供します。

create-cloudflareを使用して新しいQwikプロジェクトを作成するには、次のコマンドを実行します：

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

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

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

create-cloudflareは、Wrangler CLIや必要なアダプターを含む追加の依存関係をインストールし、セットアップに関する質問を行います。

cloudflare-pagesアダプターのインストールの一環として、functions/[[path]].tsファイルが作成されます。[[path]]というファイル名は、このファイルがすべての受信URLへのリクエストを処理することを示しています。詳細については、Path segmentsを参照してください。

サーバーオプションを選択した後、プロジェクトのディレクトリに移動し、次のコマンドを実行してプロジェクトをレンダリングします：

npm start

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

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:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Cloudflare Pagesでデプロイ

Deploy via the `create-cloudflare` CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new Qwik project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL.

Cloudflareダッシュボード経由でデプロイ

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。
作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで、次の情報を提供します：

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

サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pagesがnpm、プロジェクトの依存関係をインストールし、サイトをビルドしてデプロイするのを確認できます。

サイトをデプロイした後、プロジェクト用のユニークなサブドメインが*.pages.devで提供されます。 Qwikサイトに新しいコードをコミットするたびに、Cloudflare Pagesは自動的にプロジェクトを再ビルドし、デプロイします。また、新しいプルリクエストでプレビューのデプロイにアクセスでき、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

Qwikアプリケーションでバインディングを使用する

バインディングを使用すると、アプリケーションがKV、Durable Object、R2、およびD1 ↗などのCloudflare開発者製品と対話できます。

QwikCityでは、routeLoaders ↗やactions ↗を介してサーバーサイドコードを追加します。その後、フレームワークによって提供されるplatformオブジェクトを介して、アプリケーションに設定されたバインディングにアクセスします。

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

// ...

export const useGetServerTime = routeLoader$(({ platform }) => {
  // 型`KVNamespace`は@cloudflare/workers-typesパッケージから来ています
  const { MY_KV } = (platform.env as { MY_KV: KVNamespace });

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

Learn more

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

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings