56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
# 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** to the folder that stores all your comics
|
|
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/YourSiteRootAddress;
|
|
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
|
|
|