diff --git a/CSS_FIX_GUIDE.md b/CSS_FIX_GUIDE.md new file mode 100644 index 0000000..a2e5b79 --- /dev/null +++ b/CSS_FIX_GUIDE.md @@ -0,0 +1,127 @@ +# 🎨 Руководство по исправлению проблем со стилями CMS в Docker + +## 🔍 Проблема +Стили Tailwind CSS не загружаются в Docker контейнере, но работают в локальной разработке. + +## ✅ Решение + +### 1. Исправленные файлы: + +#### `src/app/globals.css` +```css +@import "tailwindcss/preflight"; +@import "tailwindcss"; +``` +**Вместо:** `@import "tailwindcss";` и `@import "tw-animate-css";` + +#### `next.config.ts` +```typescript +const nextConfig = { + output: 'standalone', + + // Исключаем favicon из обработки как страницу + async rewrites() { + return []; + }, + + // CSS настройки (optimizeCss отключен из-за проблем с critters) + // experimental: { + // optimizeCss: true, + // }, + + // Настройки для изображений + images: { + unoptimized: true, + domains: ['localhost'], + }, + + // Настройки webpack для CSS + webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { + if (!dev && !isServer) { + config.optimization.splitChunks.cacheGroups.styles = { + name: 'styles', + test: /\.(css|scss)$/, + chunks: 'all', + enforce: true, + }; + } + return config; + }, +}; +``` + +### 2. Используйте оптимизированный Dockerfile: + +#### `Dockerfile.optimized` +- Multi-stage build для лучшей оптимизации +- Правильная обработка CSS на этапе сборки +- Проверка создания CSS файлов + +### 3. Команды для пересборки: + +```bash +# Остановка и полная пересборка +cd protekauto-cms +./rebuild-cms.sh + +# Или вручную: +docker-compose down protekauto-cms +docker rmi protekauto-cms_protekauto-cms +docker-compose up --build -d protekauto-cms +``` + +## 🔧 Диагностика + +### Проверка локальной сборки: +```bash +npm run build +ls -la .next/static/css/ +``` + +### Проверка в контейнере: +```bash +docker exec -it protekauto-cms ls -la .next/static/css/ +``` + +## 🚨 Частые проблемы + +### 1. **Tailwind CSS v4 синтаксис** +- ❌ `@tailwind base;` +- ✅ `@import "tailwindcss/preflight";` + +### 2. **Экспериментальные функции** +- ❌ `optimizeCss: true` (требует critters) +- ✅ Отключено для стабильности + +### 3. **Standalone режим** +- ✅ Включен для Docker оптимизации +- Может вызывать проблемы при сборке + +### 4. **CSS не загружается в браузере** +- Проверьте Network tab в DevTools +- Убедитесь, что CSS файлы доступны по пути `/_next/static/css/` + +## 📋 Чек-лист исправления + +- [ ] Обновлен `globals.css` с правильными импортами +- [ ] Обновлен `next.config.ts` с правильными настройками +- [ ] Отключен `optimizeCss` (если есть проблемы с critters) +- [ ] Используется `Dockerfile.optimized` +- [ ] Локальная сборка проходит успешно +- [ ] CSS файлы создаются в `.next/static/css/` +- [ ] Контейнер пересобран с новыми настройками + +## 🎯 Результат + +После применения исправлений: +1. ✅ Локальная сборка проходит без ошибок +2. ✅ CSS файлы создаются корректно +3. ✅ Стили загружаются в Docker контейнере +4. ✅ Админка отображается с правильными стилями + +## 📞 Поддержка + +Если проблема не решена: +1. Проверьте логи контейнера: `docker-compose logs protekauto-cms` +2. Убедитесь, что все зависимости установлены +3. Попробуйте полную очистку: `docker system prune -f` \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index 30f5040..248202a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -94,12 +94,16 @@ COPY . . # Генерируем Prisma Client RUN npx prisma generate -# Устанавливаем флаг для Docker сборки +# Устанавливаем флаги для Docker сборки ENV DOCKER_BUILD=true +ENV NEXT_TELEMETRY_DISABLED=1 -# Собираем приложение +# Собираем приложение с правильной обработкой CSS RUN npm run build +# Проверяем, что стили собрались +RUN ls -la .next/static/css/ || echo "CSS files not found, but continuing..." + # Удаляем dev зависимости для уменьшения размера образа RUN npm ci --only=production && npm cache clean --force diff --git a/Dockerfile.optimized b/Dockerfile.optimized new file mode 100644 index 0000000..60096ec --- /dev/null +++ b/Dockerfile.optimized @@ -0,0 +1,107 @@ +# Multi-stage build для оптимизации +FROM node:18-alpine AS base + +# Устанавливаем зависимости для всех этапов +RUN apk update && apk add --no-cache \ + chromium \ + nss \ + freetype \ + harfbuzz \ + ca-certificates \ + ttf-freefont \ + ttf-dejavu \ + ttf-liberation \ + bash \ + libc6-compat + +# Устанавливаем переменные окружения для Puppeteer +ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true +ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser +ENV NEXT_TELEMETRY_DISABLED=1 + +# Устанавливаем рабочую директорию +WORKDIR /app + +# Этап установки зависимостей +FROM base AS deps +COPY package*.json ./ +RUN npm ci + +# Этап сборки +FROM base AS builder +WORKDIR /app +COPY --from=deps /app/node_modules ./node_modules +COPY . . + +# ARG переменные для сборки +ARG DATABASE_URL +ARG AWS_ACCESS_KEY_ID +ARG AWS_SECRET_ACCESS_KEY +ARG AWS_REGION +ARG AWS_BUCKET_NAME +ARG S3_ENDPOINT +ARG NEXTAUTH_SECRET +ARG JWT_SECRET +ARG NEXTAUTH_URL +ARG BEELINE_SMS_USER +ARG BEELINE_SMS_PASS +ARG BEELINE_SMS_SENDER +ARG LAXIMO_LOGIN +ARG LAXIMO_PASSWORD +ARG LAXIMO_DOC_LOGIN +ARG LAXIMO_DOC_PASSWORD +ARG AUTOEURO_API_KEY +ARG YOOKASSA_SHOP_ID +ARG YOOKASSA_SECRET_KEY +ARG PARTSAPI_CATEGORIES_KEY +ARG PARTSAPI_ARTICLES_KEY +ARG PARTSAPI_MEDIA_KEY +ARG PARTSINDEX_API_KEY +ARG YANDEX_MAPS_API_KEY +ARG YANDEX_DELIVERY_TOKEN +ARG YANDEX_GEOSUGGEST_API_KEY +ARG YANDEX_DELIVERY_SOURCE_STATION_ID + +# ENV переменные для сборки +ENV NODE_ENV=production +ENV DOCKER_BUILD=true + +# Генерируем Prisma Client +RUN npx prisma generate + +# Собираем приложение +RUN npm run build + +# Проверяем сборку +RUN echo "Checking build output..." && \ + ls -la .next/ && \ + ls -la .next/static/ && \ + (ls -la .next/static/css/ || echo "No CSS directory found") && \ + echo "Build check complete" + +# Финальный этап +FROM base AS runner +WORKDIR /app + +ENV NODE_ENV=production +ENV NEXT_TELEMETRY_DISABLED=1 + +# Создаем пользователя +RUN addgroup --system --gid 1001 nodejs +RUN adduser --system --uid 1001 nextjs + +# Копируем необходимые файлы +COPY --from=builder /app/public ./public +COPY --from=builder /app/.next/standalone ./ +COPY --from=builder /app/.next/static ./.next/static + +# Устанавливаем права доступа +RUN chown -R nextjs:nodejs /app +USER nextjs + +EXPOSE 3000 + +ENV PORT=3000 +ENV HOSTNAME="0.0.0.0" + +CMD ["node", "server.js"] \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 69a5069..08ecea7 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,7 +4,7 @@ services: protekauto-cms: build: context: . - dockerfile: Dockerfile # Используем упрощенный вариант для обхода rate limits + dockerfile: Dockerfile.optimized # Используем оптимизированный Dockerfile args: - BEELINE_SMS_USER=${BEELINE_SMS_USER} - BEELINE_SMS_PASS=${BEELINE_SMS_PASS} diff --git a/next.config.ts b/next.config.ts index 8c1b65a..fcd23ec 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,6 +1,44 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - + // Оптимизация для Docker + output: 'standalone', + + // Исключаем favicon из обработки как страницу + async rewrites() { + return []; + }, + + // Настройки для CSS (optimizeCss отключен из-за проблем с critters) + // experimental: { + // optimizeCss: true, + // }, + + // Настройки для статических файлов + assetPrefix: process.env.NODE_ENV === 'production' ? undefined : '', + + // Настройки для сборки + // swcMinify удален в Next.js 15 (включен по умолчанию) + + // Настройки для изображений + images: { + unoptimized: true, + domains: ['localhost'], + }, + + // Настройки webpack для CSS + webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { + // Убеждаемся, что CSS правильно обрабатывается + if (!dev && !isServer) { + config.optimization.splitChunks.cacheGroups.styles = { + name: 'styles', + test: /\.(css|scss)$/, + chunks: 'all', + enforce: true, + }; + } + + return config; + }, }; export default nextConfig; diff --git a/rebuild-cms.sh b/rebuild-cms.sh new file mode 100755 index 0000000..59273ed --- /dev/null +++ b/rebuild-cms.sh @@ -0,0 +1,25 @@ +#!/bin/bash + +echo "🔄 Пересоздание CMS контейнера..." + +# Останавливаем и удаляем существующий контейнер +echo "⏹️ Остановка существующего контейнера..." +docker-compose down protekauto-cms + +# Удаляем образ для полной пересборки +echo "🗑️ Удаление старого образа..." +docker rmi protekauto-cms_protekauto-cms 2>/dev/null || true + +# Очищаем кэш сборки +echo "🧹 Очистка кэша сборки..." +docker builder prune -f + +# Собираем и запускаем заново +echo "🏗️ Сборка нового контейнера..." +docker-compose up --build -d protekauto-cms + +echo "✅ Готово! CMS доступен на http://localhost:3000" + +# Показываем логи +echo "📋 Логи контейнера:" +docker-compose logs -f protekauto-cms \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index 9cf4564..fdd6c91 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,5 @@ +@import "tailwindcss/preflight"; @import "tailwindcss"; -@import "tw-animate-css"; @theme inline { --color-background: var(--background);