Управление и обновление приложения после деплоя

Управление развернутыми проектами

После успешного деплоя вашего приложения нет времени расслабляться. Финальный шаг — это управление готовым продуктом. Здесь мы рассмотрим интерфейсы и функции управления на популярных платформах, таких как Vercel и Netlify.

Управление на Vercel

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

1. Дашборд проекта
   После логина на Vercel вы найдете список всех ваших проектов. Выберите ваш проект, чтобы увидеть его текущий статус, доменное имя и историю развертываний.

2. История деплоя
   В разделе "Deployments" вы можете видеть все предыдущие развертывания. Если внезапно приложение перестало работать, можно откатиться к предыдущей версии в один клик. Звучит как "Ctrl+Z" для продакшена, правда?

3. Настройка домена
   Вы можете добавить пользовательский домен на вкладке "Domains". Например, если вам хочется, чтобы пользователи заходили на myawesomeapp.com, это легко настроить здесь.

4. Логи

   Всегда полезно заглянуть в логи деплоя, особенно если что-то пошло не так. Логи помогут найти ошибки или проблемы с конфигурацией.

Пример: работа с логами на Vercel

Если вы заметили проблему на продакшене, проверка логов — первое, что нужно сделать. Логи можно найти на вкладке "Functions" или в истории деплоя.

// Логи могут показать ошибки среды выполнения
// Например: проблема с доступом к переменным окружения
export const handler = async () => {
  const apiUrl = process.env.REACT_APP_API_URL;
  if (!apiUrl) {
    throw new Error("API URL is missing. Check your .env configuration.");
  }
};

Вы увидите ошибку в логах, как только приложение попытается обратиться к недоступной переменной.

Управление на Netlify

Netlify, как и Vercel, имеет удобный интерфейс:

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

2. Восстановление предыдущих версий
   Аналогично Vercel, вы можете откатить сайт к любому предыдущему развертыванию.

3. Страницы ошибок
   С помощью Netlify вы можете настроить пользовательские страницы ошибок (например, для 404).

4. Интеграция вебхуков
   Если вы используете CI/CD, то Netlify предоставляет возможность настроить вебхуки для автоматического деплоя.

Если новая версия сайта содержит баг, можно быстро восстановить предыдущую. На вкладке "Deploys" выберите успешное развертывание и нажмите "Restore".

Настройка автоматических обновлений

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

Использование CI/CD на Vercel и Netlify

CI/CD (continuous integration/continuous deployment) позволяет автоматически деплоить новую версию приложения при каждом пуше в репозиторий. Vercel и Netlify поддерживают это прямо "из коробки".

1. Подключение репозитория
   Первым шагом при деплое вашего проекта была интеграция с GitHub, GitLab или Bitbucket. Любое обновление в главной ветке (или другой указанной ветке) автоматически триггерит процесс деплоя.

2. Проверка PR (Pull Request)
   Обе платформы позволяют генерировать превью для каждого PR. Это означает, что вы можете протестировать изменения перед их слиянием, не влияя на продакшен.

Пример автоматизации деплоя

При деплое на Vercel убедитесь, что у вас активирована функция "Auto Deploy".

# Пример настройки .github/workflows/deploy.yml для CI/CD через GitHub Actions
name: Deploy to Vercel

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to Vercel
        run: vercel --prod --token ${{ secrets.VERCEL_TOKEN }}

Результатом этого workflow будет автоматический деплой приложения каждый раз, когда есть новый push в ветку main.

Мониторинг и поддержка приложения

Настройка аналитики

Для анализа пользовательского поведения вы можете подключить сервисы аналитики. Например:

• Google Analytics: отслеживание посещений, сессий, событий.
• Hotjar: для отслеживания кликов и тепловых карт.

Пример подключения Google Analytics

Добавьте следующий код в ваш index.html или настройте его через React-компонент:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'YOUR_TRACKING_ID', 'auto');
ga('send', 'pageview');

Мониторинг ошибок

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

• Sentry — инструмент для мониторинга ошибок.
• LogRocket — он отслеживает поведение пользователей и ошибки в реальном времени.

Пример интеграции Sentry

Установите библиотеку:

npm install --save @sentry/react @sentry/tracing

Добавьте в index.tsx:

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "https://your-dsn.sentry.io/",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0, // Это значение управляет объемом отслеживания. Уменьшите в продакшене.
});

Теперь ошибки и трейсинги будут отправляться в дашборд Sentry.

2

Задача

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

Недоступна

Автоматический деплой через GitHub Actions

Автоматический деплой через GitHub Actions

Открыть