| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>اسلایدهای ارائه پروژه داکر - IE Research Platform</title> | |
| <style> | |
| @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'); | |
| :root { | |
| --primary: #2563eb; | |
| --primary-dark: #1d4ed8; | |
| --bg-dark: #0f172a; | |
| --card-bg: #1e293b; | |
| --text-light: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --accent: #14b8a6; | |
| --accent-orange: #f59e0b; | |
| --border: #334155; | |
| } | |
| @page { | |
| size: A4 landscape; | |
| margin: 0; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Vazirmatn', -apple-system, sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-light); | |
| direction: rtl; | |
| line-height: 1.6; | |
| } | |
| .slide { | |
| width: 100vw; | |
| height: 100vh; | |
| padding: 50px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| page-break-after: always; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| border-bottom: 2px solid var(--border); | |
| position: relative; | |
| } | |
| .slide-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 2px solid var(--primary); | |
| padding-bottom: 15px; | |
| } | |
| .slide-title { | |
| font-size: 24pt; | |
| font-weight: 800; | |
| color: #60a5fa; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .slide-number { | |
| font-size: 14pt; | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| border: 1px solid var(--border); | |
| } | |
| .slide-content { | |
| flex: 1; | |
| margin-top: 30px; | |
| display: flex; | |
| gap: 30px; | |
| } | |
| .full-width { | |
| width: 100%; | |
| } | |
| .col { | |
| flex: 1; | |
| background: rgba(30, 41, 59, 0.7); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 25px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .title-slide { | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| background: radial-gradient(circle at center, #1e3a8a 0%, #0f172a 70%); | |
| } | |
| .main-title { | |
| font-size: 36pt; | |
| font-weight: 900; | |
| color: #ffffff; | |
| margin-bottom: 15px; | |
| text-shadow: 0 4px 20px rgba(37, 99, 235, 0.5); | |
| } | |
| .main-subtitle { | |
| font-size: 20pt; | |
| color: #93c5fd; | |
| margin-bottom: 40px; | |
| } | |
| .presenter-box { | |
| background: rgba(15, 23, 42, 0.8); | |
| border: 1px solid #3b82f6; | |
| padding: 20px 40px; | |
| border-radius: 12px; | |
| display: inline-block; | |
| font-size: 14pt; | |
| } | |
| h3 { | |
| color: var(--accent); | |
| font-size: 16pt; | |
| margin-bottom: 15px; | |
| border-right: 4px solid var(--accent); | |
| padding-right: 10px; | |
| } | |
| p, li { | |
| font-size: 12pt; | |
| color: #cbd5e1; | |
| margin-bottom: 10px; | |
| text-align: justify; | |
| } | |
| ul { | |
| padding-right: 20px; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 10px; | |
| font-size: 11pt; | |
| } | |
| th, td { | |
| border: 1px solid var(--border); | |
| padding: 10px 14px; | |
| text-align: right; | |
| } | |
| th { | |
| background-color: rgba(37, 99, 235, 0.2); | |
| color: #93c5fd; | |
| } | |
| tr:nth-child(even) { | |
| background-color: rgba(255, 255, 255, 0.02); | |
| } | |
| code { | |
| font-family: 'Courier New', monospace; | |
| background: #090d16; | |
| color: #38bdf8; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| direction: ltr; | |
| display: inline-block; | |
| } | |
| pre { | |
| background: #090d16; | |
| color: #e2e8f0; | |
| padding: 15px; | |
| border-radius: 8px; | |
| direction: ltr; | |
| text-align: left; | |
| font-size: 9.5pt; | |
| font-family: 'Courier New', monospace; | |
| overflow: hidden; | |
| border: 1px solid #1e293b; | |
| } | |
| .highlight-box { | |
| background: rgba(20, 184, 166, 0.1); | |
| border-right: 4px solid var(--accent); | |
| padding: 15px; | |
| border-radius: 6px; | |
| margin-top: 15px; | |
| } | |
| .warning-box { | |
| background: rgba(245, 158, 11, 0.1); | |
| border-right: 4px solid var(--accent-orange); | |
| padding: 15px; | |
| border-radius: 6px; | |
| margin-top: 15px; | |
| } | |
| .footer { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 10pt; | |
| color: var(--text-muted); | |
| border-top: 1px solid var(--border); | |
| padding-top: 10px; | |
| } | |
| @media print { | |
| .slide { | |
| width: 297mm; | |
| height: 210mm; | |
| padding: 25mm 20mm; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Slide 1: Title --> | |
| <div class="slide title-slide"> | |
| <div class="main-title">ارائه دفاعیه پروژه داکر (Dockerization)</div> | |
| <div class="main-subtitle">پلتفرم تحقیقاتی و علمی IE Research Platform 2.0</div> | |
| <div class="presenter-box"> | |
| <div><strong>درس:</strong> مهندسی اینترنت (IE)</div> | |
| <div><strong>موضوع:</strong> کانتینریزهسازی Multi-Stage، ریورس پروکسی Nginx و داکر کامپوز</div> | |
| </div> | |
| </div> | |
| <!-- Slide 2: Project Architecture & Goals --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۲: معماری کلان و اهداف کانتینریزهسازی</div> | |
| <div class="slide-number">2 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col"> | |
| <h3>معماری سه لایهای پروژه (3-Tier Decoupled)</h3> | |
| <ul> | |
| <li><strong>Presentation Tier:</strong> اپلیکیشن SPA مبتنی بر React 18 و Vite.</li> | |
| <li><strong>Application Tier:</strong> سرویس جاوا Spring Boot 2.7 (Java 17 JRE).</li> | |
| <li><strong>Data Tier:</strong> پایگاه داده رابطهای MySQL 8.0.</li> | |
| </ul> | |
| <div class="highlight-box"> | |
| <strong>هدف اصلی داکر:</strong> ایزولهسازی کامل، حذف وابستگی به سیستمعامل توسعهدهندگان، افزایش سرعت انتشار و مدیریت آسان سرویسهای مستقل. | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <h3>چالشهای قبل از داکرایز کردن</h3> | |
| <ul> | |
| <li>عدم یکپارچگی نسخه Java/Node روی سیستمعاملهای مختلف ("On my machine works").</li> | |
| <li>پیچیدگی نصب و تنظیم سرویسهای جانبی مانند پایگاه داده و Nginx.</li> | |
| <li>خطر تداخل پورتها و وابستگیهای سیستمعامل میزبان.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 3: VM vs Docker --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۳: چرا داکر؟ (Virtualization vs Containerization)</div> | |
| <div class="slide-number">3 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col full-width"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>معیار مقایسه</th> | |
| <th>ماشین مجازی (Virtual Machine)</th> | |
| <th>کانتینر داکر (Docker Container)</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>معماری</strong></td> | |
| <td>مبتنی بر Hypervisor و سیستمعامل کامل میهمان (Guest OS)</td> | |
| <td>مبتنی بر Docker Engine و به اشتراکگذاری هسته Host OS</td> | |
| </tr> | |
| <tr> | |
| <td><strong>مصرف منابع</strong></td> | |
| <td>سنگین (رزرو چندین گیگابایت RAM برای هر VM)</td> | |
| <td>بسیار سبک (فقط به اندازه منابع پروسه برنامه)</td> | |
| </tr> | |
| <tr> | |
| <td><strong>زمان راهاندازی</strong></td> | |
| <td>کند (چندین دقیقه برای بوت Guest OS)</td> | |
| <td>آنی (در حد چند ثانیه)</td> | |
| </tr> | |
| <tr> | |
| <td><strong>حجم فایل</strong></td> | |
| <td>گیگابایتی (چندین گیگابایت)</td> | |
| <td>مگابایتی (ایمیجهای سبک Alpine/Jammy)</td> | |
| </tr> | |
| <tr> | |
| <td><strong>قابلیت حمل</strong></td> | |
| <td>دشوار و وابسته به سختافزار مجازی</td> | |
| <td>اجرای یکسان روی هر محیط دارای Docker Engine</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 4: Frontend Dockerization --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۴: داکرایز کردن فرانتاند (Frontend Multi-Stage)</div> | |
| <div class="slide-number">4 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col"> | |
| <h3>چرا Dev Server برای Production مناسب نیست؟</h3> | |
| <ul> | |
| <li>دستور <code>yarn dev</code> برای توسعه زنده (HMR) است نه پروداکشن.</li> | |
| <li>در پروداکشن باید فایلهای استاتیک HTML/JS/CSS کامپایل و Minify شوند.</li> | |
| </ul> | |
| <h3>معماری Multi-Stage فرانتاند:</h3> | |
| <ul> | |
| <li><strong>Stage 1 (Build):</strong> استفاده از <code>node:20-alpine</code> جهت اجرای <code>yarn build</code>.</li> | |
| <li><strong>Stage 2 (Runtime):</strong> انتقال پوشه <code>dist</code> به ایمیج <code>nginx:1.27-alpine</code>. حذف نودجیاس و سورسکد جهت کاهش حجم.</li> | |
| </ul> | |
| </div> | |
| <div class="col"> | |
| <pre><code># Stage 1: Build React static assets | |
| FROM node:20-alpine AS builder | |
| WORKDIR /app | |
| COPY package.json yarn.lock ./ | |
| RUN yarn install --frozen-lockfile | |
| COPY . . | |
| RUN yarn build | |
| # Stage 2: Serve via Nginx | |
| FROM nginx:1.27-alpine AS runtime | |
| COPY nginx.conf /etc/nginx/conf.d/default.conf | |
| COPY --from=builder /app/dist /usr/share/nginx/html | |
| EXPOSE 80 | |
| CMD ["nginx", "-g", "daemon off;"]</code></pre> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 5: Reverse Proxy Architecture --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۵: معماری ریورس پروکسی (Nginx Reverse Proxy)</div> | |
| <div class="slide-number">5 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col"> | |
| <h3>مزایای اصلی Nginx به عنوان Reverse Proxy</h3> | |
| <ul> | |
| <li><strong>Single Entry Point:</strong> ارائه کل سیستم روی پورت 80 بدون لزوم افشای پورت 9092.</li> | |
| <li><strong>پنهانسازی کانتینرها:</strong> عدم دسترسی مستقیم اینترنت به کانتینر بکاند.</li> | |
| <li><strong>پشتیبانی از WebSocket:</strong> ارتقای پروتکل با هدرهای Upgrade.</li> | |
| <li><strong>SPA Routing Fallback:</strong> هدایت مسیرها به <code>index.html</code> جهت پشتیبانی از React Router.</li> | |
| </ul> | |
| </div> | |
| <div class="col"> | |
| <pre><code>server { | |
| listen 80; | |
| root /usr/share/nginx/html; | |
| # Proxy REST API | |
| location /api/ { | |
| proxy_pass http://backend:9092/api/; | |
| proxy_set_header Host $host; | |
| proxy_set_header X-Real-IP $remote_addr; | |
| } | |
| # Proxy WebSockets | |
| location /ws { | |
| proxy_pass http://backend:9093/ws; | |
| proxy_set_header Upgrade $http_upgrade; | |
| proxy_set_header Connection "upgrade"; | |
| } | |
| # React Router Fallback | |
| location / { | |
| try_files $uri $uri/ /index.html; | |
| } | |
| }</code></pre> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 6: Backend Dockerization --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۶: داکرایز کردن بکاند (Backend Multi-Stage)</div> | |
| <div class="slide-number">6 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col"> | |
| <h3>ساختار Multi-Stage بکاند جاوا</h3> | |
| <ul> | |
| <li><strong>Stage 1 (Maven Builder):</strong> استفاده از <code>maven:3.9-eclipse-temurin-17</code> جهت دانلود <code>pom.xml</code> و ساخت فایل FAT JAR.</li> | |
| <li><strong>Stage 2 (JRE Runtime):</strong> استفاده از <code>eclipse-temurin:17-jre-jammy</code> جهت اجرای <code>java -jar app.jar</code>.</li> | |
| </ul> | |
| <div class="warning-box"> | |
| <strong>تدابیر امنیتی:</strong> عدم اجرا با ریشه (ایجاد کاربر غیر-ریشه <code>appuser</code>) + تنظیم حافظه JVM با <code>-XX:MaxRAMPercentage=75.0</code>. | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <pre><code># Stage 1: Build Jar with Maven | |
| FROM maven:3.9-eclipse-temurin-17 AS builder | |
| WORKDIR /app | |
| COPY pom.xml . | |
| RUN mvn dependency:go-offline -B || true | |
| COPY src ./src | |
| RUN mvn clean package -DskipTests -B | |
| # Stage 2: Minimal JRE Runtime | |
| FROM eclipse-temurin:17-jre-jammy AS runtime | |
| RUN groupadd --system appgroup \ | |
| && useradd --system --gid appgroup --home /app appuser | |
| WORKDIR /app | |
| COPY --from=builder /app/target/*.jar app.jar | |
| USER appuser | |
| EXPOSE 9092 9093 | |
| ENTRYPOINT ["java", "-jar", "app.jar"]</code></pre> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 7: Database & Volumes --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۷: پایگاهداده و ماندگاری دادهها (Docker Volumes)</div> | |
| <div class="slide-number">7 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col"> | |
| <h3>داکرایز کردن MySQL 8.0</h3> | |
| <ul> | |
| <li>استفاده از ایمیج رسمی <code>mysql:8.0.36</code>.</li> | |
| <li>تنظیم نام دیتابیس و رمزها از طریق متغیرهای محیطی <code>.env</code>.</li> | |
| </ul> | |
| <h3>علت نیاز به Docker Volume</h3> | |
| <p> | |
| کانتینرها موقتی (Ephemeral) هستند و با حذف کانتینر، تمام دادههای دیتابیس پاک میشود. استفاده از Volume باعث حفظ ماندگار دادهها روی سیستم میزبان میشود. | |
| </p> | |
| </div> | |
| <div class="col"> | |
| <h3>Named Volume در برابر Bind Mount</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>ویژگی</th> | |
| <th>Named Volume</th> | |
| <th>Bind Mount</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>مدیریت</strong></td> | |
| <td>توسط Docker Engine</td> | |
| <td>پوشه مشخص توسط کاربر</td> | |
| </tr> | |
| <tr> | |
| <td><strong>کاربرد</strong></td> | |
| <td>دیتابیس و پروداکشن</td> | |
| <td>کدنویسی زنده در توسعه</td> | |
| </tr> | |
| <tr> | |
| <td><strong>سرعت</strong></td> | |
| <td>بسیار بالا</td> | |
| <td>کندتر روی macOS/Win</td> | |
| </tr> | |
| <tr> | |
| <td><strong>امنیت</strong></td> | |
| <td>حفاظت شده از کاربر</td> | |
| <td>خطر دستکاری دستی</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 8: Docker Compose & Orchestration --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۸: ارکستراسیون با Docker Compose</div> | |
| <div class="slide-number">8 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col"> | |
| <h3>ویژگیهای کلیدی Docker Compose</h3> | |
| <ul> | |
| <li><strong>DNS داخلی شبکه (Bridge Network):</strong> کانتینرها همدیگر را با نام سرویس فراخوانی میکنند (<code>http://backend:9092</code>).</li> | |
| <li><strong>شرط اجرای هماهنگ (Healthchecks):</strong> شروع بکاند پس از سلامت کامل MySQL و شروع فرانتاند پس از بکاند.</li> | |
| <li><strong>امنیت Secretها:</strong> نگهداری کلیدها در فایل <code>.env</code> و نرساندن آنها به گیت.</li> | |
| </ul> | |
| </div> | |
| <div class="col"> | |
| <pre><code>services: | |
| db: | |
| image: mysql:8.0.36 | |
| volumes: | |
| - db-data:/var/lib/mysql | |
| healthcheck: | |
| test: ["CMD", "mysqladmin", "ping", "-h", "localhost"] | |
| backend: | |
| build: | |
| context: . | |
| dockerfile: infra/Dockerfile | |
| depends_on: | |
| db: | |
| condition: service_healthy | |
| frontend: | |
| build: | |
| context: ./front | |
| depends_on: | |
| backend: | |
| condition: service_healthy | |
| ports: | |
| - "80:80"</code></pre> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 9: Q&A / Defense Questions --> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <div class="slide-title">📌 اسلاید ۹: سوالات کلیدی و چالشهای تحویل پروژه (Q&A Defense)</div> | |
| <div class="slide-number">9 / 10</div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="col"> | |
| <h3>۱. چرا Multi-stage Build الزامی است؟</h3> | |
| <p> | |
| زیرا ابزارهای کامپایل (Node.js/Maven) و سورسکد خام نیازی به حضور در ایمیج پروداکشن ندارند. Multi-stage حجم ایمیج را تا ۸۰٪ کاهش داده و امنیت را افزایش میدهد. | |
| </p> | |
| <h3>۲. کشف نام سرویسها (Service Discovery) چگونه کار میکند؟</h3> | |
| <p> | |
| داکر دارای یک Embedded DNS Server درون شبکههای Bridge اختصاصی است که نام کانتینر را به آدرس IP داخلی آن Resolve میکند. | |
| </p> | |
| </div> | |
| <div class="col"> | |
| <h3>۳. چگونه دادههای دیتابیس حفظ میشوند؟</h3> | |
| <p> | |
| با Mount کردن Named Volume (مثل <code>db-data:/var/lib/mysql</code>)، دادهها در فایلسیستم مستقل داکر ذخیره شده و با restart کانتینر پاک نمیشوند. | |
| </p> | |
| <h3>۴. نقش Nginx در این پروژه چیست؟</h3> | |
| <p> | |
| هم به عنوان فایل سرور استاتیک برای فایلهای React عمل میکند و هم به عنوان ریورس پروکسی درخواستهای API را به کانتینر بکاند لایهبندی میکند. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>IE Research Platform — Docker Presentation</span> | |
| <span>دانشگاه تهران - دانشکده مهندسی برق و کامپیوتر</span> | |
| </div> | |
| </div> | |
| <!-- Slide 10: Conclusion & Demo Guide --> | |
| <div class="slide title-slide"> | |
| <div class="main-title">جمعبندی و دمو پروژهی داکر</div> | |
| <div class="main-subtitle">اجرای کامل تنها با یک دستور: <code>./scripts/run_docker.sh up</code></div> | |
| <div class="presenter-box"> | |
| <div>🌐 <strong>فرانتاند و ریورس پروکسی:</strong> http://localhost</div> | |
| <div>⚙ <strong>بکاند API:</strong> http://localhost/api</div> | |
| <div>🔌 <strong>پروتکل WebSocket:</strong> ws://localhost/ws</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
Xet Storage Details
- Size:
- 24.8 kB
- Xet hash:
- 483508ea2afb2258dde9e53c01370540b4d4a171a8712ba0ff2ffcf5f824a017
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.