feat: Update Dockerfile for production deployment

This commit is contained in:
Peifan Li
2025-11-25 21:02:04 -05:00
parent 6a0af27bcb
commit 35651fd874
4 changed files with 41 additions and 50 deletions

View File

@@ -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"]
CMD ["node", "dist/src/server.js"]

View File

@@ -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"
},

View File

@@ -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();

View File

@@ -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.