Netlify идеально подходит для развертывания такого типа приложений, потому что ваш проект не требует шага сборки.
Netlify идеально подходит для развертывания такого типа приложений, потому что ваш проект не требует шага сборки (build step). Благодаря использованию importmap в index.html, все зависимости загружаются напрямую в браузере, и Netlify нужно просто отдавать ваши файлы как есть.
Это делает процесс невероятно простым. Вот пошаговая инструкция.
Прежде чем начать
Вам понадобятся:
Аккаунт на Netlify: Бесплатного тарифа более чем достаточно.
Аккаунт на GitHub (или GitLab/Bitbucket): Ваш код должен быть в Git-репозитории. Это стандартный и самый удобный способ работы с Netlify.
Шаг 1: Загрузите код в репозиторий GitHub
Если ваш код еще не в GitHub, создайте новый репозиторий и загрузите туда все файлы вашего приложения (index.html, index.tsx, App.tsx, и т.д.).
Шаг 2: Создание нового сайта на Netlify
Войдите в свою учетную запись Netlify.
На главной панели (dashboard) нажмите кнопку "Add new site" и в выпадающем меню выберите "Import an existing project".
Подключитесь к вашему провайдеру Git (например, GitHub). Вам нужно будет авторизовать Netlify для доступа к вашим репозиториям.
Выберите репозиторий, в который вы только что загрузили код вашего приложения.
Шаг 3: Настройка параметров развертывания (Deploy settings)
Это самый важный шаг. Netlify спросит вас, как собрать и развернуть ваш сайт.
Поскольку у вас нет шага сборки, настройки будут очень простыми:
Branch to deploy: Выберите основную ветку вашего репозитория (обычно main или master).
Build command: Оставьте это поле пустым! Это критически важно. У вас нет команды вроде npm run build.
Publish directory: Укажите . (точка) или просто оставьте его пустым, если Netlify по умолчанию указывает на корень вашего репозитория. Это говорит Netlify, что ваш index.html находится в корневой папке проекта.
Ваши настройки должны выглядеть так:
Шаг 4: Добавление переменной окружения (API Key)
Ваше приложение использует process.env.API_KEY для доступа к Gemini API. Вам нужно безопасно передать этот ключ в Netlify.
После шага 3, но перед тем как нажать "Deploy", перейдите в раздел "Advanced build settings" или найдите настройки сайта после его создания. Проще всего сделать это после создания сайта.
Нажмите кнопку "Deploy site". Netlify создаст сайт и, скорее всего, первая попытка развертывания завершится неудачно или приложение не будет работать из-за отсутствия ключа. Это нормально.
Перейдите на страницу только что созданного сайта в Netlify.
Откройте "Site settings" -> "Build & deploy" -> "Environment".
В разделе "Environment variables" нажмите "Edit variables".
Добавьте новую переменную:
Key: API_KEY
Value: Вставьте сюда ваш секретный ключ от Google Gemini API.
Нажмите "Save".
Шаг 5: Повторное развертывание (Redeploy)
После сохранения переменной окружения вам нужно заново развернуть сайт, чтобы он использовал новый ключ.
Перейдите на вкладку "Deploys" для вашего сайта.
Вверху справа нажмите на выпадающий список "Trigger deploy" и выберите "Deploy site".
Netlify начнет новое развертывание. Через минуту-две ваш сайт будет опубликован!
Шаг 6: Готово!
После успешного развертывания Netlify предоставит вам уникальный URL (например, your-cool-site-name.netlify.app). Вы можете открыть его и увидеть свое работающее приложение. При желании, вы можете настроить собственный домен в разделе "Domain management".
Устранение неполадок
Ошибка "API Key is missing": Убедитесь, что вы правильно выполнили Шаг 4. Имя ключа должно быть ровно API_KEY. После добавления ключа не забудьте запустить повторное развертывание (Шаг 5).
Страница 404 (Not Found): Проверьте настройку Publish directory (Шаг 3). Она должна указывать на папку, где лежит ваш index.html. В вашем случае — это корень проекта (.).
Другие ошибки: Всегда проверяйте логи развертывания (deploy logs) на вкладке "Deploys". Netlify подробно пишет, что пошло не так.
Комментарии
Отправить комментарий