Vue, Docker и Nginx: собрать и запустить статическое приложение

Vue-приложение после сборки можно отдавать обычным HTTP-сервером. Docker упаковывает результат, а Nginx обслуживает файлы. Это не делает API, базу или авторизацию автоматически отказоустойчивыми.

Создание и сборка

npm create vue@latest
# Перейдите в созданный проект и установите зависимости:
npm install
npm run build

Используйте поддерживаемую Node-версию и требования генератора. В типовом проекте Vite результат находится в dist; проверьте его, а не предполагайте, что npm install создал production-файлы.

Упаковка результата

FROM nginx:stable-alpine
COPY dist/ /usr/share/nginx/html/
EXPOSE 80

docker build -t vue-demo .
docker run --rm -p 127.0.0.1:8080:80 vue-demo

Это учебный локальный запуск. Для воспроизводимой production-сборки фиксируйте выбранную версию/дайджест base image и зависимости, предусмотрите TLS и health-проверку.

Маршруты и статика

Если используется Vue Router history mode, прямой переход на клиентский маршрут требует корректного fallback к index.html. При этом не возвращайте HTML вместо отсутствующего JS/CSS. Настройте API-маршруты отдельно: fallback не должен скрывать ошибку backend.

Проверьте главную, обновление вложенного URL, отсутствие ресурса, cache headers и URL API. Client-side environment variables попадают в публичную сборку: в них нельзя хранить секреты.

Нагрузка

Добавлять replicas статики имеет смысл вместе с балансировкой и измерениями. Состояние пользователя и ограничения backend требуют отдельного проекта. Одного docker run недостаточно, чтобы обещать высокую пропускную способность.