Настройка деплоя на Netlify и основные команды

Почему Netlify?

Netlify — это платформа, которая специализируется на развертывании статических и JAMstack приложений. А теперь аналогия: представьте, что ваш сайт — это машина, а Netlify — это гараж с автосервисом. Он не только предоставляет место для парковки (развертывание), но и умеет чинить (обрабатывать формы, функции) и даже мыть машину (CDN и оптимизация). Среди главных возможностей Netlify:

• Автоматическое развертывание прямо из репозитория GitHub, GitLab или Bitbucket.
• Глобальная CDN, которая делает сайты очень быстрыми.
• Netlify Functions — для добавления серверной логики, если вдруг понадобилось.
• Простота управления формами — без установки дополнительных библиотек.
• Бесплатный тарифный план с удивительно широкими возможностями.

Подготовка к деплою

Перед тем как начать, убедитесь, что у вас готово React-приложение. Оно должно быть собрано для продакшна. Если забыли, на всякий случай напомню команду:

npm run build

Это создаст папку build, где и будет готовый к деплою вариант вашего приложения.

Подготовка Vite-приложения к деплою

Если ваш проект написан на движке Vite, то команда npm run build соберёт проект в папку dist, а не build как CRA. Именно эту папку мы и будем публиковать.

Теперь давайте зарегистрируемся на Netlify и подключим репозиторий.

Регистрация и подключение репозитория

1. Регистрация: перейдите на официальный сайт Netlify и создайте учетную запись. Вы можете зарегистрироваться через GitHub — это самый простой способ.

2. Создание нового сайта:

   • После регистрации вы попадете в панель управления.
   • Нажмите кнопку "Add new site" (или похожую опцию вроде "New site from Git").

3. Подключение репозитория:

   • Вам предложат выбрать платформу для репозитория (например, GitHub, GitLab).
   • Авторизуйтесь и выберите свой проект с React.
   • Не забывайте обновлять настройки доступа, если Netlify запросит.

Установка сборки и развертывание

После подключения репозитория вам нужно настроить сборку. Netlify автоматически попытается определить, как собрать проект, но лучше убедиться, что все правильно.

1. Настройка сборки:

   • В поле Build command укажите: npm run build
   • В поле Publish directory укажите: build. Для Vite укажите dist.
   • Это важно, потому что Netlify должен знать, откуда брать статические файлы для раздачи.

2. Развертывание:

   • Нажмите кнопку Deploy site. Магия началась!
   • Процесс сборки начнется, и вскоре ваш сайт будет доступен по автоматически созданному домену, например: super-project.netlify.app.

3. Проверка сайта:

   • После завершения развертывания откройте ссылку, указанную в панели управления, и убедитесь, что приложение работает.

Использование Netlify CLI

Если вам удобнее работать через терминал (или вы просто хотите почувствовать себя настоящим разработчиком), попробуйте Netlify CLI. Установите его глобально:

npm install -g netlify-cli

Затем авторизуйтесь:

netlify login

Теперь вы можете развернуть сайт прямо из терминала:

netlify deploy

Во время выполнения команды CLI попросит указать директорию для развертывания — это будет ваша папка build.

Настройка домена

Автоматический домен вида super-project.netlify.app — это здорово, но, согласитесь, ваш собственный домен звучит круче. Netlify позволяет подключить его буквально за пару минут.

1. Добавление собственного домена:

   • В панели управления перейдите в настройки своего сайта.
   • Найдите раздел Domain settings и добавьте свой домен.

2. Настройка DNS:

   • Если у вас есть доступ к настройкам DNS на стороне регистратора доменов, настройте их, следуя инструкциям Netlify.
   • Обычно нужно добавить CNAME или A-запись, чтобы связать домен с Netlify.

Через некоторое время (чаще всего 10–15 минут) ваш сайт станет доступен по вашему домену.

Полезные команды и возможности

Netlify CLI предоставляет много команд для управления вашим проектом. Вот некоторые из них:

• netlify status — покажет текущий статус развернутого сайта.
• netlify open — откроет ваш сайт или панель управления Netlify в браузере.
• netlify dev — запустит локальный сервер, имитирующий поведение платформы Netlify (полезно для тестирования функций и форм).

Подключение новых функций

Netlify — это не только про раздачу статических файлов. Вы можете расширить возможности сайта через:

1. Формы — без всяких дополнительных библиотек. Просто добавьте атрибут netlify к <form>:

      <form name="contact" netlify>
          <input type="text" name="name" />
          <button type="submit">Send</button>
      </form>
   

Теперь все данные с формы будут автоматически обрабатываться Netlify!

2. Netlify Functions — для добавления серверной логики. Например, вы можете создать серверную функцию для обработки запросов:
   • В папке /functions создайте файл hello.js:

     exports.handler = async (event, context) => {
        return {
          statusCode: 200,
          body: JSON.stringify({ message: "Hello, Netlify!" }),
        };
      };
     

   • Netlify автоматически задеплоит её и сделает доступной через URL: /api/hello.

Типичные проблемы и их решения

1. Ошибка сборки: убедитесь, что команда сборки указана правильно. Проверьте, что все зависимости проекта установлены.
2. Файлы не отображаются: убедитесь, что вы указали правильную папку build в настройках публикации.
3. Сбой подключения домена: дайте DNS немного времени для обновления. Иногда задержки достигают пары часов.

2

Задача

Модуль 3: React, 20 уровень, 5 лекция

Недоступна

Подключение репозитория к Netlify

Подключение репозитория к Netlify

Открыть