Браузерная версия на собственном сервере

Вы можете развернуть браузерную версию на собственном сервере, если по требованиям безопасности не можете использовать app.gram.ax. Например, если в вашей компании запрещено использование CORS-прокси поставщика ПО.

Запуск

1. Скачайте готовый файл командой curl -LO https://gram.ax/editor-docker-compose.yaml.

   Подробнее

   version: "3.8"
   
   services:
     editor:
       image: docker.io/gramax/editor:latest
       container_name: editor
       restart: unless-stopped
       ports:
         - ${PORT:-3000}:80
       environment:
         - GIT_PROXY_SERVICE_URL=${GIT_PROXY_SERVICE_URL:-http://localhost:3001}
   
     git-proxy:
       image: docker.io/gramax/git-proxy:latest
       container_name: git_proxy
       restart: unless-stopped
       ports:
         - ${GIT_PROXY_PORT:-3001}:80
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-}

2. Задайте переменные среды:

   1. PORT — порт, по которому будет доступен Gramax editor. Если не указан, используется порт 3000.

   2. GIT_PROXY_SERVICE_URL — URL, по которому редактор обращается к сервису Git Proxy. По умолчанию используется http://localhost:3001.

   3. GIT_PROXY_PORT — порт для сервиса Git Proxy. Если не указан, используется 3001.

   4. ALLOWED_GRAMAX_URLS — список доменов, которым разрешено отправлять запросы через Git Proxy (указывается через запятую). Подключение с localhost всегда разрешено.

Доступ с других устройств

Чтобы браузерная версия была доступна другим сотрудникам в локальной сети, нужно использовать HTTPS.

Настройка HTTPS

1. Создайте конфигурационный файл для OpenSSL (например, openssl.cnf) со следующим содержимым:

   [req]
   distinguished_name = dn
   x509_extensions = ext
   prompt = no
   
   [dn]
   CN = editor.local
   
   [ext]
   subjectAltName = @alt_names
   
   [alt_names]
   DNS.1 = editor.local   # Домен для редактора
   DNS.2 = gitproxy.local # Домен для Git Proxy

2. Сгенерируйте самоподписанный сертификат следующей командой:

   mkdir -p certs
   
   openssl req -x509 -nodes -days 365 \
     -newkey rsa:2048 \
     -keyout certs/private.key \
     -out certs/certificate.crt \
     -config openssl.cnf

   В результате файлы сертификата и ключа будут сохранены в папке certs/.

3. Дополните docker-compose.yaml, добавив Caddy и настройки HTTPS. Не забудьте заменить домены из примера на свои:

   version: "3.8"
   
   services:
     caddy:
       image: caddy:latest
       container_name: caddy
       ports:
         - "80:80"
         - "443:443"
       volumes:
         - ./certs:/certs
       restart: unless-stopped
       configs:
         - source: caddy_config
           target: /etc/caddy/Caddyfile
   
     editor:
       image: docker.io/gramax/editor:latest
       restart: unless-stopped
       container_name: editor
       environment:
         - GIT_PROXY_SERVICE_URL=${GIT_PROXY_SERVICE_URL:-https://gitproxy.local}
   
     git-proxy:
       image: docker.io/gramax/git-proxy:latest
       container_name: git_proxy
       restart: unless-stopped
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-https://editor.local}
   
   configs:
     caddy_config:
       content: |
         editor.local {
           reverse_proxy editor:80
           tls /certs/certificate.crt /certs/private.key
         }
         gitproxy.local {
           reverse_proxy git-proxy:80
           tls /certs/certificate.crt /certs/private.key
         }

4. Настройте локальный DNS-сервер или роутер так, чтобы домены editor.local и gitproxy.local разрешались в IP-адрес сервера, где развернуты сервисы редактора и git-proxy.

5. Запустите контейнеры:

   docker-compose up -d

6. Откройте в браузере:

   https://editor.local

   При первом открытии браузер может предупредить о самоподписанном сертификате.
   Вы можете либо:

   • Временно подтвердить исключение в браузере.

   • Установить сертификат certificate.crt в доверенные корневые центры сертификации вашей системы, чтобы избежать предупреждений в будущем.

Поддержка диаграмм Draw.io и PlantUML

Если хотите, чтобы диаграммы формировались на вашем собственном сервере, необходимо выполнить следующие шаги:

1. Добавьте сервис gramax/diagram-renderer:latest в docker-compose.yaml.

2. Укажите переменную окружения DIAGRAM_RENDERER_SERVICE_URL в блоке editor.

   DIAGRAM_RENDERER_SERVICE_URL — это URL, по которому доступен сервис gramax/diagram-renderer:latest.

3. Укажите переменную ALLOWED_GRAMAX_URLS в блоке diagram-renderer.

   ALLOWED_GRAMAX_URLS — это URL браузерного редактора gramax/editor:latest, обращающегося к сервису диаграмм.

4. Ниже — пример расширенного фрагмента docker-compose.yaml с поддержкой диаграмм и HTTPS:

   version: "3.8"
   
   services:
     caddy:
       image: caddy:latest
       container_name: caddy
       ports:
         - "80:80"
         - "443:443"
       volumes:
         - ./certs:/certs
       restart: unless-stopped
       configs:
         - source: caddy_config
           target: /etc/caddy/Caddyfile
   
     editor:
       image: docker.io/gramax/editor:latest
       restart: unless-stopped
       container_name: editor
       environment:
         - GIT_PROXY_SERVICE_URL=${GIT_PROXY_SERVICE_URL:-https://services.local}
         - DIAGRAM_RENDERER_SERVICE_URL=${DIAGRAM_RENDERER_SERVICE_URL:-https://services.local/diagram-renderer}
   
     git-proxy:
       image: docker.io/gramax/git-proxy:latest
       container_name: git_proxy
       restart: unless-stopped
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-https://editor.local}
   
     diagram-renderer:
       image: docker.io/gramax/diagram-renderer:latest
       container_name: diagram-renderer
       restart: unless-stopped
       environment:
         - ALLOWED_GRAMAX_URLS=${ALLOWED_GRAMAX_URLS:-https://editor.local}
   
   configs:
     caddy_config:
       content: |
         editor.local {
           reverse_proxy editor:80
           tls /certs/certificate.crt /certs/private.key
         }
         services.local {
           handle_path /* {
             reverse_proxy git-proxy:80
           }
           handle_path /diagram-renderer/* {
             reverse_proxy diagram-renderer:8080
           }
           tls /certs/certificate.crt /certs/private.key
         }