Размещение React SPA в AWS S3 и CloudFront
Соберите приложение React, загрузите его в S3, настройте дистрибутив CloudFront и аннулирование кэша.
«Размещение React SPA в AWS S3 и CloudFront» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Обзор статического хостинга S3
AWS S3 может предоставлять статические файлы (HTML, JS, CSS, изображения) как веб-сайт. В сочетании с CloudFront (CDN) это обеспечивает глобальное распространение, HTTPS и малую задержку для React SPA.
Сборка SPA
Соберите приложение React в статический каталог результатов.
# Vite:
npm run build # outputs to dist/
# Create React App:
npm run build # outputs to build/
# Next.js static export:
next build && next export # outputs to out/Создание и настройка бакета S3
Создайте бакет S3, включите статический веб-хостинг и задайте документы индекса и ошибок.
# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com
# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)Загрузка файлов сборки
Синхронизируйте результат сборки с S3. Установите длительные заголовки кэширования для ресурсов с хешами и запрет кэширования для index.html.
# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
--exclude index.html \
--cache-control "max-age=31536000,immutable"
# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
--cache-control "no-cache,no-store"Создание дистрибутива CloudFront
Создайте дистрибутив CloudFront, указывающий на бакет S3. Используйте конечную точку веб-сайта S3 (не конечную точку REST), чтобы поддержать маршрутизацию SPA.
# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routingИсправление маршрутизации SPA
CloudFront возвращает 403 для неизвестных путей (S3 ничего не знает о маршрутах React). Настройте собственный ответ на ошибку: 403 → /index.html со статусом 200.
Пользовательский домен и SSL
Запросите сертификат ACM для своего домена в регионе us-east-1 (это необходимо для CloudFront). Привяжите его к дистрибутиву и добавьте запись DNS CNAME, указывающую на домен CloudFront.
Очистка кэша при развёртывании
После развёртывания новых файлов очистите кэш CloudFront для index.html (на S3 для него задан запрет кэширования, но CloudFront всё равно может его кэшировать).
aws cloudfront create-invalidation \
--distribution-id EXXXXXXXXXXXXX \
--paths "/*"Развёртывание с помощью GitHub Actions
Автоматизируйте процесс развёртывания в CI: сборка → синхронизация с S3 → очистка кэша CloudFront.
- name: Deploy to S3
run: aws s3 sync dist/ s3://my-react-app.com/ --delete
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}
- name: Invalidate CloudFront
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"Политика бакета S3
Заблокируйте публичный доступ к бакету и используйте политику OAC (контроль доступа к источнику), чтобы только CloudFront мог читать бакет — это безопаснее публичного хостинга бакета.
Оценка стоимости
Статический хостинг S3 очень дешёвый: ~$0.023/GB за хранение и ~$0.0004 за 1000 запросов. Стоимость CloudFront зависит от региона и передачи данных, но на бесплатном тарифе первый 1 ТБ в месяц предоставляется бесплатно.
Быстрая проверка
Почему при размещении React SPA следует указать index.html в качестве документа ошибки S3?
Итоги
Соберите SPA, синхронизируйте его с S3 с раздельным кэшированием (долгий кэш для ресурсов с хешами, отсутствие кэша для index.html) и предоставляйте его через CloudFront. Исправьте маршрутизацию SPA, сопоставив ошибки 403 с /index.html. Автоматизируйте развёртывание с помощью GitHub Actions и очищайте кэш CloudFront при каждом развёртывании.
Часто задаваемые вопросы
Урок «Размещение React SPA в AWS S3 и CloudFront» бесплатный?
Да — полный текст урока «Размещение React SPA в AWS S3 и CloudFront» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Размещение React SPA в AWS S3 и CloudFront»?
Соберите приложение React, загрузите его в S3, настройте дистрибутив CloudFront и аннулирование кэша. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Размещение React SPA в AWS S3 и CloudFront»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Развёртывание в Vercel: нулевая настройка и предварительные URL
- Размещение React SPA в AWS S3 и CloudFront
- Контейнеризация приложения React/Next.js
- CI/CD React с GitHub Actions