← Cloudflare Pages / pages / framework-guides

Qwik

Qwik ↗ это веб-фреймворк с открытым исходным кодом, ориентированный на DOM и поддерживающий возобновляемое выполнение, разработанный для достижения наилучшего времени до интерактивности за счёт акцента на возобновляемость ↗, серверный рендеринг HTML и точечная отложенная загрузка ↗ кода.

В этом руководстве вы создадите новое приложение Qwik, реализованное с помощью Qwik City ↗ (метафреймворк Qwik) и развернуть его с помощью Cloudflare Pages.

Используйте create-cloudflare ↗ CLI (C3) для создания нового проекта. C3 создаст каталог нового проекта, запустит официальный инструмент настройки Qwik и предложит возможность мгновенного развертывания.

Чтобы использовать create-cloudflare чтобы создать новый проект Qwik, выполните следующую команду:

npm 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, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в 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

Если вы используете create-cloudflare(C3) ↗ чтобы создать новый проект Qwik: C3 установит все зависимости, необходимые проекту, и предложит развернуть его через CLI. Если вы согласитесь, сайт станет доступен в сети, и вы получите URL-адрес развертывания.

Чтобы развернуть сайт в Pages:

1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите Создать приложение.

3. Выберите Pages на вкладке.

4. Выберите Импорт существующего репозитория Git.

5. Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.

6. В Настройка сборок и деплоев раздел и укажите следующую информацию:

После настройки сайта вы можете запустить первый деплой. Вы увидите, как Cloudflare Pages устанавливает npm, зависимостей вашего проекта и сборку сайта перед его развертыванием.

После деплоя сайта вы получите уникальный поддомен для своего проекта на *.pages.dev. Каждый раз, когда вы фиксируете новый код в своем сайте Qwik, Cloudflare Pages автоматически пересоберет ваш проект и развернет его. Вы также получите доступ к развёртывания предпросмотра для новых pull request, чтобы увидеть, как изменения выглядят на сайте, прежде чем разворачивать их в продакшен.

A привязка позволяет вашему приложению взаимодействовать с продуктами Cloudflare для разработчиков, такими как KV, Durable Object, R2, а также D1 ↗.

В QwikCity серверный код добавляется через routeLoaders ↗ и действия ↗. Затем обратитесь к привязкам, настроенным для вашего приложения, через platform объект, предоставляемый фреймворком.

В следующем блоке кода показан пример обращения к пространству имён KV в QwikCity.

// ...

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. Чтобы начать работу с другими фреймворками, обратитесь к списку руководств по фреймворкам.