virtus 669addf799
Build and Push Reader Image / docker (push) Failing after 22s
feat: Revamp EPUB import process with batch upload support and enhanced API integration
- Introduced a new batch import client for handling multiple EPUB files simultaneously.
- Updated API routes for previewing and importing EPUB files, improving error handling and response management.
- Enhanced genre management during import, allowing for dynamic creation and association of genres.
- Implemented long-fetch handling to accommodate lengthy processing times for large EPUB files.
- Refined UI components for better user experience in the import workflow.
2026-05-11 15:27:13 +07:00
2026-03-05 16:46:38 +07:00
2026-03-05 16:46:38 +07:00
2026-03-05 16:46:38 +07:00
2026-03-05 16:46:38 +07:00
2026-03-05 16:46:38 +07:00
2026-03-05 16:46:38 +07:00

Reader Project

Đây là dự án nền tảng đọc truyện (Web Application) được xây dựng với kiến trúc hiện đại; dữ liệu cấu trúc và metadata người dùng lưu trên PostgreSQL (Prisma), nội dung chương và file quản lý qua API backend (reader-api).

🚀 Tính năng nổi bật

  • Xác thực & Phân quyền: Đăng nhập bằng Google Authentication (NextAuth). Hỗ trợ phân quyền người dùng (USER, MOD, ADMIN).
  • Quản lý nội dung (Dành cho MOD/ADMIN): Dashboard quản lý truyện, tải lên chương mới, quản lý trạng thái truyện (Đang ra, Hoàn thành, Tạm ngưng).
  • Trải nghiệm đọc: Khám phá truyện theo thể loại, tìm kiếm truyện, đọc chương qua API backend.
  • Tương tác người dùng: Tính năng tủ sách (bookmark) giúp lưu lại tiến độ đọc, hỗ trợ bình luận ở truyện và từng chương.

🛠 Tech Stack

  • Framework: Next.js (App Router), React 19
  • Styling: TailwindCSS v4 & Radix UI (shadcn/ui)
  • Database:
    • PostgreSQL: Metadata và dữ liệu người dùng trên web (Prisma). Nội dung chương và file do reader-api phục vụ (NAS/R2 tùy cấu hình backend).
  • Auth: NextAuth.js

💻 Hướng dẫn chạy Local (Phát triển)

1. Yêu cầu cài đặt

  • Node.js (Khuyến nghị bản LTS)
  • pnpm (Tool quản lý package)
  • Database: PostgreSQL (local hoặc máy chủ). Backend reader-api dùng chung hoặc riêng tùy triển khai.

2. Cấu hình môi trường

Tạo file .env ở thư mục gốc dựa trên .env.example (nếu có) hoặc điền các thông tin sau:

# URL kết nối PostgreSQL
DATABASE_URL="postgresql://user:password@localhost:5432/reader?schema=public"

# Cấu hình NextAuth
NEXTAUTH_SECRET="your-super-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# API backend dùng chung cho web + mobile
READER_API_ORIGIN="http://localhost:8000"

# Cấu hình Google Login
GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"

# AI Tool cho MOD (LLM + web search)
OPENAI_API_KEY="your_openai_api_key"
# Tùy chọn, mặc định: gpt-4o-mini-search-preview
OPENAI_WEB_MODEL="gpt-4o-mini-search-preview"

# Cloudflare R2 (lưu ảnh bìa)
R2_ACCOUNT_ID="your_cloudflare_account_id"
R2_ACCESS_KEY_ID="your_r2_access_key_id"
R2_SECRET_ACCESS_KEY="your_r2_secret_access_key"
R2_BUCKET_NAME="your_r2_bucket_name"
R2_PUBLIC_BASE_URL="https://your-public-r2-domain"

3. Cài đặt dependencies và khởi tạo DB

# Cài đặt các gói thư viện
pnpm install

# Đồng bộ schema xuống PostgreSQL và generate Prisma client
npx prisma db push
# hoặc (nếu muốn dùng migrate)
# npx prisma migrate dev

# Generate thư viện Prisma
npx prisma generate

4. Chạy môi trường phát triển

pnpm dev

Truy cập vào http://localhost:3000 để xem ứng dụng.

Lưu ý: traffic API user-facing và MOD đi qua READER_API_ORIGIN theo hai cách:

  • Rewrites trong next.config.mjs: /api/genres, /api/novels/*, /api/chapters/*, /api/auth/mobile-login, /api/health, /api/dev/*.
  • Route handlers proxy trong app/api/*/route.ts: /api/truyen/*, /api/user/*, /api/mod/*, và POST /api/import/uploads/preview (forward request kèm cookie/session).

Một số chỗ server-side gọi API trực tiếp qua lib/server-api.ts / lib/server-auth.ts (không đi qua rewrite ở trên).


🏗 Hướng dẫn Build

Để build project cho môi trường production:

# Đảm bảo Prisma Client đã được generate
npx prisma generate

# Chạy lệnh build của Next.js
pnpm build

Sau khi build xong, bạn có thể khởi chạy server production bằng:

pnpm start

🐳 Triển khai dưới dạng Docker

Bạn có thể dễ dàng triển khai ứng dụng bằng nền tảng Docker. Dưới đây là cách đóng gói và chạy thông qua docker-compose.

1. Tạo file Dockerfile

Tạo file Dockerfile ở thư mục gốc của dự án với cấu hình multi-stage build để tối ưu dung lượng:

# Stage 1: Dependencies
FROM node:22-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable pnpm && pnpm install --frozen-lockfile

# Stage 2: Builder
FROM node:22-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
# Tạo prisma client
RUN npx prisma generate
# Chạy build
RUN corepack enable pnpm && pnpm build

# Stage 3: Runner
FROM node:22-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
ENV PORT=3000

CMD ["node", "server.js"]

(Lưu ý: Để build mục standalone hoạt động, bạn cần bổ sung output: 'standalone' trong file next.config.mjs)

2. Tạo file docker-compose.yml

Sử dụng Docker Compose để chạy ứng dụng (giả sử Database của bạn được host riêng hoặc bạn có thể thêm service DB vào file này):

version: '3.8'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    image: reader-web:latest
    container_name: reader-app
    ports:
      - "3000:3000"
    env_file:
      - .env
    restart: unless-stopped

3. Khởi chạy bằng Docker

Chạy lệnh sau để build image và start container:

# Build và chạy ngầm (detached mode)
docker-compose up -d --build

Để xem log của container:

docker-compose logs -f web

Dừng và xóa container:

docker-compose down
S
Description
No description provided
Readme 2 MiB
Languages
TypeScript 98.2%
CSS 1.3%
JavaScript 0.4%
Dockerfile 0.1%