Развертывание в Vercel одним кликом: Быстрая публикация приложений без аутентификации

Чему вы научитесь

Одной фразой попросить Claude развернуть ваш проект в Vercel без ручной настройки
Получить доступную ссылку на превью и ссылку на передачу прав
Автоматически определять фреймворк проекта (Next.js, React, Vue, Svelte и другие 40+)
Обрабатывать статические HTML-сайты, поддерживать переименование отдельных файлов

Текущие проблемы

Каждый раз, когда вы хотите поделиться проектом с другими, нужно:

Вручную войти на сайт Vercel
Создать новый проект
Подключить Git-репозиторий
Дождаться завершения сборки
Запомнить длинный URL и поделиться им с другими

Если вы просто хотите быстро показать demo или прототип, эти шаги слишком утомительны.

Когда использовать этот метод

Подходит для следующих сценариев:

🚀 Быстро создать превью проекта и поделиться с командой
📦 Показать demo клиентам или друзьям
🔄 Автоматически генерировать развертывания превью в CI/CD
🌐 Развертывать статические HTML-страницы или SPA

Основная идея

Рабочий процесс навыка Vercel Deploy очень прост:

Ваша команда → Claude обнаруживает ключевые слова → активирует навык развертывания
    ↓
          Определение типа фреймворка (из package.json)
    ↓
          Упаковка проекта (исключение node_modules и .git)
    ↓
          Загрузка в Vercel API
    ↓
          Возврат двух ссылок (превью + передача прав)

Почему нужны две ссылки?

Preview URL: немедленно доступный адрес превью
Claim URL: передает это развертывание под ваш аккаунт Vercel

Преимущество этого дизайна: развертывающая сторона (Agent) не нуждается в правах вашего аккаунта, вы можете получить права через Claim URL позже.

🎒 Подготовка перед началом

Предварительная проверка

✅ Завершена Установка Agent Skills
✅ Структура каталогов проекта полная (есть package.json или это статический HTML-проект)
✅ Сетевые разрешения claude.ai настроены (если используете claude.ai)

Напоминание о сетевых разрешениях

Если вы используете claude.ai (онлайн-версию), нужно разрешить доступ к домену *.vercel.com:

Перейдите на https://claude.ai/settings/capabilities
Добавьте *.vercel.com в белый список
Сохраните настройки и повторите попытку

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

Следуйте за мной

Шаг 1: Перейдите в каталог проекта

bash

# Войдите в каталог вашего проекта
cd /path/to/your/project

Почему Скрипт развертывания должен найти package.json и исходные файлы проекта, правильное определение каталога важно.

Шаг 2: Скажите Claude развернуть

В диалоге Claude введите:

Deploy my app to Vercel

Вы также можете попробовать эти триггерные фразы:

"Deploy this to production"
"Deploy and give me link"
"Push this live"
"Create a preview deployment"

Шаг 3: Наблюдайте за процессом развертывания

Вы увидите похожий вывод:

Preparing deployment...
Detected framework: nextjs
Creating deployment package...
Deploying...
✓ Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

View your site at Preview URL.
To transfer this deployment to your Vercel account, visit the Claim URL.

В то же время, Claude также выведет в формате JSON (удобно для разбора скриптами):

json

{
  "previewUrl": "https://skill-deploy-abc123.vercel.app",
  "claimUrl": "https://vercel.com/claim-deployment?code=...",
  "deploymentId": "dpl_...",
  "projectId": "prj_..."
}

Вы должны увидеть:

Подтверждение успешного развертывания ✓
Два URL (preview и claim)
Если это кодовый проект, также будет показано имя обнаруженного фреймворка

Шаг 4: Посетите ссылку на превью

Нажмите на Preview URL, и вы увидите, что сайт уже в сети в реальном времени!

Если это demo или временная демонстрация, задача завершена.

Шаг 5: (необязательно) Передача прав

Если вы хотите долгосрочно управлять этим развертыванием:

Нажмите на Claim URL
Войдите в свой аккаунт Vercel
Подтвердите передачу
Развертывание теперь принадлежит вашему аккаунту, вы можете продолжить редактирование и управление

Вы должны увидеть:

Развертывание появляется под вашим аккаунтом Vercel
Можно просматривать логи, повторное развертывание и т.д. в Vercel Dashboard

Контрольная точка ✅

После завершения развертывания подтвердите следующее:

[ ] Preview URL можно открыть в браузере
[ ] Страница отображается нормально (нет 404 или ошибок сборки)
[ ] Если это кодовый проект, фреймворк определен правильно (Next.js, Vite и т.д.)
[ ] Если требуется долгосрочное управление, права переданы через Claim URL

Поддерживаемые фреймворки

Навык Vercel Deploy может автоматически определять 40+ фреймворков:

Категория	Фреймворки (частичные примеры)
React	Next.js, Gatsby, Create React App, Remix
Vue	Nuxt, Vitepress, Vuepress
Svelte	SvelteKit, Svelte
Angular	Angular, Ionic Angular
Node.js Backend	Express, Hono, Fastify, NestJS
Инструменты сборки	Vite, Parcel
Другие	Astro, Solid Start, Ember, Astro, Hexo, Eleventy

Принцип определения фреймворка

Скрипт прочитает ваш package.json и проверит имена пакетов в dependencies и devDependencies.

Если есть несколько совпадений, скрипт выберет самый конкретный фреймворк по приоритету (например, Next.js имеет приоритет над общим React).

Статические HTML-проекты

Если ваш проект не имеет package.json (чистый статический веб-сайт), навык развертывания интеллектуально обработает это:

Автоматическое обнаружение: распознает файлы .html в корневом каталоге
Переименование: если есть только один файл .html и он не index.html, автоматически переименуется в index.html
Прямое развертывание: как статический сайт размещается на Vercel

Пример сценария:

bash

my-static-site/
└── demo.html  # автоматически переименуется в index.html

После развертывания, посещение ссылки на превью покажет содержимое demo.html.

На что обратить внимание

Проблема 1: Сбой развертывания, ошибка сети

Симптом:

Error: Network Egress Error

Причина: claude.ai по умолчанию блокирует доступ к внешним доменам.

Решение:

Перейдите на https://claude.ai/settings/capabilities
Добавьте *.vercel.com в белый список
Повторно разверните

Проблема 2: Неверное определение фреймворка

Симптом:

Detected framework: vite
# но вы ожидаете nextjs

Причина: скрипт соответствует по приоритету зависимостей, может остановиться после обнаружения vite.

Решение:

Проверьте порядок зависимостей в package.json
Если это не влияет на развертывание, можно игнорировать (Vercel автоматически соберет)
Проект все равно может нормально развернуться, просто может использовать стандартную конфигурацию Vite

Проблема 3: Статический веб-сайт возвращает 404

Симптом: Один файл .html после развертывания возвращает 404.

Решение: Убедитесь, что HTML-файл находится в корневом каталоге проекта. Если файл находится в подкаталоге, Vercel по умолчанию не будет маршрутизировать его по корневому пути.

Правильная структура:

project/
└── my-site.html  # один файл в корневом каталоге, автоматически переименовывается в index.html

Неправильная структура:

project/
└── dist/
    └── my-site.html  # не будет автоматически переименован, доступ вернет 404

Проблема 4: Развертывание успешно, но страница выдает ошибку

Симптом: Развертывание успешно, но при посещении страницы появляются ошибки сборки или выполнения.

Решение:

Локально запустите npm run build, проверьте, проходит ли сборка
Просмотрите логи развертывания (если уже переданы на свой аккаунт Vercel)
Проверьте переменные окружения (если проект зависит от .env)

Автоматическое исключение файлов

Скрипт развертывания автоматически исключает:

node_modules/ (избегает загрузки зависимостей)
.git/ (избегает загрузки истории версий)

Если вашему проекту нужно исключить другие файлы (например, .env), рекомендуется обработать это при ручной упаковке.

Расширенное использование

Указание пути развертывания

Вы также можете указать развертывание другого каталога:

Deploy project at ./my-app

Claude использует этот путь для развертывания.

Развертывание из существующего tarball

Если у вас уже есть упакованный файл .tgz:

Deploy /path/to/project.tgz to Vercel

Скрипт напрямую загрузит существующий архив, пропустив этап упаковки.

Итоги урока

Навык Vercel Deploy делает развертывание проще, чем когда-либо:

Основная ценность:

✅ Одной фразой завершить развертывание без ручной настройки
✅ Автоматически определять фреймворк, поддержка 40+ технологий
✅ Развертывание без аутентификации, высокая безопасность
✅ Возврат ссылки на превью + ссылка на передачу прав

Применимые сценарии:

🚀 Быстро делиться demo или прототипами
📦 Предварительный просмотр внутри команды
🔄 Автоматизация процессов CI/CD
🌐 Хостинг статических веб-сайтов

Дальнейшие действия: Если вы хотите глубже изучить принципы работы навыков, можете посмотреть Лучшие практики оптимизации производительности React или узнать, как Разрабатывать пользовательские навыки.

Следующий урок

В следующем уроке мы изучим Лучшие практики оптимизации производительности React/Next.js.
Вы узнаете:
57 правил оптимизации производительности React
Как устранить каскадную загрузку, оптимизировать размер пакета
Как Agent автоматически проверяет код и дает предложения по исправлению

Приложение: Справочник по исходному коду

Нажмите, чтобы раскрыть расположение исходного кода

Обновлено: 2026-01-25

Функция	Путь к файлу	Строки
Вход скрипта развертывания	`skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh`	1-250
Логика определения фреймворка	`deploy.sh`	12-156
Упаковка и загрузка в API	`deploy.sh`	208-222
Переименование статического HTML	`deploy.sh`	192-205
Документация определения навыка	`skills/claude.ai/vercel-deploy-claimable/SKILL.md`	1-113
Устранение сетевых ошибок	`SKILL.md`	102-112

Ключевые константы:

DEPLOY_ENDPOINT = "https://claude-skills-deploy.vercel.com/api/deploy": конечная точка Vercel API развертывания

Ключевые функции:

detect_framework(): определяет 40+ фреймворков из package.json

Поддерживаемое определение фреймворков (по приоритету):

React-класс: Next.js, Gatsby, Remix, React Router
Vue-класс: Nuxt, Vitepress, Vuepress
Svelte-класс: SvelteKit, Svelte
Другие: Astro, Angular, Express, Hono, Vite, Parcel и другие

Развертывание в Vercel одним кликом: Быстрая публикация приложений без аутентификации ​

Чему вы научитесь ​

Текущие проблемы ​

Когда использовать этот метод ​

Основная идея ​

🎒 Подготовка перед началом ​

Следуйте за мной ​

Шаг 1: Перейдите в каталог проекта ​

Шаг 2: Скажите Claude развернуть ​

Шаг 3: Наблюдайте за процессом развертывания ​

Шаг 4: Посетите ссылку на превью ​

Шаг 5: (необязательно) Передача прав ​

Контрольная точка ✅ ​

Поддерживаемые фреймворки ​

Статические HTML-проекты ​

На что обратить внимание ​

Проблема 1: Сбой развертывания, ошибка сети ​

Проблема 2: Неверное определение фреймворка ​

Проблема 3: Статический веб-сайт возвращает 404 ​

Проблема 4: Развертывание успешно, но страница выдает ошибку ​

Расширенное использование ​

Указание пути развертывания ​

Развертывание из существующего tarball ​

Итоги урока ​

Следующий урок ​

Приложение: Справочник по исходному коду ​

Развертывание в Vercel одним кликом: Быстрая публикация приложений без аутентификации

Чему вы научитесь

Текущие проблемы

Когда использовать этот метод

Основная идея

🎒 Подготовка перед началом

Следуйте за мной

Шаг 1: Перейдите в каталог проекта

Шаг 2: Скажите Claude развернуть

Шаг 3: Наблюдайте за процессом развертывания

Шаг 4: Посетите ссылку на превью

Шаг 5: (необязательно) Передача прав

Контрольная точка ✅

Поддерживаемые фреймворки

Статические HTML-проекты

На что обратить внимание

Проблема 1: Сбой развертывания, ошибка сети

Проблема 2: Неверное определение фреймворка

Проблема 3: Статический веб-сайт возвращает 404

Проблема 4: Развертывание успешно, но страница выдает ошибку

Расширенное использование

Указание пути развертывания

Развертывание из существующего tarball

Итоги урока

Следующий урок

Приложение: Справочник по исходному коду