shoehorning graphql, step functions and lamdas. aws deployment scripts
This commit is contained in:
@@ -1,101 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MPR - Architecture</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>MPR - Media Processor</h1>
|
||||
<p>A web-based media transcoding tool with professional architecture.</p>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MPR - Architecture</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>MPR - Media Processor</h1>
|
||||
<p>
|
||||
Media transcoding platform with dual execution modes: local (Celery
|
||||
+ MinIO) and cloud (AWS Step Functions + Lambda + S3).
|
||||
</p>
|
||||
|
||||
<nav>
|
||||
<a href="#overview">System Overview</a>
|
||||
<a href="#data-model">Data Model</a>
|
||||
<a href="#job-flow">Job Flow</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="#overview">System Overview</a>
|
||||
<a href="#data-model">Data Model</a>
|
||||
<a href="#job-flow">Job Flow</a>
|
||||
</nav>
|
||||
|
||||
<h2 id="overview">System Overview</h2>
|
||||
<div class="diagram-container">
|
||||
<div class="diagram">
|
||||
<h3>Architecture</h3>
|
||||
<object type="image/svg+xml" data="01-system-overview.svg">
|
||||
<img src="01-system-overview.svg" alt="System Overview">
|
||||
</object>
|
||||
<a href="01-system-overview.svg" target="_blank">Open full size</a>
|
||||
<h2 id="overview">System Overview</h2>
|
||||
<div class="diagram-container">
|
||||
<div class="diagram">
|
||||
<h3>Architecture</h3>
|
||||
<object type="image/svg+xml" data="01-system-overview.svg">
|
||||
<img src="01-system-overview.svg" alt="System Overview" />
|
||||
</object>
|
||||
<a href="01-system-overview.svg" target="_blank"
|
||||
>Open full size</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><span class="color-box" style="background: #e8f4f8"></span> Reverse Proxy (nginx)</li>
|
||||
<li><span class="color-box" style="background: #f0f8e8"></span> Application Layer (Django, FastAPI, UI)</li>
|
||||
<li><span class="color-box" style="background: #fff8e8"></span> Worker Layer (Celery, Lambda)</li>
|
||||
<li><span class="color-box" style="background: #f8e8f0"></span> Data Layer (PostgreSQL, Redis, SQS)</li>
|
||||
<li><span class="color-box" style="background: #f0f0f0"></span> Storage (Local FS, S3)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="data-model">Data Model</h2>
|
||||
<div class="diagram-container">
|
||||
<div class="diagram">
|
||||
<h3>Entity Relationships</h3>
|
||||
<object type="image/svg+xml" data="02-data-model.svg">
|
||||
<img src="02-data-model.svg" alt="Data Model">
|
||||
</object>
|
||||
<a href="02-data-model.svg" target="_blank">Open full size</a>
|
||||
<div class="legend">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="color-box" style="background: #e8f4f8"></span>
|
||||
Reverse Proxy (nginx)
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #f0f8e8"></span>
|
||||
Application Layer (Django Admin, FastAPI + GraphQL, Timeline
|
||||
UI)
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #fff8e8"></span>
|
||||
Worker Layer (Celery local mode)
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #fde8d0"></span>
|
||||
AWS (Step Functions, Lambda - cloud mode)
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #f8e8f0"></span>
|
||||
Data Layer (PostgreSQL, Redis)
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #f0f0f0"></span>
|
||||
S3 Storage (MinIO local / AWS S3 cloud)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<h3>Entities</h3>
|
||||
<ul>
|
||||
<li><span class="color-box" style="background: #4a90d9"></span> MediaAsset - Video/audio files with metadata</li>
|
||||
<li><span class="color-box" style="background: #50b050"></span> TranscodePreset - Encoding configurations</li>
|
||||
<li><span class="color-box" style="background: #d9534f"></span> TranscodeJob - Processing queue items</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="job-flow">Job Flow</h2>
|
||||
<div class="diagram-container">
|
||||
<div class="diagram">
|
||||
<h3>Job Lifecycle</h3>
|
||||
<object type="image/svg+xml" data="03-job-flow.svg">
|
||||
<img src="03-job-flow.svg" alt="Job Flow">
|
||||
</object>
|
||||
<a href="03-job-flow.svg" target="_blank">Open full size</a>
|
||||
<h2 id="data-model">Data Model</h2>
|
||||
<div class="diagram-container">
|
||||
<div class="diagram">
|
||||
<h3>Entity Relationships</h3>
|
||||
<object type="image/svg+xml" data="02-data-model.svg">
|
||||
<img src="02-data-model.svg" alt="Data Model" />
|
||||
</object>
|
||||
<a href="02-data-model.svg" target="_blank">Open full size</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<h3>Job States</h3>
|
||||
<ul>
|
||||
<li><span class="color-box" style="background: #ffc107"></span> PENDING - Waiting in queue</li>
|
||||
<li><span class="color-box" style="background: #17a2b8"></span> PROCESSING - Worker executing</li>
|
||||
<li><span class="color-box" style="background: #28a745"></span> COMPLETED - Success</li>
|
||||
<li><span class="color-box" style="background: #dc3545"></span> FAILED - Error occurred</li>
|
||||
<li><span class="color-box" style="background: #6c757d"></span> CANCELLED - User cancelled</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<h3>Entities</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="color-box" style="background: #4a90d9"></span>
|
||||
MediaAsset - Video/audio files (S3 keys as paths)
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #50b050"></span>
|
||||
TranscodePreset - Encoding configurations
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #d9534f"></span>
|
||||
TranscodeJob - Processing queue (celery_task_id or
|
||||
execution_arn)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Quick Reference</h2>
|
||||
<pre><code># Generate SVGs from DOT files
|
||||
dot -Tsvg 01-system-overview.dot -o 01-system-overview.svg
|
||||
dot -Tsvg 02-data-model.dot -o 02-data-model.svg
|
||||
dot -Tsvg 03-job-flow.dot -o 03-job-flow.svg
|
||||
<h2 id="job-flow">Job Flow</h2>
|
||||
<div class="diagram-container">
|
||||
<div class="diagram">
|
||||
<h3>Job Lifecycle</h3>
|
||||
<object type="image/svg+xml" data="03-job-flow.svg">
|
||||
<img src="03-job-flow.svg" alt="Job Flow" />
|
||||
</object>
|
||||
<a href="03-job-flow.svg" target="_blank">Open full size</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
# Or generate all at once
|
||||
for f in *.dot; do dot -Tsvg "$f" -o "${f%.dot}.svg"; done</code></pre>
|
||||
<div class="legend">
|
||||
<h3>Job States</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="color-box" style="background: #ffc107"></span>
|
||||
PENDING - Waiting in queue
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #17a2b8"></span>
|
||||
PROCESSING - Worker executing
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #28a745"></span>
|
||||
COMPLETED - Success
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #dc3545"></span>
|
||||
FAILED - Error occurred
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #6c757d"></span>
|
||||
CANCELLED - User cancelled
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Execution Modes</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="color-box" style="background: #e8f4e8"></span>
|
||||
Local: Celery + MinIO (S3 API) + FFmpeg
|
||||
</li>
|
||||
<li>
|
||||
<span class="color-box" style="background: #fde8d0"></span>
|
||||
Lambda: Step Functions + Lambda + AWS S3
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Access Points</h2>
|
||||
<pre><code># Add to /etc/hosts
|
||||
<h2>API Interfaces</h2>
|
||||
<pre><code># REST API
|
||||
http://mpr.local.ar/api/docs - Swagger UI
|
||||
POST /api/assets/scan - Scan S3 bucket for media
|
||||
POST /api/jobs/ - Create transcode job
|
||||
POST /api/jobs/{id}/callback - Lambda completion callback
|
||||
|
||||
# GraphQL (GraphiQL)
|
||||
http://mpr.local.ar/graphql - GraphiQL IDE
|
||||
query { assets { id filename } }
|
||||
mutation { createJob(input: {...}) { id status } }
|
||||
mutation { scanMediaFolder { found registered } }</code></pre>
|
||||
|
||||
<h2>Access Points</h2>
|
||||
<pre><code># Local development
|
||||
127.0.0.1 mpr.local.ar
|
||||
http://mpr.local.ar/admin - Django Admin
|
||||
http://mpr.local.ar/api/docs - FastAPI Swagger
|
||||
http://mpr.local.ar/graphql - GraphiQL
|
||||
http://mpr.local.ar/ - Timeline UI
|
||||
http://localhost:9001 - MinIO Console
|
||||
|
||||
# URLs
|
||||
http://mpr.local.ar/admin - Django Admin
|
||||
http://mpr.local.ar/api - FastAPI (docs at /api/docs)
|
||||
http://mpr.local.ar/ui - Timeline UI</code></pre>
|
||||
</body>
|
||||
# AWS deployment
|
||||
https://mpr.mcrn.ar/ - Production</code></pre>
|
||||
|
||||
<h2>Quick Reference</h2>
|
||||
<pre><code># Render SVGs from DOT files
|
||||
for f in *.dot; do dot -Tsvg "$f" -o "${f%.dot}.svg"; done
|
||||
|
||||
# Switch executor mode
|
||||
MPR_EXECUTOR=local # Celery + MinIO
|
||||
MPR_EXECUTOR=lambda # Step Functions + Lambda + S3</code></pre>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user