Развернуть React на AWS EC2 — пошаговое руководство

Введение

В облачных средах AWS EC2 часто используется для хостинга статических и серверных приложений. Это руководство объясняет, как быстро подготовить экземпляр EC2 и развернуть в нём React‑приложение так, чтобы оно было доступно по HTTP/HTTPS. Разделы содержат практические команды, шаблоны конфигураций и контрольные списки для разработчиков и инженеров по эксплуатации.

Важно: если у вас другой дистрибутив (например, Ubuntu), замените менеджер пакетов (yum → apt) и команды управления сервисами при необходимости.

1. Подготовка и создание EC2‑экземпляра

Шаги для первого запуска экземпляра EC2.

• Войдите в AWS Management Console и откройте сервис EC2. Если у вас нет аккаунта — зарегистрируйтесь заранее на aws.amazon.com.
• Нажмите Launch Instance → выберите Amazon Machine Image (AMI): Amazon Linux 2 или другой совместимый образ. Для Node.js и Nginx Amazon Linux 2 — удобный выбор.
• Выберите тип экземпляра (t3.micro подходит для тестирования, для продакшена подберите по нагрузке).
• Настройте Storage (EBS) и теги по необходимости.
• Настройте Security Group:
  • Разрешите входящий SSH (порт 22) только с вашего IP-адреса (рекомендуется).
  • Разрешите HTTP (порт 80) и HTTPS (порт 443) — для публичного доступа.
  • При необходимости откройте порты для веб‑API.
• Создайте новую пару ключей (key pair) или используйте существующую и скачайте .pem файл.

Важно: храните приватный ключ (.pem) в безопасном месте и ограничьте доступ к нему.

2. Подключение к экземпляру

Как подключиться по SSH и варианты для Windows.

• Сделайте права файла приватного ключа строгими:

chmod 400 /path/to/key-pair.pem

• Подключитесь по SSH (пример для Amazon Linux/AMI):

ssh -i /path/to/key-pair.pem ec2-user@your-instance-public-ip

• Для Ubuntu используйте пользователя ubuntu:

ssh -i /path/to/key-pair.pem ubuntu@your-instance-public-ip

• Для Windows: если вы используете PuTTY, конвертируйте .pem в .ppk с помощью PuTTYgen. Для передачи файлов используйте SFTP через FileZilla или WinSCP, указав .pem/.ppk.

Примечание: если не удаётся подключиться — проверьте Security Group, локальный фаервол и публичный IP/Elastic IP.

3. Обновление пакетов и базовая подготовка системы

После подключения обновите пакеты и установите необходимые утилиты:

sudo yum update -y
sudo yum install -y git nginx

Если вы на Ubuntu:

sudo apt update && sudo apt upgrade -y
sudo apt install -y git nginx

Проверьте статус Nginx:

sudo systemctl status nginx

4. Установка Node.js и npm

Рекомендуется ставить Node.js через NodeSource (надёжно и просто):

curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo yum install -y nodejs

Для Ubuntu используйте соответствующий скрипт для apt. Альтернатива — nvm, если вам нужны несколько версий Node для разработки.

Проверка:

node -v
npm -v

5. Клонирование репозитория с React‑приложением

Скопируйте проект на сервер:

sudo yum install -y git   # если ещё не установлен
git clone 
cd 

Если репозиторий приватный — настройте SSH‑ключи или используйте временные учётные данные.

6. Установка зависимостей и сборка приложения

Установите зависимости и создайте production‑билд:

npm install
npm run build

Команда npm run build создаст папку build (по умолчанию для Create React App). Убедитесь, что в package.json прописан корректный скрипт сборки.

Совет: перед сборкой установите переменные окружения для production (NODE_ENV=production) и, при необходимости, корректный PUBLIC_URL.

7. Настройка Nginx для доставки React‑приложения

Создайте каталог для размещения вашего приложения и скопируйте билд в него:

sudo mkdir -p /var/www/react-app
sudo cp -r build/* /var/www/react-app/
sudo chown -R nginx:nginx /var/www/react-app || sudo chown -R www-data:www-data /var/www/react-app

Пример минимального блока server для /etc/nginx/conf.d/react.conf:

server {
    listen 80;
    server_name example.com your-instance-public-ip;

    root /var/www/react-app;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /static/ {
        expires 30d;
    }
}

Проверьте конфигурацию и перезапустите Nginx:

sudo nginx -t
sudo systemctl restart nginx
sudo systemctl enable nginx

Если используется старый init.d: sudo service nginx restart и sudo chkconfig nginx on.

8. Настройка HTTPS (коротко)

Рекомендуется включить HTTPS. Быстрый путь — установить Certbot и получить сертификат Let’s Encrypt (требуется доменное имя, указывающее на IP экземпляра).

Общая последовательность:

• Пропишите A‑запись на ваш публичный IP.
• Установите certbot и плагин для nginx.
• Выполните certbot –nginx и следуйте подсказкам.

Важно: автоматическое обновление сертификатов — настройте systemd‑таймер или cron (certbot обычно добавляет это автоматически).

9. Проверка и отладка

Где смотреть логи и что проверить:

• Логи Nginx: /var/log/nginx/error.log и /var/log/nginx/access.log
• Статус сервиса: sudo systemctl status nginx
• Права на файлы и владелец каталога с билдом
• Security Group и локальный фаервол (firewall-cmd/ufw)
• Браузер: откройте http://your-instance-public-ip/ или https://your-domain/

Частые ошибки и их причины:

• 403 Forbidden: неверные права на директорию или SELinux блокирует доступ.
• 502/504: Nginx проксирует на несуществующий бэкенд (не относится к статическому React, но важно при SSR).
• Ошибки сборки: отсутствуют зависимости или несовместимые версии Node.

10. Базовая безопасность и hardening

Краткая чеклиста по безопасности:

• Ограничьте SSH по IP и используйте ключи (no password authentication).
• Регулярно обновляйте систему: yum/apt upgrade.
• Настройте автоматические обновления для критичных патчей по вашему процессу.
• Отключите ненужные сервисы и порты.
• Используйте HTTPS и HSTS для веб‑трафика.
• Рассмотрите AWS‑функции: IAM‑роли, CloudWatch для логов и мониторинга, AWS WAF для защиты на уровне приложения.

Роли и чек‑листы

Разделены по ответственностям — кратко.

Developer:

• Локально пройти npm run build.
• Убедиться, что окружение (env) корректно настроено.
• Проверить SPA‑роутинг (работа history API).

DevOps / SRE:

• Создать и конфигурировать EC2, security group, EBS.
• Настроить Nginx, права и CI/CD деплой.
• Настроить мониторинг (CloudWatch) и резервное копирование.

Security:

• Проверить SSH‑доступ и журналы входов.
• Настроить HTTPS и регулярную проверку сертификатов.
• Проанализировать открытые порты и правила фаервола.

QA:

• Проверить доступность главной страницы и основных маршрутов.
• Прогнать smoke‑tests и проверить статические ассеты.

Критерии приёмки

1. По адресу http(s)://ваш‑домен или IP загружается index.html без ошибок консоли, связанных с 404 для основных JS/CSS.
2. Сервер Nginx запущен и отвечает на порту 80/443.
3. Security Group открыты только нужные порты (22,80,443) и SSH доступ ограничен по IP.
4. Сборка прошла без ошибок и папка build корректно скопирована в root Nginx.
5. Наличие базового HTTPS сертификата (если применимо).

Альтернативные подходы и когда этот подход не подходит

Альтернативы:

• Хостинг статического билда в Amazon S3 + CloudFront — проще и дешевле для статических сайтов с CDN‑кешем.
• Использование контейнеров (ECS/EKS) — если требуется масштабирование и оркестрация.
• Серверлесс‑подходы (Netlify, Vercel) — для быстрого CI/CD и автоматических деплоев.

Когда EC2 может быть не лучшим выбором:

• Если нужен глобальный CDN и минимальная задержка — лучше S3+CloudFront.
• Если требуется простая автоматическая сборка и деплой из репозитория без управления сервером — Netlify/Vercel.

Сниппеты и шаблоны

Nginx: минимальный конфиг для React (ещё раз):

server {
  listen 80;
  server_name example.com;
  root /var/www/react-app;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Команда для копирования билда и перезапуска nginx:

sudo rsync -a --delete build/ /var/www/react-app/
sudo systemctl restart nginx

Пример команды SSH с проксированием (если нужно):

ssh -i /path/to/key.pem -L 3000:localhost:3000 ec2-user@your-ip

Краткая методология деплоя (mini‑playbook)

1. На CI собирается production‑билд и выполняется тестирование.
2. На staging сервере проверяют работу приложения и обновляют Nginx конфиг.
3. При успешной проверке на staging — копирование билда на prod и перезапуск Nginx.
4. Мониторинг и автоматические алерты на ошибки 5xx и падение сервиса.

Заключение и рекомендации

Развертывание React‑приложения на EC2 даёт полный контроль над окружением, что важно при специфичных требованиях к сети, безопасности или интеграции с внутренними сервисами. Для простых статических сайтов оцените S3+CloudFront как альтернативу. Автоматизируйте сборку и деплой через CI/CD и мониторьте систему в продакшене.

Ключевые шаги: подготовить EC2, настроить security group, подключиться по SSH, установить Node.js, собрать React, настроить Nginx и включить HTTPS. Следуйте чек‑листам и тестам приёмки, чтобы убедиться в надёжности и безопасности развертывания.