← Cloudflare Pages / pages / framework-guides

Nuxt

Nuxt ↗ это веб-фреймворк, делающий разработку на основе Vue.js простой и мощной.

В этом руководстве вы создадите новое приложение Nuxt и развернете его с помощью Cloudflare Pages.

create-cloudflare CLI (C3) настроит ваш сайт Nuxt для Cloudflare Pages. Выполните следующую команду в терминале, чтобы создать новый сайт Nuxt:

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

C3 задаст ряд вопросов по настройке и создаст новый проект с nuxi (официальный CLI для Nuxt) ↗. C3 также установит необходимые адаптеры вместе с Wrangler CLI.

После создания проекта C3 сгенерирует новый my-nuxt-app директорию с использованием шаблона Nuxt по умолчанию, обновленного для полной совместимости с Cloudflare Pages.

При создании нового проекта C3 предложит развернуть начальную версию приложения через Direct Upload. Вы можете повторно развернуть приложение в любой момент, выполнив следующую команду в каталоге проекта:

npm run deploy

Чтобы развернуть проект Nuxt без C3, следуйте Руководство по началу работы с Nuxt ↗. После настройки проекта Nuxt выберите либо Руководство по интеграции с Git или Руководство по Direct Upload чтобы развернуть проект Nuxt на Cloudflare Pages.

Помимо Direct Upload развертываний вы можете развертывать проекты через Интеграция с Git. Интеграция с Git позволяет подключить репозиторий GitHub или GitLab к приложению Pages, чтобы оно автоматически собиралось и развертывалось после каждой отправки нового коммита.

Для настройки потребуется базовое понимание Git ↗. Если вы новичок в Git, обратитесь к руководству GitHub краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в GitHub, выполнив в терминале следующие команды:

# Skip the following three commands if you have built your application
# using C3 or already committed your changes
git init
git add .
git commit -m "Initial commit"

git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin main

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

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

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

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

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

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

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

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

При желании можно настроить Название проекта поле. По умолчанию оно совпадает с именем репозитория GitHub, но совпадение не обязательно. Поле Название проекта значение присваивается в качестве вашего *.pages.dev поддомен.

7. После завершения настройки выберите Save and Deploy.

Ознакомьтесь с ходом выполнения первого конвейера развертывания. Pages устанавливает все зависимости и собирает проект согласно заданной конфигурации. Cloudflare Pages будет автоматически пересобирать ваш проект и развертывать его при каждом новом отправленном коммите.

Кроме того, у вас будет доступ к развёртывания предпросмотра, которые повторяют процесс сборки и развёртывания для pull request. Благодаря им можно просматривать изменения проекта по реальному URL-адресу до развёртывания изменений в продакшене.

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

Если вы планируете использовать привязки в проекте, сначала необходимо настроить привязки для локальной и удаленной разработки.

Проекты, созданные с помощью C3, поставляются с nitro-cloudflare-dev, nitro модуль, который упрощает работу с привязками в процессе разработки:

export default defineNuxtConfig({
	modules: ["nitro-cloudflare-dev"],
});

Этот модуль работает на основе getPlatformProxy вспомогательная функция. getPlatformProxy автоматически обнаружит любые привязки, заданные в конфигурационном файле Wrangler вашего проекта, и эмулирует их при локальной разработке. Ознакомьтесь с Информация о привязках в конфигурации Wrangler чтобы узнать, как настроить bindings в конфигурационный файл Wrangler.

Чтобы получить доступ к привязкам в развернутом приложении, необходимо настроить привязки в Cloudflare dashboard.

Чтобы получить корректную поддержку типов, создайте новый env.d.ts файл в корне проекта и объявите привязка. Убедитесь, что вы сгенерировали типы среды выполнения Cloudflare, выполнив wrangler types.

Ниже приведён пример добавления KVNamespace в качестве привязки:

declare module "h3" {
	interface H3EventContext {
		cf: CfProperties;
		cloudflare: {
			request: Request;
			env: {
				MY_KV: KVNamespace;
			};
			context: ExecutionContext;
		};
	}
}

В Nuxt серверный код добавляется через Серверные маршруты и промежуточное ПО ↗. defineEventHandler() метод используется для определения конечных точек API, в которых можно обращаться к контексту Cloudflare через предоставленный context поле. Поле context поле даёт доступ к любым привязкам, настроенным для приложения.

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

export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

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

export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

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

После выполнения этого руководства вы успешно развернули свой сайт на Nuxt на Cloudflare Pages. Чтобы начать работу с другими фреймворками, обратитесь к списку руководств по фреймворкам.