Qwik

Qwik ↗ 是开源、以 DOM 为中心、可恢复 Web 应用框架，通过专注于可恢复性 ↗、HTML 服务端渲染和细粒度懒加载 ↗ 代码，实现最佳可交互时间。

在本指南中，你将创建通过 Qwik City ↗（Qwik 的元框架）实现的新 Qwik 应用，并使用 Cloudflare Pages 部署。

创建新项目

使用 create-cloudflare ↗ CLI (C3) 创建新项目。C3 将创建新项目目录，启动 Qwik 官方设置工具，并提供即时部署选项。

要使用 create-cloudflare 创建新的 Qwik 项目，请运行以下命令：

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

yarn create cloudflare my-qwik-app --framework=qwik --platform=pages

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

create-cloudflare 将安装额外依赖，包括 Wrangler CLI 和任何必要的适配器，并询问设置问题。

作为 cloudflare-pages 适配器安装的一部分，将创建 functions/[[path]].ts 文件。[[path]] 文件名表示此文件将处理所有传入 URL 的请求。请参阅路径段了解更多。

选择服务器选项后，切换到项目目录并通过运行以下命令渲染项目：

npm start

继续之前

所有框架指南都假定你已具备 Git ↗ 的基础知识。如果你是 Git 新手，请参阅这份精简 Git 手册 ↗，了解如何在本地设置 Git。

如果你使用 SSH 克隆，则必须在每台用于向 GitHub 推送或拉取的计算机上生成 SSH 密钥 ↗。

更多信息请参阅 GitHub 文档 ↗和 Git 文档 ↗。

创建 GitHub 仓库

访问 repo.new ↗ 创建新的 GitHub 仓库。创建新仓库后，进入新创建的项目目录，在终端中运行以下命令，准备并将本地应用推送到 GitHub：

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 部署

通过 `create-cloudflare` CLI (C3) 部署

如果你使用 create-cloudflare(C3) ↗ 创建新的 Qwik 项目，C3 将安装项目所需的所有依赖，并提示你通过 CLI 部署项目。如果部署，你的站点将上线，并会提供部署 URL。

通过 Cloudflare 仪表板部署

要将站点部署到 Pages：

在 Cloudflare 仪表板中，前往 Workers & Pages 页面。
Go to Workers & Pages ↗
选择 Create application（创建应用程序）。
选择 Pages 选项卡。
选择 Import an existing Git repository（导入现有 Git 仓库）。
选择你创建的新 GitHub 仓库，然后选择 Begin setup（开始设置）。
在 Set up builds and deployments（设置构建和部署） 部分，提供以下信息：

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

配置站点后，即可开始首次部署。你将看到 Cloudflare Pages 安装 npm、项目依赖并构建站点，然后完成部署。

部署站点后，你将在 *.pages.dev 上获得项目的唯一子域名。每次向 Qwik 站点提交新代码时，Cloudflare Pages 都会自动重新构建并部署项目。你还可以在新 pull request 上获得预览部署，在部署到生产环境之前预览更改效果。

在 Qwik 应用中使用绑定

绑定（binding）允许应用与 Cloudflare 开发者产品（如 KV、Durable Objects、R2 和 D1 ↗）交互。

在 QwikCity 中，通过 routeLoaders ↗ 和 actions ↗ 添加服务端代码。然后通过框架提供的 platform 对象访问为应用设置的绑定。

以下代码块展示在 QwikCity 中访问 KV 命名空间的示例。

// ...

export const useGetServerTime = routeLoader$(({ platform }) => {
  // the type `KVNamespace` comes from runtime types generated by running `wrangler types`
  const { MY_KV } = (platform.env as { MY_KV: KVNamespace }));

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

了解更多

完成本指南后，你已成功将 Qwik 站点部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表。