init

2025-09-16 15:43:36 +05:00
commit 111cc834dd
17 changed files with 2078 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,53 @@
+# Зависимости
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Сборка
+dist
+build
+
+# Логи
+*.log
+
+# Временные файлы
+.tmp
+.cache
+
+# IDE файлы
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS файлы
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Docker файлы
+Dockerfile*
+docker-compose*
+.dockerignore
+
+# Документация
+README.md
+*.md
+
+# Kubernetes файлы
+k8s/
+
+# Тестовые файлы
+coverage
+.nyc_output
+
+# Environment файлы
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,120 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Build outputs
+dist/
+build/
+out/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+
+# Gatsby files
+.cache/
+public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# Vite
+.vite/
+
+# TypeScript
+*.tsbuildinfo
+
+# Optional stylelint cache
+.stylelintcache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.gitignore.io/api/node
+
+
+
+
+
+
+
+
--- a/README.md
+++ b/README.md
@ -0,0 +1,64 @@
+# Demo SPA App
+
+Максимально простое React SPA приложение для демонстрации развертывания в Kubernetes с OAuth2 аутентификацией.
+
+## Особенности
+
+- ✅ Минимальный React приложение
+- ✅ Приветствие пользователя по имени
+- ✅ Контейнеризация с nginx
+- ✅ Принцип KISS - только необходимое
+
+## Локальная разработка
+
+```bash
+# Установка зависимостей
+npm install
+
+# Запуск в режиме разработки
+npm run dev
+
+# Сборка для продакшена
+npm run build
+```
+
+## Сборка Docker образа
+
+```bash
+# Сборка образа
+docker build -t demo-spa-app .
+
+# Запуск контейнера
+docker run -p 8080:80 demo-spa-app
+```
+
+Приложение будет доступно по адресу: http://localhost:8080
+
+## Структура проекта
+
+```
+demo-spa-app/
+├── src/
+│   ├── App.jsx          # Главный компонент с приветствием
+│   └── main.jsx         # Точка входа React
+├── Dockerfile           # Контейнеризация
+├── nginx.conf          # Конфигурация nginx
+├── package.json        # Зависимости
+└── vite.config.js      # Конфигурация Vite
+```
+
+## Технологии
+
+- **React 18** - UI библиотека
+- **Vite** - быстрая сборка
+- **nginx** - веб-сервер
+- **Docker** - контейнеризация
+
+
+
+
+
+
+
+
+
--- a/41
+++ b/41
@ -0,0 +1,41 @@
+# Многоэтапная сборка для минимального размера образа
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+# Копируем package.json и package-lock.json (если есть)
+COPY package*.json ./
+
+# Устанавливаем зависимости
+RUN npm ci
+
+# Копируем исходный код
+COPY . .
+
+# Собираем приложение
+RUN npm run build
+
+RUN npm prune --production
+
+# Финальный образ с nginx
+FROM nginx:alpine
+
+# Копируем собранное приложение
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Копируем конфигурацию nginx для SPA
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Открываем порт 80
+EXPOSE 80
+
+# Запускаем nginx
+CMD ["nginx", "-g", "daemon off;"]
+
+
+
+
+
+
+
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo SPA App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+
+
+
+
+
+
+
+
+
--- a/k8s/README.md
+++ b/k8s/README.md
@ -0,0 +1,104 @@
+# Kubernetes манифесты для Demo SPA App
+
+## Структура манифестов
+
+```
+k8s/
+├── namespace.yaml          # Namespace для приложения
+├── deployment.yaml         # React SPA приложение
+├── service.yaml           # Внутренний сервис
+├── dex-authenticator.yaml # DexAuthenticator для аутентификации
+├── ingress.yaml           # Внешний доступ с SSL
+└── kustomization.yaml     # Kustomize конфигурация
+```
+
+## Развертывание
+
+### 1. Подготовка образа
+
+```bash
+# Сборка образа
+docker build -t demo-spa-app:latest .
+
+# Размещение в registry (замените на ваш registry)
+docker tag demo-spa-app:latest your-registry.com/demo-spa-app:latest
+docker push your-registry.com/demo-spa-app:latest
+```
+
+### 2. Настройка конфигурации
+
+Перед развертыванием обновите следующие параметры:
+
+- **Домен**: `demo-spa.example.com` → ваш домен
+- **SSL сертификат**: убедитесь что cert-manager настроен
+- **Dex**: должен быть развернут в кластере (обычно в namespace `d8-user-authn`)
+
+### 3. Развертывание в Kubernetes
+
+```bash
+# Применение всех манифестов
+kubectl apply -k k8s/
+
+# Или по отдельности
+kubectl apply -f k8s/namespace.yaml
+kubectl apply -f k8s/deployment.yaml
+kubectl apply -f k8s/service.yaml
+kubectl apply -f k8s/dex-authenticator.yaml
+kubectl apply -f k8s/ingress.yaml
+```
+
+### 4. Проверка развертывания
+
+```bash
+# Проверка подов
+kubectl get pods -n demo-spa
+
+# Проверка сервисов
+kubectl get svc -n demo-spa
+
+# Проверка ingress
+kubectl get ingress -n demo-spa
+
+# Логи приложения
+kubectl logs -f deployment/demo-spa-app -n demo-spa
+
+# Логи DexAuthenticator
+kubectl logs -f deployment/demo-spa-auth -n demo-spa
+```
+
+## Конфигурация DexAuthenticator
+
+### Настройка Dex
+
+DexAuthenticator автоматически интегрируется с Dex, развернутым в кластере. Дополнительная настройка OAuth2 клиентов не требуется - Deckhouse управляет этим автоматически.
+
+### Основные параметры DexAuthenticator
+
+- **applicationDomain**: домен вашего приложения
+- **sendAuthorizationHeader**: отправка заголовков авторизации в приложение
+- **keepUsersLoggedInFor**: время жизни сессии (по умолчанию 24h)
+- **allowedGroups**: список разрешенных групп (пустой = все группы)
+- **cookieConfig**: настройки безопасности куки
+
+## Архитектура
+
+```
+Internet → Ingress → DexAuthenticator → React SPA
+                ↓
+            Dex (аутентификация)
+```
+
+- **Ingress**: Внешний доступ с SSL
+- **DexAuthenticator**: Нативная аутентификация через Dex
+- **React SPA**: Основное приложение
+- **Dex**: OIDC провайдер
+
+## Мониторинг
+
+```bash
+# Проверка health check
+curl https://demo-spa.example.com/health
+
+# Проверка аутентификации
+curl -I https://demo-spa.example.com/
+```
--- a/k8s/deployment.yaml
+++ b/k8s/deployment.yaml
@ -0,0 +1,53 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: demo-spa-app
+  namespace: demo-spa
+  labels:
+    app: demo-spa-app
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: demo-spa-app
+  template:
+    metadata:
+      labels:
+        app: demo-spa-app
+    spec:
+      containers:
+      - name: demo-spa-app
+        image: demo-spa-app:latest
+        imagePullPolicy: Never
+        ports:
+        - containerPort: 80
+        resources:
+          requests:
+            memory: "64Mi"
+            cpu: "50m"
+          limits:
+            memory: "128Mi"
+            cpu: "100m"
+        livenessProbe:
+          httpGet:
+            path: /health
+            port: 80
+          initialDelaySeconds: 30
+          periodSeconds: 10
+        readinessProbe:
+          httpGet:
+            path: /health
+            port: 80
+          initialDelaySeconds: 5
+          periodSeconds: 5
+        env:
+        - name: NODE_ENV
+          value: "production"
+
+
+
+
+
+
+
+
--- a/k8s/dex-authenticator.yaml
+++ b/k8s/dex-authenticator.yaml
@ -0,0 +1,22 @@
+apiVersion: deckhouse.io/v1
+kind: DexAuthenticator
+metadata:
+  name: demo-spa-auth
+  namespace: demo-spa
+spec:
+  # Домен приложения
+  applicationDomain: "demo-spa.127.0.0.1.sslip.io"
+  
+  # Отправка заголовков авторизации
+  sendAuthorizationHeader: true
+  
+  # SSL сертификат
+  applicationIngressCertificateSecretName: ingress-tls
+  applicationIngressClassName: nginx
+  
+  # Время жизни сессии
+  keepUsersLoggedInFor: "720h"  # 30 дней
+  
+  # Разрешенные группы (пустой массив = все группы)
+  allowedGroups: []
+  
--- a/k8s/ingress.yaml
+++ b/k8s/ingress.yaml
@ -0,0 +1,27 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: demo-spa-ingress
+  namespace: demo-spa
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: "https://demo-spa.127.0.0.1.sslip.io/dex-authenticator/auth"
+    nginx.ingress.kubernetes.io/auth-signin: "http://demo-spa.127.0.0.1.sslip.io/dex-authenticator/sign_in"
+    nginx.ingress.kubernetes.io/auth-response-headers: "X-Auth-Request-User,X-Auth-Request-Email,X-Auth-Request-Groups"
+
+spec:
+  ingressClassName: nginx
+  tls:
+  - hosts:
+    - demo-spa.127.0.0.1.sslip.io
+    secretName: demo-spa-tls
+  rules:
+  - host: demo-spa.127.0.0.1.sslip.io
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: demo-spa-service
+            port:
+              number: 80
--- a/k8s/namespace.yaml
+++ b/k8s/namespace.yaml
@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: demo-spa
+  labels:
+    name: demo-spa
+
+
+
+
+
+
+
+
+
--- a/k8s/service.yaml
+++ b/k8s/service.yaml
@ -0,0 +1,25 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: demo-spa-service
+  namespace: demo-spa
+  labels:
+    app: demo-spa-app
+spec:
+  selector:
+    app: demo-spa-app
+  ports:
+  - name: http
+    port: 80
+    targetPort: 80
+    protocol: TCP
+  type: ClusterIP
+
+
+
+
+
+
+
+
+
--- a/nginx.conf
+++ b/nginx.conf
@ -0,0 +1,48 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Сжатие для лучшей производительности
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    # Кэширование статических ресурсов
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Для SPA - все маршруты направляем на index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+        
+        # Заголовки безопасности
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+    }
+
+    # API endpoint для получения информации о пользователе
+    location /api/user {
+        # В реальном приложении здесь будет проксирование к backend
+        # Для демо возвращаем информацию из заголовков OAuth2 proxy
+        add_header Content-Type application/json;
+        return 200 '{"name": "Демо Пользователь", "email": "demo@example.com"}';
+    }
+
+    # Health check endpoint
+    location /health {
+        add_header Content-Type application/json;
+        return 200 '{"status": "ok"}';
+    }
+}
+
+
+
+
+
+
+
+
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,29 @@
+{
+  "name": "demo-spa-app",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^4.4.0"
+  }
+}
+
+
+
+
+
+
+
+
+
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react'
+
+function App() {
+  const [userName, setUserName] = useState('Гость')
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // Получаем имя пользователя из заголовков (OAuth2 proxy передает)
+    const getUserInfo = async () => {
+      try {
+        // В реальном приложении OAuth2 proxy передает информацию в заголовках
+        // Для демо используем заголовок X-Forwarded-User или X-Remote-User
+        const response = await fetch('/api/user', {
+          headers: {
+            'Accept': 'application/json'
+          }
+        })
+        
+        if (response.ok) {
+          const userData = await response.json()
+          setUserName(userData.name || userData.email || 'Пользователь')
+        }
+      } catch (error) {
+        console.log('Не удалось получить информацию о пользователе:', error)
+        // Fallback - используем заголовки напрямую
+        const remoteUser = document.cookie
+          .split('; ')
+          .find(row => row.startsWith('X-Remote-User='))
+          ?.split('=')[1]
+        
+        if (remoteUser) {
+          setUserName(decodeURIComponent(remoteUser))
+        }
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    getUserInfo()
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.loading}>Загрузка...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <h1 style={styles.title}>🎉 Добро пожаловать!</h1>
+        <p style={styles.greeting}>
+          Привет, <strong>{userName}</strong>!
+        </p>
+        <p style={styles.description}>
+          Это простое SPA приложение, развернутое в Kubernetes с аутентификацией через OAuth2.
+        </p>
+        <div style={styles.info}>
+          <p>✅ Аутентификация через OAuth2 Proxy</p>
+          <p>✅ Развертывание в Kubernetes</p>
+          <p>✅ Принцип KISS</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const styles = {
+  container: {
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f5f5f5',
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+    margin: 0,
+    padding: '20px'
+  },
+  card: {
+    backgroundColor: 'white',
+    borderRadius: '12px',
+    padding: '40px',
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    textAlign: 'center',
+    maxWidth: '500px',
+    width: '100%'
+  },
+  title: {
+    color: '#333',
+    marginBottom: '20px',
+    fontSize: '2.5rem'
+  },
+  greeting: {
+    fontSize: '1.5rem',
+    color: '#666',
+    marginBottom: '20px'
+  },
+  description: {
+    color: '#888',
+    lineHeight: '1.6',
+    marginBottom: '30px'
+  },
+  info: {
+    backgroundColor: '#f8f9fa',
+    borderRadius: '8px',
+    padding: '20px',
+    textAlign: 'left'
+  },
+  loading: {
+    fontSize: '1.2rem',
+    color: '#666'
+  }
+}
+
+export default App
+
+
+
+
+
+
+
+
+
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,18 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+
+
+
+
+
+
+
+
+
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets'
+  }
+})
+
+
+
+
+
+
+
+
+