492 lines
26 KiB
HTML
492 lines
26 KiB
HTML
<div class="row">
|
|
<div class="col-lg-8">
|
|
<!-- Deployment Overview -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-3">Deployment Architecture</h5>
|
|
<p class="text-muted lead">
|
|
DocuPulse is designed for containerized deployment using Docker and Docker Compose, providing a scalable,
|
|
production-ready infrastructure. The system supports both single-instance deployments and multi-tenant
|
|
orchestration with automated provisioning and health monitoring.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Docker Architecture -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Docker Architecture</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Web Application</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Flask application container</li>
|
|
<li class="mb-2">• Gunicorn WSGI server</li>
|
|
<li class="mb-2">• Health check endpoints</li>
|
|
<li class="mb-2">• Resource limits & monitoring</li>
|
|
<li class="mb-2">• Volume mounts for uploads</li>
|
|
<li class="mb-2">• Environment configuration</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Database</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• PostgreSQL 13 container</li>
|
|
<li class="mb-2">• Persistent volume storage</li>
|
|
<li class="mb-2">• Connection pooling</li>
|
|
<li class="mb-2">• Health monitoring</li>
|
|
<li class="mb-2">• Automated backups</li>
|
|
<li class="mb-2">• Performance optimization</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Docker Compose Configuration -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Docker Compose Configuration</h5>
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Services Configuration</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Web Service</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Image: Custom Flask application</li>
|
|
<li class="mb-1">• Port: 5000 (internal) / ${PORT} (external)</li>
|
|
<li class="mb-1">• Environment: Production settings</li>
|
|
<li class="mb-1">• Volumes: Upload storage</li>
|
|
<li class="mb-1">• Dependencies: Database service</li>
|
|
<li class="mb-1">• Health checks: HTTP endpoint</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Database Service</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Image: postgres:13</li>
|
|
<li class="mb-1">• Port: 5432 (internal only)</li>
|
|
<li class="mb-1">• Environment: Database credentials</li>
|
|
<li class="mb-1">• Volumes: Persistent data storage</li>
|
|
<li class="mb-1">• Health checks: pg_isready</li>
|
|
<li class="mb-1">• Restart policy: unless-stopped</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Multi-Tenant Deployment -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Multi-Tenant Deployment</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Master Instance</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Central orchestration hub</li>
|
|
<li class="mb-2">• Instance management dashboard</li>
|
|
<li class="mb-2">• Automated deployment via API</li>
|
|
<li class="mb-2">• Health monitoring & alerts</li>
|
|
<li class="mb-2">• Resource allocation tracking</li>
|
|
<li class="mb-2">• Backup & recovery management</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Tenant Instances</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Isolated Docker networks</li>
|
|
<li class="mb-2">• Separate database instances</li>
|
|
<li class="mb-2">• Unique port assignments</li>
|
|
<li class="mb-2">• Independent volume storage</li>
|
|
<li class="mb-2">• Custom domain routing</li>
|
|
<li class="mb-2">• Scalable resource limits</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deployment Process -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Deployment Process</h5>
|
|
|
|
<!-- Single Instance Deployment -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-server me-2"></i>Single Instance Deployment
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Prerequisites</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Docker & Docker Compose</li>
|
|
<li class="mb-1">• PostgreSQL (if external)</li>
|
|
<li class="mb-1">• Environment variables</li>
|
|
<li class="mb-1">• SSL certificates</li>
|
|
<li class="mb-1">• Domain configuration</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Deployment Steps</h6>
|
|
<ol class="small">
|
|
<li class="mb-1">Clone repository</li>
|
|
<li class="mb-1">Configure environment</li>
|
|
<li class="mb-1">Run database migrations</li>
|
|
<li class="mb-1">Start Docker services</li>
|
|
<li class="mb-1">Verify health checks</li>
|
|
<li class="mb-1">Configure reverse proxy</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Multi-Tenant Deployment -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-building me-2"></i>Multi-Tenant Deployment
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Infrastructure Requirements</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Portainer for container management</li>
|
|
<li class="mb-1">• NGINX Proxy Manager</li>
|
|
<li class="mb-1">• Git repository access</li>
|
|
<li class="mb-1">• SSL certificate provider</li>
|
|
<li class="mb-1">• Monitoring & logging</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Automated Process</h6>
|
|
<ol class="small">
|
|
<li class="mb-1">Instance creation via API</li>
|
|
<li class="mb-1">Docker stack deployment</li>
|
|
<li class="mb-1">Database initialization</li>
|
|
<li class="mb-1">Proxy host configuration</li>
|
|
<li class="mb-1">SSL certificate generation</li>
|
|
<li class="mb-1">Health monitoring setup</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environment Configuration -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Environment Configuration</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Required Variables</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2"><code>DATABASE_URL</code> - PostgreSQL connection</li>
|
|
<li class="mb-2"><code>SECRET_KEY</code> - Flask secret key</li>
|
|
<li class="mb-2"><code>FLASK_ENV</code> - Environment mode</li>
|
|
<li class="mb-2"><code>SERVER_NAME</code> - Server hostname</li>
|
|
<li class="mb-2"><code>PREFERRED_URL_SCHEME</code> - HTTP/HTTPS</li>
|
|
<li class="mb-2"><code>PORT</code> - External port mapping</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Optional Variables</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2"><code>MASTER</code> - Master instance flag</li>
|
|
<li class="mb-2"><code>ISMASTER</code> - Master instance mode</li>
|
|
<li class="mb-2"><code>CSS_VERSION</code> - Asset versioning</li>
|
|
<li class="mb-2"><code>UPLOAD_FOLDER</code> - File storage path</li>
|
|
<li class="mb-2"><code>LOG_LEVEL</code> - Logging verbosity</li>
|
|
<li class="mb-2"><code>DEBUG</code> - Debug mode flag</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health Monitoring -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Health Monitoring</h5>
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-3">Health Check Endpoints</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• <code>/health</code> - Application health</li>
|
|
<li class="mb-2">• Database connectivity check</li>
|
|
<li class="mb-2">• Response time monitoring</li>
|
|
<li class="mb-2">• Error rate tracking</li>
|
|
<li class="mb-2">• Resource usage metrics</li>
|
|
<li class="mb-2">• Service status reporting</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-3">Monitoring Features</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Prometheus metrics export</li>
|
|
<li class="mb-2">• Grafana dashboard integration</li>
|
|
<li class="mb-2">• Alert notification system</li>
|
|
<li class="mb-2">• Performance benchmarking</li>
|
|
<li class="mb-2">• Capacity planning tools</li>
|
|
<li class="mb-2">• Automated recovery actions</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup & Recovery -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Backup & Recovery</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Backup Strategy</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Automated database backups</li>
|
|
<li class="mb-2">• File storage snapshots</li>
|
|
<li class="mb-2">• Configuration backups</li>
|
|
<li class="mb-2">• Incremental backup support</li>
|
|
<li class="mb-2">• Cross-region replication</li>
|
|
<li class="mb-2">• Retention policy management</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Recovery Procedures</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Point-in-time recovery</li>
|
|
<li class="mb-2">• Disaster recovery plans</li>
|
|
<li class="mb-2">• Data validation tools</li>
|
|
<li class="mb-2">• Rollback procedures</li>
|
|
<li class="mb-2">• Testing environments</li>
|
|
<li class="mb-2">• Documentation & runbooks</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Version Management -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Version Management</h5>
|
|
|
|
<!-- Version Tracking -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-tags me-2"></i>Version Tracking
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Environment Variables</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• <code>APP_VERSION</code> - Application version/tag</li>
|
|
<li class="mb-1">• <code>GIT_COMMIT</code> - Git commit hash</li>
|
|
<li class="mb-1">• <code>GIT_BRANCH</code> - Git branch name</li>
|
|
<li class="mb-1">• <code>DEPLOYED_AT</code> - Deployment timestamp</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Database Storage</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Instance version tracking</li>
|
|
<li class="mb-1">• Version comparison</li>
|
|
<li class="mb-1">• Update notifications</li>
|
|
<li class="mb-1">• Deployment history</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Version API -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-code me-2"></i>Version API
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<h6 class="text-muted mb-2">Endpoint</h6>
|
|
<code class="bg-light p-2 rounded d-block">GET /api/version</code>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="text-muted mb-2">Response</h6>
|
|
<pre class="bg-light p-2 rounded small"><code>{
|
|
"version": "v1.2.3",
|
|
"tag": "v1.2.3",
|
|
"commit": "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0",
|
|
"branch": "main",
|
|
"deployed_at": "2024-01-15T10:30:00.000000"
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Deployment Statistics -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title mb-4" style="color: var(--primary-color);">Deployment Stats</h5>
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--primary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--primary-color);">2</div>
|
|
<small class="text-muted">Services</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--secondary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--secondary-color);">∞</div>
|
|
<small class="text-muted">Tenants</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--primary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--primary-color);">60s</div>
|
|
<small class="text-muted">Health Check</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--secondary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--secondary-color);">1GB</div>
|
|
<small class="text-muted">Memory Limit</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deployment Commands -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3" style="color: var(--primary-color);">Quick Commands</h5>
|
|
<div class="small">
|
|
<div class="mb-2">
|
|
<code class="bg-light p-1 rounded">docker-compose up -d</code>
|
|
<div class="text-muted">Start services</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<code class="bg-light p-1 rounded">docker-compose down</code>
|
|
<div class="text-muted">Stop services</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<code class="bg-light p-1 rounded">docker-compose logs</code>
|
|
<div class="text-muted">View logs</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<code class="bg-light p-1 rounded">docker-compose ps</code>
|
|
<div class="text-muted">Check status</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<code class="bg-light p-1 rounded">flask db upgrade</code>
|
|
<div class="text-muted">Run migrations</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<code class="bg-light p-1 rounded">flask create-admin</code>
|
|
<div class="text-muted">Create admin user</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Infrastructure Components -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3" style="color: var(--primary-color);">Infrastructure</h5>
|
|
<div class="d-grid gap-2">
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-docker me-2"></i>Docker Engine
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-server me-2"></i>Docker Compose
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-database me-2"></i>PostgreSQL 13
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-rocket me-2"></i>Gunicorn WSGI
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-chart-line me-2"></i>Prometheus
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-shield-alt me-2"></i>NGINX Proxy
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Considerations -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3" style="color: var(--primary-color);">Security</h5>
|
|
<div class="small">
|
|
<div class="mb-2">
|
|
<i class="fas fa-lock text-primary me-2"></i>
|
|
<strong>Network Isolation</strong> - Docker networks
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-shield-alt text-primary me-2"></i>
|
|
<strong>SSL/TLS</strong> - HTTPS encryption
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-user-shield text-primary me-2"></i>
|
|
<strong>Access Control</strong> - Role-based permissions
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-database text-primary me-2"></i>
|
|
<strong>Data Encryption</strong> - At rest & in transit
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-eye text-primary me-2"></i>
|
|
<strong>Audit Logging</strong> - Comprehensive tracking
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-sync text-primary me-2"></i>
|
|
<strong>Regular Updates</strong> - Security patches
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|