Обновлен docker-compose.yml для использования оптимизированного Dockerfile. Внесены изменения в Dockerfile для улучшения сборки приложения и проверки наличия CSS файлов. Обновлены настройки в next.config.ts для оптимизации работы с CSS и изображениями. Изменен импорт стилей в globals.css для улучшения структуры.

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` 

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
 

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"] 

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}

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;

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 

src/app/globals.css

@@ -1,5 +1,5 @@
+@import "tailwindcss/preflight";
 @import "tailwindcss";
-@import "tw-animate-css";
 
 @theme inline {
   --color-background: var(--background);