# 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