From 35651fd874a8068ba8d0c3b788f1cd52358ce90d Mon Sep 17 00:00:00 2001
From: Peifan Li <frank.li.oxygen@gmail.com>
Date: Tue, 25 Nov 2025 21:02:04 -0500
Subject: [PATCH] feat: Update Dockerfile for production deployment

---
 backend/Dockerfile                            | 54 ++++++++++++++-----
 backend/package.json                          |  1 -
 .../services/downloaders/MissAVDownloader.ts  |  1 +
 walkthrough.md                                | 35 ------------
 4 files changed, 41 insertions(+), 50 deletions(-)
 delete mode 100644 walkthrough.md

diff --git a/backend/Dockerfile b/backend/Dockerfile
index 493d5fb..1b2feab 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,27 +1,53 @@
+# Stage 1: Builder
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+# Skip Puppeteer download during build as we only need to compile TS
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
+# Skip Python check for youtube-dl-exec during build
+ENV YOUTUBE_DL_SKIP_PYTHON_CHECK=1
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+# Stage 2: Production
 FROM node:22-alpine
 
 WORKDIR /app
 
-# Install Python and other dependencies needed for youtube-dl-exec
-RUN apk add --no-cache python3 ffmpeg py3-pip && \
+# Install system dependencies
+# chromium: for Puppeteer (saves ~300MB vs bundled)
+# ffmpeg: for video processing
+# python3: for yt-dlp
+RUN apk add --no-cache \
+    chromium \
+    ffmpeg \
+    python3 \
+    py3-pip && \
     ln -sf python3 /usr/bin/python
 
-COPY package*.json ./
-# Skip Python check as we've already installed it
-ENV YOUTUBE_DL_SKIP_PYTHON_CHECK=1
-RUN npm install
-
-COPY . .
-
-# Build TypeScript code
-RUN npm run build
-
-# Set environment variables
+# Environment variables
+ENV NODE_ENV=production
 ENV PORT=5551
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Install production dependencies only
+COPY package*.json ./
+RUN npm ci --only=production
+
+# Copy built artifacts from builder
+COPY --from=builder /app/dist ./dist
+# Copy drizzle migrations
+COPY --from=builder /app/drizzle ./drizzle
 
 # Create necessary directories
 RUN mkdir -p uploads/videos uploads/images data
 
 EXPOSE 5551
 
-CMD ["node", "dist/src/server.js"] 
\ No newline at end of file
+CMD ["node", "dist/src/server.js"]
\ No newline at end of file
diff --git a/backend/package.json b/backend/package.json
index 4b8d8ff..9a45778 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -26,7 +26,6 @@
     "express": "^4.18.2",
     "fs-extra": "^11.2.0",
     "multer": "^1.4.5-lts.1",
-    "path": "^0.12.7",
     "puppeteer": "^24.31.0",
     "youtube-dl-exec": "^2.4.17"
   },
diff --git a/backend/src/services/downloaders/MissAVDownloader.ts b/backend/src/services/downloaders/MissAVDownloader.ts
index a02a50a..98b48ed 100644
--- a/backend/src/services/downloaders/MissAVDownloader.ts
+++ b/backend/src/services/downloaders/MissAVDownloader.ts
@@ -34,6 +34,7 @@ export class MissAVDownloader {
 
             const browser = await puppeteer.launch({
                 headless: true,
+                executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || undefined,
                 args: ['--no-sandbox', '--disable-setuid-sandbox']
             });
             const page = await browser.newPage();
diff --git a/walkthrough.md b/walkthrough.md
deleted file mode 100644
index c8556a7..0000000
--- a/walkthrough.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Walkthrough - Video Title Editing
-
-I have added the ability to edit video titles directly from the video player page.
-
-## Changes
-
-### Backend
-
-#### [api.ts](file:///Users/franklioxygen/Projects/mytube/backend/src/routes/api.ts)
-- Added `PUT /videos/:id` route.
-
-#### [videoController.ts](file:///Users/franklioxygen/Projects/mytube/backend/src/controllers/videoController.ts)
-- Added `updateVideoDetails` controller to handle title updates.
-
-### Frontend
-
-#### [VideoPlayer.tsx](file:///Users/franklioxygen/Projects/mytube/frontend/src/pages/VideoPlayer.tsx)
-- Added a pencil icon next to the video title.
-- Clicking the icon switches the title to an input field.
-- Added "Save" and "Cancel" buttons (icon-only).
-- Implemented logic to save the new title to the backend.
-
-#### [translations.ts](file:///Users/franklioxygen/Projects/mytube/frontend/src/utils/translations.ts)
-- Added translations for "Edit Title", "Save", "Cancel", and success/error messages in English and Chinese.
-
-## Verification Results
-
-### Manual Verification
-- **UI**: The pencil icon appears next to the title.
-- **Interaction**: Clicking the icon shows the input field and buttons.
-- **Functionality**:
-    - "Save" button (Check icon) updates the title and shows a success message.
-    - "Cancel" button (Close icon) reverts the changes.
-    - The title persists after page reload (verified by backend implementation).
-- **Translations**: Verified keys for both languages.