Развёртывание фронтенд-приложения, собранного с использованием Vite, в инфраструктуре AWS обычно опирается на связку S3 + CloudFront, где S3 используется как статическое хранилище артефактов сборки, а CloudFront выполняет роль CDN с кэшированием, TLS и глобальной доставкой контента.
Ключевая особенность Vite — генерация полностью статических файлов после команды сборки, что делает его идеально совместимым с объектным хранилищем.
После выполнения команды:
npm run buildVite формирует директорию dist/, содержащую:
index.html — точка входа приложенияassets/*.js)Важный аспект: все зависимости оптимизированы и разбиты на чанки, что позволяет эффективно использовать CDN-кэширование.
При размещении приложения не в корне домена необходимо задать
параметр base в конфигурации Vite:
// vite.config.js
export default {
base: '/',
}Для размещения в поддиректории:
export default {
base: '/app/',
}Этот параметр влияет на генерацию ссылок на ассеты в
index.html и внутри бандлов.
npm run buildРезультат:
dist/
├── index.html
├── assets/
│ ├── index-[hash].js
│ ├── vendor-[hash].js
│ └── index-[hash].cssДиректория dist является единственным артефактом
деплоя.
В AWS S3 создаётся bucket с уникальным именем, например:
my-vite-app-prodНастройки bucket:
Загрузка содержимого dist/:
aws s3 sync dist/ s3://my-vite-app-prod --deleteПараметр --delete синхронизирует bucket с локальной
сборкой, удаляя устаревшие файлы.
При использовании SPA (React/Vue/Svelte на Vite) необходимо учитывать маршрутизацию:
/dashboard или /profile должен
возвращать index.htmlРешения:
Настройка:
index.htmlindex.htmlЭто позволяет SPA-роутеру корректно обрабатывать маршруты.
CloudFront добавляет:
Основные настройки:
index.htmlДля корректной работы SPA необходимо обработать 404 и редирект на
index.html.
Используется Custom error responses:
/index.htmlЭто гарантирует корректную работу маршрутов Vite-приложения.
Vite автоматически добавляет hash в имена файлов:
app.8d31c1.js
vendor.3f9a21.jsЭто позволяет:
Для CloudFront рекомендуется:
index.htmlCache-Control: no-cacheassets/*Cache-Control: public, max-age=31536000, immutableТакое разделение обеспечивает:
После деплоя необходимо обновить CDN-кэш:
aws cloudfront create-invalidation \
--distribution-id ABCD1234 \
--paths "/*"Более оптимально:
--paths "/index.html"Поскольку хешированные файлы не требуют инвалидции.
Vite использует префикс VITE_:
VITE_API_URL=https://api.example.comДоступ в коде:
import.meta.env.VITE_API_URLОсобенность:
Типовой pipeline включает:
npm ci
npm run buildaws s3 sync dist/ s3://my-vite-app-prod --deleteaws cloudfront create-invalidation \
--distribution-id $DISTRIBUTION_ID \
--paths "/index.html"name: Deploy Vite to S3
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run build
- run: aws s3 sync dist/ s3://my-vite-app-prod --delete
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: us-east-1
- run: |
aws cloudfront create-invalidation \
--distribution-id ${{ secrets.CLOUDFRONT_ID }} \
--paths "/index.html"CloudFront поддерживает автоматическую компрессию, однако важно:
Vite может генерировать:
modulepreload для чанковCloudFront эффективно распределяет такие запросы благодаря HTTP/2 и HTTP/3.
CDN позволяет:
Причины:
baseindex.htmlПричина:
Причина:
Причина:
Access-Control-Allow-OriginРекомендуемая схема:
Это исключает прямой доступ к файлам S3.
CloudFront использует:
Дополнительно возможно:
При росте проекта добавляются:
Структура:
s3://app-prod
s3://app-stage
s3://app-devили через один bucket с префиксами:
/prod/
/stage/
/dev/Конфигурация:
vite build --mode production
vite build --mode stagingФайлы:
.env.production
.env.stagingСвязка обеспечивает: