Развертывание React на AWS EC2: пошаговое руководство

О чём эта инструкция

• Быстрая установка и подключение к EC2.
• Установка Node.js, сборка React-приложения.
• Настройка Nginx для обслуживания build-папки.
• Безопасность, SSL, домен и варианты масштабирования.

Важно: предполагается, что у вас уже есть аккаунт AWS и базовые навыки работы с терминалом. “EC2” — виртуальная машина в AWS; “AMI” — образ операционной системы.

1. Подготовка и запуск EC2-инстанса

Шаги для запуска инстанса:

• Войдите в AWS Management Console. Если аккаунта нет — зарегистрируйтесь на aws.amazon.com.
• Перейдите в раздел EC2 и нажмите Launch Instances.
• Выберите AMI (Amazon Linux 2, Ubuntu LTS и т. п.) в зависимости от предпочтений.
• Выберите тип инстанса (например t3.micro для теста; в продакшне — подобрать по нагрузке).
• Настройте Security Group: откройте порты 22 (SSH), 80 (HTTP), 443 (HTTPS). Ограничьте доступ к порту 22 по IP, если возможно.
• Создайте новый key pair (.pem) или выберите существующий и скачайте приватный ключ.

Совет: выделите Elastic IP для инстанса, чтобы иметь постоянный публичный адрес при перезапуске.

2. Подключение к EC2-инстансу

1. Установите права на приватный ключ:

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

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

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

Примечание: для Ubuntu пользователь — ubuntu: ssh -i key.pem ubuntu@ip

Если вы на Windows и используете PuTTY, сначала конвертируйте .pem в .ppk через PuTTYgen. Для SFTP можно использовать FileZilla, указав ключ в настройках соединения.

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

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

После подключения обновите ОС:

sudo yum update -y

Для Ubuntu используйте:

sudo apt update && sudo apt upgrade -y

4. Установка Node.js и npm (через nvm)

Рекомендую устанавливать Node.js через nvm — это облегчает переключение версий.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.nvm/nvm.sh
nvm install --lts

Проверьте версии:

node -v
npm -v

Если вам нужен серверный процесс (например, для SSR или API), рассмотрите процесс-менеджер pm2.

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

Установите Git, если он отсутствует:

sudo yum install git -y

Клонируйте репозиторий:

git clone 

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

cd 

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

Установите зависимости и соберите статические файлы:

npm install
npm run build

После команды build в каталоге проекта появится папка build (или dist в зависимости от конфигурации), готовая для обслуживания статическими файлами.

7. Установка и настройка Nginx

Установите Nginx:

sudo yum install nginx -y

Запустите и включите автозапуск:

sudo systemctl start nginx
sudo systemctl enable nginx

Если используете Amazon Linux с init-скриптами:

sudo service nginx start
sudo chkconfig nginx on

Пример конфигурации Nginx для React

Откройте конфигурацию или создайте новый серверный блок:

sudo nano /etc/nginx/conf.d/react-app.conf

Впишите пример:

server {
    listen 80;
    server_name your_domain_or_IP;

    root /path/to/your/react/application/build;
    index index.html;

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

    location /static/ {
        expires 30d;
    }
}

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

sudo nginx -t
sudo systemctl restart nginx

Совет: указывайте абсолютный путь в root и следите за правами на файлы (обычно пользователь nginx/ www-data должен иметь доступ).

8. Доступ к приложению

• В AWS Console найдите публичный IP инстанса или привязанный Elastic IP.
• В браузере откройте http://your-instance-public-ip/ или настройте DNS-запись A на ваш домен.

9. SSL и безопасный трафик

Для публичных приложений используйте HTTPS. Несколько вариантов:

• Certbot (Let’s Encrypt) на самом инстансе для бесплатного сертификата.
• AWS Certificate Manager + Elastic Load Balancer — сертификаты управляются AWS, рекомендуется для продакшна.

Пример установки Certbot на Amazon Linux / nginx:

sudo yum install certbot python2-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Важно: автоматически обновлять сертификаты (cron/systemd timer) и открывать порт 443.

10. Рекомендуемые улучшения и продакшн-практики

• Используйте IAM роли и минимум привилегий для сервисов.
• Разместите статические файлы в S3 и подключите CloudFront для CDN и кэширования.
• Если ожидается нагрузка — ставьте Application Load Balancer и Auto Scaling Group.
• Мониторинг: CloudWatch для метрик, логов и алёртов.
• Логи Nginx: настройте ротацию и централизованный сбор (например, CloudWatch Logs или ELK).

Альтернатива: вместо EC2 можно использовать Elastic Beanstalk, ECS (контейнеры) или Amplify для фронтенда.

Руководство по устранению неполадок

• Ничего не отвечает по HTTP: проверьте Security Group (порты 80/443), Nginx статус (systemctl status nginx), права на файлы.
• 502 Bad Gateway: если у вас прокси на backend, проверьте что backend запущен и слушает правильный порт.
• Статические файлы возвращают 404: проверьте путь root и директиву try_files.
• SSH не подключается: проверьте приватный ключ и правило Security Group по порту 22; убедитесь, что инстанс запущен.

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

• Приложение доступно по HTTP и/или HTTPS.
• Страница загружается без ошибок в консоли браузера (нет 404 для бандлов).
• SSL-сертификат действителен и автоматически обновляется.
• Логи и мониторинг настроены для базового оповещения.

Чек-листы по ролям

Разработчик:

• Проверить сборку локально: npm run build.
• Убедиться, что routing React корректно работает в режиме history API.

Операции (Ops):

• Настроить Security Groups и резервное копирование.
• Настроить мониторинг, логирование и авто-обновления безопасности.

Небольшой словарь 1 строка

• EC2: виртуальная машина в AWS. AMI: образ операционной системы. EIP: постоянный публичный IP.

Короткая сводка

Это руководство помогает быстро развернуть React-приложение на EC2 с Nginx, покрывая подключение, сборку, настройку сервера, SSL и базовые практики продакшн. Для масштабирования и высокодоступных сценариев рассмотрите Load Balancer и S3/CloudFront.

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