← Cloudflare Pages / pages / functions

Bindings

A привязка позволяет Pages Functions взаимодействовать с ресурсами платформы разработчиков Cloudflare. Используйте привязки, чтобы связать Pages Functions с ресурсами Cloudflare, такими как KV, Durable Objects, R2, а также D1. Вы можете настроить привязки как для Production, так и для Preview окружений.

Это руководство расскажет, как настроить привязку для Pages Function. Для продолжения у вас уже должен быть настроен ресурс Cloudflare Developer Platform.

Workers KV это решение Cloudflare для хранения данных в формате ключ-значение.

Чтобы привязать пространство имён KV к Pages Function, настройте привязку пространства имён KV в разделе конфигурационный файл Wrangler или панель управления Cloudflare.

Чтобы настроить привязку пространства имён KV через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add > Пространство имён KV.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе Пространство имён KV, выберите нужное пространство имён.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования KV в вашей функции. В следующем примере привязка пространства имён KV называется TODO_LIST и вы можете обращаться к привязке в коде Function через context.env:

export async function onRequest(context) {
	const task = await context.env.TODO_LIST.get("Task:123");
	return new Response(task);
}

interface Env {
	TODO_LIST: KVNamespace;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	const task = await context.env.TODO_LIST.get("Task:123");
	return new Response(task);
};

С привязками пространства имен KV можно локально взаимодействовать одним из двух способов:

• Настройте файл Wrangler проекта Pages и выполните npx wrangler pages dev.
• Передайте аргументы в wrangler pages dev напрямую.

Чтобы взаимодействовать с привязкой пространства имён KV локально, передавая аргументы в Wrangler CLI, добавьте -k <BINDING_NAME> или --kv=<BINDING_NAME> к wrangler pages dev команду. Например, если пространство имен KV привязано к вашей Function через TODO_LIST привязки обратитесь к пространству имён KV в локальной разработке, выполнив:

npx wrangler pages dev <OUTPUT_DIR> --kv=TODO_LIST

Durable Objects (DO), строго согласованное хранилище данных Cloudflare, которое обеспечивает такие возможности, как подключение WebSocket и управление состоянием.

Необходимо создать Durable Object Worker и привязать его к проекту Pages с помощью панели управления Cloudflare или файла конфигурации вашего проекта Pages конфигурационный файл Wrangler. Вы не можете создать и развернуть Durable Object в рамках проекта Pages.

Чтобы привязать Durable Object к Pages Function, настройте привязку Durable Object в разделе конфигурационный файл Wrangler или панель управления Cloudflare.

Чтобы настроить привязку Durable Object через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add > Durable Object.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе Пространство имен Durable Object, выберите нужное пространство имён.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования Durable Objects в вашей функции. В следующем примере привязка DO называется DURABLE_OBJECT и вы можете обращаться к привязке в коде Function через context.env:

export async function onRequestGet(context) {
	const id = context.env.DURABLE_OBJECT.newUniqueId();
	const stub = context.env.DURABLE_OBJECT.get(id);

	// Pass the request down to the durable object
	return stub.fetch(context.request);
}

interface Env {
	DURABLE_OBJECT: DurableObjectNamespace;
}

export const onRequestGet: PagesFunction<Env> = async (context) => {
	const id = context.env.DURABLE_OBJECT.newUniqueId();
	const stub = context.env.DURABLE_OBJECT.get(id);

	// Pass the request down to the durable object
	return stub.fetch(context.request);
};

С привязками Durable Object можно локально взаимодействовать одним из двух способов:

• Настройте файл Wrangler проекта Pages и выполните npx wrangler pages dev.
• Передайте аргументы в wrangler pages dev напрямую.

Для взаимодействия с пространством имён Durable Object при локальной разработке выполните wrangler dev в каталоге Worker, экспортирующего Durable Object. В другом терминале выполните wrangler pages dev в каталоге вашего проекта Pages.

Чтобы взаимодействовать с пространством имён Durable Object локально через Wrangler CLI, добавьте --do <BINDING_NAME>=<CLASS_NAME>@<SCRIPT_NAME> к wrangler pages dev. CLASS_NAME указывает имя класса Durable Object, а SCRIPT_NAME имя вашего Worker.

Например, если ваш Worker называется do-worker и объявляет класс Durable Object с именем DurableObjectExample, обратитесь к этому Durable Object, выполнив npx wrangler dev в do-worker директория. Одновременно выполните npx wrangler pages dev <OUTPUT_DIR> --do MY_DO=DurableObjectExample@do-worker в каталоге вашего проекта Pages. Взаимодействуйте с MY_DO привязку в коде вашей Function, используя context.env (например, context.env.MY_DO).

R2 это решение Cloudflare для blob-хранилища, которое позволяет разработчикам хранить большие объёмы неструктурированных данных без платы за исходящий трафик.

Чтобы привязать бакет R2 к Pages Function, настройте привязку бакета R2 в разделе конфигурационный файл Wrangler или панель управления Cloudflare.

Чтобы настроить привязку бакета R2 через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add > Бакет R2.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе Бакет R2, выберите нужный бакет R2.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования бакетов R2 в вашей функции. В следующем примере привязка бакета R2 называется BUCKET и вы можете обращаться к привязке в коде Function через context.env:

export async function onRequest(context) {
	const obj = await context.env.BUCKET.get("some-key");
	if (obj === null) {
		return new Response("Not found", { status: 404 });
	}
	return new Response(obj.body);
}

interface Env {
	BUCKET: R2Bucket;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	const obj = await context.env.BUCKET.get("some-key");
	if (obj === null) {
		return new Response("Not found", { status: 404 });
	}
	return new Response(obj.body);
};

С привязками бакета R2 можно локально взаимодействовать одним из двух способов:

• Настройте файл Wrangler проекта Pages и выполните npx wrangler pages dev.
• Передайте аргументы в wrangler pages dev напрямую.

Чтобы взаимодействовать с бакетом R2 локально через Wrangler CLI, добавьте --r2=<BINDING_NAME> к wrangler pages dev команду. Если ваш бакет R2 привязан к Function с помощью BUCKET привязки обратитесь к этому бакету R2 в локальной разработке, выполнив:

npx wrangler pages dev <OUTPUT_DIR> --r2=BUCKET

Взаимодействуйте с этой привязкой с помощью context.env (например, context.env.BUCKET.)

D1 это нативная бессерверная база данных от Cloudflare.

Чтобы привязать базу данных D1 к Pages Function, можно настроить привязку базы данных D1 в конфигурационный файл Wrangler или панель управления Cloudflare.

Чтобы настроить привязку базы данных D1 через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add> Привязки баз данных D1.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе База данных D1, выберите нужную базу данных D1.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования D1 в вашей функции. В следующем примере привязка базы данных D1 называется NORTHWIND_DB и вы можете обращаться к привязке в коде Function через context.env:

export async function onRequest(context) {
	// Create a prepared statement with our query
	const ps = context.env.NORTHWIND_DB.prepare("SELECT * from users");
	const data = await ps.first();

	return Response.json(data);
}

interface Env {
	NORTHWIND_DB: D1Database;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	// Create a prepared statement with our query
	const ps = context.env.NORTHWIND_DB.prepare("SELECT * from users");
	const data = await ps.first();

	return Response.json(data);
};

С привязками базы данных D1 можно локально взаимодействовать одним из двух способов:

• Настройте файл Wrangler проекта Pages и выполните npx wrangler pages dev.
• Передайте аргументы в wrangler pages dev напрямую.

Чтобы взаимодействовать с базой данных D1 через Wrangler CLI при локальная разработка, добавьте --d1 <BINDING_NAME>=<DATABASE_ID> к wrangler pages dev команда.

Если ваша база данных D1 привязана к Pages Function через NORTHWIND_DB привязка и database_id в вашем файле Wrangler: xxxx-xxxx-xxxx-xxxx-xxxx, обратитесь к этой базе данных при локальной разработке, выполнив:

npx wrangler pages dev <OUTPUT_DIR> --d1 NORTHWIND_DB=xxxx-xxxx-xxxx-xxxx-xxxx

Взаимодействуйте с этой привязкой с помощью context.env (например, context.env.NORTHWIND_DB.)

См. Документация по D1 Workers Binding API для методов API, доступных в вашей привязке D1.

Vectorize это нативная векторная база данных Cloudflare.

Чтобы привязать индекс Vectorize к Pages Function, настройте привязку индекса Vectorize в разделе конфигурационный файл Wrangler или панель управления Cloudflare.

Чтобы настроить привязку индекса Vectorize через Cloudflare dashboard:

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

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

2. Выберите, хотите ли вы настроить привязку в Production или Предпросмотр окружение.

3. Выберите проект Pages > Настройки.

4. Перейдите в Bindings > Add > Индекс Vectorize.

5. Присвойте своей привязке имя в разделе Имя переменной.

6. В разделе Индекс Vectorize, выберите нужный индекс Vectorize.

7. Повторно разверните проект, чтобы привязка вступила в силу.

Чтобы использовать индекс Vectorize в Pages Function, обратитесь к привязке индекса Vectorize в коде Pages Function. В следующем примере привязка индекса Vectorize называется VECTORIZE_INDEX и вы можете обращаться к привязке в коде Pages Function через context.env.

// Sample vectors: 3 dimensions wide.
//
// Vectors from a machine-learning model are typically ~100 to 1536 dimensions
// wide (or wider still).
const sampleVectors = [
	{
		id: "1",
		values: [32.4, 74.1, 3.2],
		metadata: { url: "/products/sku/13913913" },
	},
	{
		id: "2",
		values: [15.1, 19.2, 15.8],
		metadata: { url: "/products/sku/10148191" },
	},
	{
		id: "3",
		values: [0.16, 1.2, 3.8],
		metadata: { url: "/products/sku/97913813" },
	},
	{
		id: "4",
		values: [75.1, 67.1, 29.9],
		metadata: { url: "/products/sku/418313" },
	},
	{
		id: "5",
		values: [58.8, 6.7, 3.4],
		metadata: { url: "/products/sku/55519183" },
	},
];

export async function onRequest(context) {
	let path = new URL(context.request.url).pathname;
	if (path.startsWith("/favicon")) {
		return new Response("", { status: 404 });
	}

	// You only need to insert vectors into your index once
	if (path.startsWith("/insert")) {
		// Insert some sample vectors into your index
		// In a real application, these vectors would be the output of a machine learning (ML) model,
		// such as Workers AI, OpenAI, or Cohere.
		let inserted = await context.env.VECTORIZE_INDEX.insert(sampleVectors);

		// Return the number of IDs we successfully inserted
		return Response.json(inserted);
	}
}

export interface Env {
	// This makes our vector index methods available on context.env.VECTORIZE_INDEX.*
	// For example, context.env.VECTORIZE_INDEX.insert() or query()
	VECTORIZE_INDEX: VectorizeIndex;
}

// Sample vectors: 3 dimensions wide.
//
// Vectors from a machine-learning model are typically ~100 to 1536 dimensions
// wide (or wider still).
const sampleVectors: Array<VectorizeVector> = [
	{
		id: "1",
		values: [32.4, 74.1, 3.2],
		metadata: { url: "/products/sku/13913913" },
	},
	{
		id: "2",
		values: [15.1, 19.2, 15.8],
		metadata: { url: "/products/sku/10148191" },
	},
	{
		id: "3",
		values: [0.16, 1.2, 3.8],
		metadata: { url: "/products/sku/97913813" },
	},
	{
		id: "4",
		values: [75.1, 67.1, 29.9],
		metadata: { url: "/products/sku/418313" },
	},
	{
		id: "5",
		values: [58.8, 6.7, 3.4],
		metadata: { url: "/products/sku/55519183" },
	},
];

export const onRequest: PagesFunction<Env> = async (context) => {
	let path = new URL(context.request.url).pathname;
	if (path.startsWith("/favicon")) {
		return new Response("", { status: 404 });
	}

	// You only need to insert vectors into your index once
	if (path.startsWith("/insert")) {
		// Insert some sample vectors into your index
		// In a real application, these vectors would be the output of a machine learning (ML) model,
		// such as Workers AI, OpenAI, or Cohere.
		let inserted = await context.env.VECTORIZE_INDEX.insert(sampleVectors);

		// Return the number of IDs we successfully inserted
		return Response.json(inserted);
	}
};

Workers AI позволяет запускать модели машинного обучения на бессерверных GPU в глобальной сети Cloudflare.

Чтобы привязать Workers AI к Pages Function, можно настроить привязку Workers AI в конфигурационный файл Wrangler или панель управления Cloudflare.

При локальной разработке с Wrangler можно определить привязку AI с помощью --ai флаг. Запустите Wrangler в режиме разработки с помощью команды wrangler pages dev --ai AI чтобы предоставить доступ к context.env.AI привязку.

Чтобы настроить привязку Workers AI через Cloudflare dashboard:

1. Перейдите в Workers & Pages страницу.

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

2. Выберите проект Pages > Настройки.

3. Выберите среду Pages > Bindings > Add > Workers AI.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. Повторно разверните проект, чтобы привязка вступила в силу.

Чтобы использовать Workers AI в Pages Function, обратитесь к привязке Workers AI в коде Pages Function. В следующем примере привязка Workers AI называется AI и вы можете обращаться к привязке в коде Pages Function через context.env.

export async function onRequest(context) {
	const input = { prompt: "What is the origin of the phrase Hello, World" };

	const answer = await context.env.AI.run(
		"@cf/meta/llama-3.1-8b-instruct",
		input,
	);

	return Response.json(answer);
}

interface Env {
	AI: Ai;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	const input = { prompt: "What is the origin of the phrase Hello, World" };

	const answer = await context.env.AI.run(
		"@cf/meta/llama-3.1-8b-instruct",
		input,
	);

	return Response.json(answer);
};

С привязками Workers AI можно работать локально одним из двух способов:

• Настройте файл Wrangler проекта Pages и выполните npx wrangler pages dev.
• Передайте аргументы в wrangler pages dev напрямую.

Чтобы взаимодействовать с привязкой Workers AI через Wrangler CLI при локальной разработке, выполните:

npx wrangler pages dev --ai=<BINDING_NAME>

Service bindings позволяют вызывать Worker прямо из Pages Function.

Чтобы привязать Pages Function к Worker, настройте привязку Service в Pages Function с помощью конфигурационный файл Wrangler или панель управления Cloudflare.

Чтобы настроить привязку Service через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add > Service binding.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе Сервис, выберите нужный Worker.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования привязок Service в вашей функции. В следующем примере привязка Service называется SERVICE и вы можете обращаться к привязке в коде Function через context.env:

export async function onRequestGet(context) {
	return context.env.SERVICE.fetch(context.request);
}

interface Env {
	SERVICE: Fetcher;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	return context.env.SERVICE.fetch(context.request);
};

С привязками Service можно работать локально одним из двух способов:

• Настройте файл Wrangler проекта Pages и выполните npx wrangler pages dev.
• Передайте аргументы в wrangler pages dev напрямую.

Чтобы взаимодействовать с Service binding при локальной разработке запустите Worker, к которому нужно привязаться, через wrangler dev и параллельно выполните wrangler pages dev с --service <BINDING_NAME>=<SCRIPT_NAME> где SCRIPT_NAME указывает имя Worker. Например, если ваш Worker называется my-worker, подключитесь к этому Worker, запустив его через npx wrangler dev (в каталоге Worker) рядом с npx wrangler pages dev <OUTPUT_DIR> --service MY_SERVICE=my-worker (в каталоге Pages). Взаимодействуйте с этой привязкой с помощью context.env (например, context.env.MY_SERVICE).

Если вы настраиваете привязку Service через дашборд Cloudflare, вам нужно будет добавить wrangler pages dev с --service <BINDING_NAME>=<SCRIPT_NAME> где BINDING_NAME является именем Service binding, а SCRIPT_NAME является именем Worker.

Например, для локальной разработки, если ваш Worker называется my-worker, выполните npx wrangler dev в my-worker директория. В другом терминале также выполните npx wrangler pages dev <OUTPUT_DIR> --service MY_SERVICE=my-worker в каталоге вашего проекта Pages. Взаимодействуйте с этой привязкой Service, используя context.env (например, context.env.MY_SERVICE).

Wrangler также поддерживает запуск проекта Pages и привязанных Workers в одной сессии разработки одной командой. Чтобы попробовать это, передайте Wrangler несколько флагов -c, например: wrangler pages dev -c wrangler.jsonc -c ../other-worker/wrangler.jsonc. Первый аргумент должен указывать на файл конфигурации Pages, а последующие конфигурации будут доступны через Service binding из вашего проекта Pages.

Производители Queue позволяют отправлять сообщения в очередь прямо из Pages Function.

Чтобы привязать очередь к Pages Function, настройте привязку producer очереди в Pages Function с помощью конфигурационный файл Wrangler или панель управления Cloudflare:

Чтобы настроить привязку производителя очереди через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add > Queue.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе Queue, выберите нужную очередь.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования привязки producer очереди в вашей функции. В этом примере привязка называется MY_QUEUE и вы можете обращаться к привязке в коде Function через context.env:

export async function onRequest(context) {
	await context.env.MY_QUEUE.send({
		url: request.url,
		method: request.method,
		headers: Object.fromEntries(request.headers),
	});

	return new Response("Sent!");
}

interface Env {
	MY_QUEUE: Queue<any>;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	await context.env.MY_QUEUE.send({
		url: request.url,
		method: request.method,
		headers: Object.fromEntries(request.headers),
	});

	return new Response("Sent!");
};

При использовании привязки producer очереди в Pages Function вы сможете отправлять события в очередь локально. Однако получать события из очереди в Pages Function нельзя. Для этого потребуется создать отдельный Worker-потребитель с обработчик потребителя очереди чтобы получать события из очереди. Wrangler пока не поддерживает локальный запуск отдельных Functions-производителей и Workers-потребителей, привязанных к одной очереди.

Hyperdrive это сервис для подключения к вашим существующим базам данных из Cloudflare Workers и Pages Functions.

Чтобы привязать конфигурацию Hyperdrive к Pages Function, настройте привязку Hyperdrive в разделе конфигурационный файл Wrangler или панель управления Cloudflare.

Чтобы настроить привязку Hyperdrive через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add > Hyperdrive.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе Конфигурация Hyperdrive, выберите нужную конфигурацию.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования Hyperdrive в вашей функции. В следующем примере конфигурация Hyperdrive называется HYPERDRIVE и вы можете обращаться к привязке в коде Function через context.env:

import postgres from "postgres";

export async function onRequest(context) {
	// create connection to postgres database
	const sql = postgres(context.env.HYPERDRIVE.connectionString);

	try {
		const result = await sql`SELECT id, name, value FROM records`;

		return Response.json({result: result})
	} catch (e) {
		return Response.json({error: e.message, {status: 500}});
	}
}

import postgres from "postgres";

interface Env {
	HYPERDRIVE: Hyperdrive;
}

type MyRecord = {
	id: number;
	name: string;
	value: string;
};

export const onRequest: PagesFunction<Env> = async (context) => {
	// create connection to postgres database
	const sql = postgres(context.env.HYPERDRIVE.connectionString);

	try {
		const result = await sql<MyRecord[]>`SELECT id, name, value FROM records`;

		return Response.json({result: result})
	} catch (e) {
		return Response.json({error: e.message, {status: 500}});
	}
};

Чтобы взаимодействовать с привязкой Hyperdrive локально, укажите локальную строку подключения к базе данных, к которой проект Pages будет подключаться напрямую. Вы можете задать переменную окружения CLOUDFLARE_HYPERDRIVE_LOCAL_CONNECTION_STRING_<BINDING_NAME> со строкой подключения к базе данных, либо используйте файл Wrangler, чтобы настроить привязку Hyperdrive с localConnectionString как указано в документация Hyperdrive для локальной разработки. Затем выполните npx wrangler pages dev <OUTPUT_DIR>.

Analytics Engine привязка позволяет записывать аналитику внутри вашей Pages Function.

Чтобы привязать набор данных Analytics Engine к Pages Function, необходимо настроить привязку Analytics Engine с помощью конфигурационный файл Wrangler или панель управления Cloudflare:

Чтобы настроить привязку Analytics Engine через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Bindings > Add > Analytics engine.

4. Присвойте своей привязке имя в разделе Имя переменной.

5. В разделе Набор данных, введите нужный набор данных.

6. Повторно разверните проект, чтобы привязка вступила в силу.

Ниже приведён пример использования привязки Analytics Engine в вашей функции. В следующем примере привязка называется ANALYTICS_ENGINE и вы можете обращаться к привязке в коде Function через context.env:

export async function onRequest(context) {
	const url = new URL(context.request.url);

	context.env.ANALYTICS_ENGINE.writeDataPoint({
		indexes: [],
		blobs: [url.hostname, url.pathname],
		doubles: [],
	});

	return new Response("Logged analytic");
}

interface Env {
	ANALYTICS_ENGINE: AnalyticsEngineDataset;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	const url = new URL(context.request.url);

	context.env.ANALYTICS_ENGINE.writeDataPoint({
		indexes: [],
		blobs: [url.hostname, url.pathname],
		doubles: [],
	});

	return new Response("Logged analytic");
};

Привязку Analytics Engine нельзя использовать локально.

Одна переменная окружения это внедряемое значение, доступное вашим Functions. Переменные окружения относятся к привязкам, которые позволяют прикреплять к вашей Pages Function текстовые строки или значения JSON. Значение хранится в виде обычного текста. Задавайте переменные окружения прямо в панели управления Cloudflare как для продакшен, так и для preview-окружений, во время выполнения и во время сборки.

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

Чтобы настроить переменную окружения через Cloudflare dashboard:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Переменные и секреты > Add .

4. После указания имени и значения переменной выберите Save.

Ниже приведён пример использования переменных окружения в вашей функции. В этом примере переменная окружения называется ENVIRONMENT и вы можете обращаться к переменной окружения через context.env:

export function onRequest(context) {
	if (context.env.ENVIRONMENT === "development") {
		return new Response("This is a local environment!");
	} else {
		return new Response("This is a live environment");
	}
}

interface Env {
	ENVIRONMENT: string;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	if (context.env.ENVIRONMENT === "development") {
		return new Response("This is a local environment!");
	} else {
		return new Response("This is a live environment");
	}
};

С переменными окружения можно работать локально одним из двух способов:

• Настройте файл Wrangler проекта Pages и запуск npx wrangler pages dev.
• Передайте аргументы в wrangler pages dev напрямую.

Чтобы взаимодействовать с переменными окружения локально через Wrangler CLI, добавьте --binding=<ENVIRONMENT_VARIABLE_NAME>=<ENVIRONMENT_VARIABLE_VALUE> к wrangler pages dev команда:

npx wrangler pages dev --binding=<ENVIRONMENT_VARIABLE_NAME>=<ENVIRONMENT_VARIABLE_VALUE>

Secrets представляют собой тип binding, который позволяет прикреплять зашифрованные текстовые значения к вашей Pages Function. Просмотреть secrets после того, как вы их задали, нельзя: обращаться к ним можно только программно на context.env. Secrets используются для хранения конфиденциальной информации, например ключей API и токенов авторизации.

Чтобы добавить секреты в проект Pages:

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

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

2. Выберите свой проект Pages.

3. Перейдите в Настройки > Переменные и секреты > Add.

4. Задайте имя и значение переменной.

5. Выберите Зашифровать чтобы создать секрет.

6. Выберите Save.

Секреты используются так же, как переменные окружения. При установке секретов через Wrangler или панель управления Cloudflare это нужно сделать до развёртывания, которое их использует. Подробнее см. Переменные окружения.

Разместите секреты для использования при локальной разработке либо в .dev.vars файл или .env файл, в том же каталоге, что и файл конфигурации Wrangler.

Эти файлы должны быть отформатированы с помощью dotenv ↗ синтаксис. Например:

SECRET_KEY="value"
API_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"

Чтобы задать разные секреты для каждого окружения Cloudflare, создайте файлы с именами .dev.vars.<environment-name> или .env.<environment-name>.

Когда вы выбираете окружение Cloudflare в локальной разработке, соответствующий файл конкретного окружения загружается раньше общего .dev.vars (или .env) файл.

• При использовании .dev.vars.<environment-name> файлов все секреты должны быть определены отдельно для каждого окружения. Если .dev.vars.<environment-name> существует, то будет загружен только он; .dev.vars файл не будет загружен.
• В противоположность этому все соответствующие .env файлов, и их значения объединяются. Для каждой переменной используется значение из наиболее специфичного файла в следующем порядке приоритета:
  • .env.<environment-name>.local (наиболее специфичный)
  • .env.local
  • .env.<environment-name>
  • .env (наименее специфичный)