ComicViewer

I. Project Description

• Automatically read comic directories, support jpg/png/webp/gif/mp4/html files
• Front-end responsive, compatible with all device
• Thumbnails, quick page switching, folder display

---

II. Project Structure

• backend/ Node.js+Viewers API
• frontend/ React+Vite+Tailwind Frontend
• README.md

---

III. Deployment

1. Backend

1. Install Node.js、PM2
2. Upload backend folder, execute following codes via ssh: npm install
3. Modify comicsRoot in server.js
4. Set up at least one username and password in users.txt
5. Start PM2 service: pm2 start server.js --name comic-backend, pm2 save, pm2 startup

2. Frontend

1. Redirect to the frontend/ folder and execute: npm install, npm run build
2. Copy contents inside dist/ to the root folder of your website
3. Set up Reverse Proxy:

Nginx Example:

location /api/ {
  proxy_pass http://127.0.0.1:3001;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location / {
  root /www/wwwroot/你的站点目录;
  try_files $uri $uri/ /index.html;
}

3. Miscellaneous

• Default port is 3001, It is recommended to open only locally and use a reverse proxy for the external network
• Suggested to put each comic in a separate folder