Кастомизация Homarr: создание персонального cockpit для вашего homelab

Узнайте, как превратить Homarr в идеальный дашборд для вашего self-hosting. Пошаговое руководство по настройке, кастомизации и интеграции для создания персонального cockpit, который упростит управление всеми вашими сервисами.

Не указано

Установка Homarr

Подготовка окружения и запуск Homarr через Docker

# Проверка установки Docker
docker --version
docker-compose --version

# Создание директорий для Homarr
mkdir homarr
cd homarr
mkdir data

# Создание docker-compose.yml
cat > docker-compose.yml << EOF
version: "3"
services:
  homarr:
    image: ghcr.io/ajnart/homarr:latest
    container_name: homarr
    restart: always
    volumes:
      - ./data:/app/data
    ports:
      - 7575:7575
    environment:
      - TZ=Europe/Moscow
EOF

# Запуск Homarr
docker-compose up -d

Базовая конфигурация

Настройка основных параметров Homarr после первого запуска

# Создание пользователя и настройка параметров
# 1. При первом доступе создать аккаунт администратора
# 2. Настроить имя пользователя и пароль
# 3. Выбрать тему оформления
# 4. Настроить общие параметры панели в разделе Настройки > Общие параметры

Добавление сервисов

Добавление и настройка сервисов в Homarr

# Пример конфигурации для Portainer
{
  "name": "Portainer",
  "url": "http://portainer:9000",
  "icon": "mdi:docker",
  "type": "docker",
  "docker": {
    "container": "portainer",
    "image": "portainer/portainer-ce"
  }
}

# Пример конфигурации для системных метрик
{
  "name": "Системные метрики",
  "url": "",
  "icon": "mdi:gauge-full",
  "type": "system",
  "system": {
    "cpu": true,
    "memory": true,
    "disk": true,
    "network": true
  }
}

Кастомизация интерфейса

Изменение темы и создание кастомных виджетов

# Пример кастомного виджета на React/TypeScript
import React, { useEffect, useState } from 'react';
import { Widget } from '@homarr/widget';

interface MyCustomWidgetProps {
  title: string;
  data?: any;
}

export const MyCustomWidget: React.FC<MyCustomWidgetProps> = ({ title, data }) => {
  const [widgetData, setWidgetData] = useState<any>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setWidgetData(result);
      } catch (error) {
        console.error('Error fetching widget data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <Widget title={title}>
      <div>
        {widgetData ? (
          <div>
            <p>Значение: {widgetData.value}</p>
            <p>Статус: {widgetData.status}</p>
          </div>
        ) : (
          <p>Загрузка данных...</p>
        )}
      </div>
    </Widget>
  );
};

Расширенные настройки

Настройка SSL/TLS, ограничение доступа по IP и резервное копирование

# Настройка SSL через Nginx
server {
    listen 443 ssl http2;
    server_name homarr.yourdomain.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    location / {
        proxy_pass http://localhost:7575;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# Ограничение доступа по IP
allow 192.168.1.0/24;
allow 10.0.0.1;
deny all;

# Резервное копирование
tar -czf homarr-backup.tar.gz ./data

Интеграции и плагины

Интеграция с Docker, API сервисов и создание собственных интеграций

# Конфигурация интеграции Docker
{
  "docker": {
    "enabled": true,
    "refreshInterval": 5000,
    "showAllContainers": false,
    "onlyRunning": true
  }
}

# Пример кастомной интеграции
class MyIntegration extends Integration {
  async fetchData(): Promise<MyIntegrationData> {
    const client = new HttpClient(this.config.baseUrl, {
      headers: {
        'Authorization': `Bearer ${this.config.apiKey}`
      }
    });

    try {
      const response = await client.get('/status');
      const data = await response.json();
      
      return {
        status: 'online',
        value: data.value,
        lastUpdated: new Date()
      };
    } catch (error) {
      return {
        status: 'offline',
        value: 0,
        lastUpdated: new Date()
      };
    }
  }
}

Оптимизация производительности

Настройка ресурсов Docker, кэширование и оптимизация базы данных

# Ограничение ресурсов Docker
deploy:
  resources:
    limits:
      cpus: '1.0'
      memory: 1G
    reservations:
      cpus: '0.5'
      memory: 512M

# Настройка PostgreSQL для больших развертываний
services:
  postgres:
    image: postgres:14
    environment:
      POSTGRES_USER: homarr
      POSTGRES_PASSWORD: yourpassword
      POSTGRES_DB: homarr
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "5432:5432"

  homarr:
    image: ghcr.io/ajnart/homarr:latest
    environment:
      - DATABASE_URL=postgresql://homarr:yourpassword@postgres:5432/homarr
    depends_on:
      - postgres

volumes:
  postgres_data: