В современной веб-разработке статические сайты (SSG) и одностраничные приложения (SPA) стали золотым стандартом благодаря своей производительности и безопасности. Однако процесс их развертывания часто вызывает вопросы: как правильно собрать фронтенд, настроить веб-сервер и, главное, как автоматизировать получение SSL-сертификатов?

В этой статье мы разберем надежную и современную архитектуру деплоя, объединив три мощных инструмента:Vite(сборщик),Docker(контейнеризация) иCaddy(веб-сервер). Такой стек позволяет забыть о ручной настройке Nginx и мучениях с Certbot, получая на выходе легковесный, безопасный и автоматически обновляемый сайт.

Почему именно этот стек?

Vite:Генерирует чистую статику (HTML, JS, CSS). Для работы сайта в продакшене Node.js не требуется, что критически снижает потребление ресурсов на сервере.

Docker:Позволяет создать изолированное окружение. Мы используеммногоступенчатую сборку(multi-stage build), чтобы в итоговом образе остался только веб-сервер и статика, а не гигабайты node_modules.

Caddy:Это веб-сервер нового поколения, написанный на Go. Его «киллер-фича» — автоматический HTTPS. Caddy сам получает и продлевает сертификаты Let's Encrypt через протокол ACME, требуя от вас лишь указать домен в конфиге.

Шаг 1. Конфигурация Caddy: Безопасность и автоматизация

В отличие от Nginx, конфигурация которого может занимать десятки строк для простого кейса, Caddyfile невероятно лаконичен. Мы настроим автоматическое перенаправление с HTTP на HTTPS, включим сжатие и зададим заголовки безопасности.

Создайте в корне проекта файл Caddyfile:

```

# Домен читается из переменных окружения (.env)

{$DOMAIN} {

# Автоматическая выдача SSL-сертификата на указанную почту

tls {$EMAIL}

# Корневая директория для статики внутри контейнера

# Путь /usr/share/caddy является стандартным для образа Caddy

root * /usr/share/caddy

# Запускаем файловый сервер, который сам определяет MIME-типы

file_server

# Включаем сжатие GZIP для экономии трафика

encode gzip

# Настройка кэширования статических ассетов (картинок, шрифтов, JS/CSS)

# immutable позволяет браузеру не переспрашивать файлы при жестком обновлении

header /assets/* Cache-Control: "public, max-age=31536000, immutable"

header /*.css Cache-Control: "public, max-age=31536000, immutable"

header /*.js Cache-Control: "public, max-age=31536000, immutable"

# Логика маршрутизации для SPA (Single Page Application):

# Если файл не найден, отдаем index.html (нужно для роутинга Vue/React)

try_files {path} {path}/ /index.html

# Блок безопасности: добавляем HTTP-заголовки защиты

header {

# HSTS: заставляем браузер всегда использовать HTTPS (на 2 года)

Strict-Transport-Security "max-age=63072000"

# Запрет на "угадывание" MIME-типа (защита от XSS)

X-Content-Type-Options "nosniff"

# Защита от кликджекинга (запрет встраивания сайта во фреймы)

X-Frame-Options "DENY"

# Защита от старых типов XSS-атак

X-XSS-Protection "1; mode=block"

}

}

```

Шаг 2. Многоступенчатая сборка Docker

Главная цель Dockerfile в этом сценарии — создать минимальный по размеру образ. Мы разделим процесс на два этапа:Builder(где крутится Node.js и собирается сайт) иRuntime(где работает только легкий Alpine Linux и Caddy).

Создайте файл Dockerfile:

```

# ==========================================

# ЭТАП 1: Сборка (Builder)

# ==========================================

FROM node:24-slim AS builder

WORKDIR /app

# Копируем только манифесты зависимостей.

# Это позволяет кэшировать слой npm ci в Docker.

COPY package*.json ./

# Используем npm ci вместо install для строгого соответствия package-lock

RUN npm ci

# Копируем исходники (в примере VitePress, папка docs) и запускаем билд

COPY docs ./docs

RUN npm run docs:build

# Результат сборки появится в /app/docs/.vitepress/dist

# ==========================================

# ЭТАП 2: Продакшен (Runtime)

# ==========================================

FROM alpine:3.23.5

# Устанавливаем Caddy. Флаг --no-cache экономит место на диске.

RUN apk add --no-cache caddy

# Копируем ТОЛЬКО собранные статические файлы из этапа builder

# Исходники, node_modules и исходный код проекта остаются за бортом!

COPY --from=builder /app/docs/.vitepress/dist /usr/share/caddy

# Копируем конфигурационный файл сервера

COPY Caddyfile /etc/caddy/Caddyfile

# Открываем стандартные порты для веба

EXPOSE 80 443

# Запускаем Caddy с указанием конфига и адаптера

CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"]

```

Шаг 3. Оркестрация через Docker Compose

Для удобного управления контейнером, сетями и томами (volumes) используем docker-compose. Это позволит легко запускать и останавливать сервис одной командой.

Создайте файл docker-compose.yml:

```

version: "3.8"

services:

caddy: