166 lines
3.5 KiB
Markdown
166 lines
3.5 KiB
Markdown
# 静态文件服务器使用说明
|
||
|
||
本项目包含自定义的静态文件服务器，支持Next.js静态导出和自定义404页面。
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 构建静态文件
|
||
```bash
|
||
npm run build:static
|
||
```
|
||
|
||
### 2. 启动静态服务器
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
### 3. 访问网站
|
||
打开浏览器访问：http://localhost:8080
|
||
|
||
## 📋 可用命令
|
||
|
||
| 命令 | 说明 |
|
||
|------|------|
|
||
| `npm run preview` | 使用自定义服务器（推荐） |
|
||
| `npm run preview:simple` | 使用Python简单服务器 |
|
||
| `node scripts/serve-static.js [端口]` | 直接运行Node.js服务器 |
|
||
|
||
## ✨ 功能特性
|
||
|
||
### 🎯 自定义404页面
|
||
- 智能语言检测
|
||
- 美观的错误页面设计
|
||
- 文章缺失特殊提示
|
||
- 快捷导航链接
|
||
|
||
### 🛡️ 安全特性
|
||
- 防止目录遍历攻击
|
||
- 安全HTTP头设置
|
||
- 适当的缓存控制
|
||
|
||
### 📱 路由处理
|
||
- 支持Next.js静态路由
|
||
- 自动index.html查找
|
||
- HTML扩展名自动补全
|
||
|
||
## 🔧 配置选项
|
||
|
||
### 端口配置
|
||
```bash
|
||
# 使用8080端口（默认）
|
||
npm run preview
|
||
|
||
# 使用自定义端口
|
||
node scripts/serve-static.js 3000
|
||
|
||
# 指定服务目录
|
||
node scripts/serve-static.js 8080 ./build
|
||
```
|
||
|
||
### 环境变量
|
||
无特殊环境变量要求，开箱即用。
|
||
|
||
## 🐛 故障排除
|
||
|
||
### 问题：端口已被占用
|
||
```
|
||
❌ 错误: 端口 8080 已被占用
|
||
```
|
||
**解决方案：**
|
||
```bash
|
||
# 使用其他端口
|
||
node scripts/serve-static.js 8081
|
||
```
|
||
|
||
### 问题：out目录不存在
|
||
```
|
||
❌ 错误: 目录 'out' 不存在
|
||
```
|
||
**解决方案：**
|
||
```bash
|
||
# 先构建静态文件
|
||
npm run build:static
|
||
```
|
||
|
||
### 问题：404页面不显示
|
||
确保以下文件存在：
|
||
- `out/404.html` （优先）
|
||
- `public/404.html` （备用）
|
||
|
||
## 📁 目录结构
|
||
|
||
```
|
||
project/
|
||
├── out/ # 静态构建输出
|
||
│ ├── index.html # 首页
|
||
│ ├── 404.html # 自定义404页面
|
||
│ ├── zh-CN/ # 简体中文页面
|
||
│ ├── zh-TW/ # 繁体中文页面
|
||
│ └── en/ # 英文页面
|
||
├── scripts/
|
||
│ ├── serve-static.js # Node.js静态服务器
|
||
│ └── serve-static.py # Python静态服务器（备用）
|
||
└── public/
|
||
└── 404.html # 备用404页面
|
||
```
|
||
|
||
## 🌐 部署到生产环境
|
||
|
||
### Nginx配置示例
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
root /path/to/out;
|
||
index index.html;
|
||
|
||
# 处理Next.js路由
|
||
location / {
|
||
try_files $uri $uri.html $uri/ /404.html;
|
||
}
|
||
|
||
# 自定义404页面
|
||
error_page 404 /404.html;
|
||
|
||
# 静态资源缓存
|
||
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
}
|
||
```
|
||
|
||
### Apache .htaccess配置
|
||
```apache
|
||
RewriteEngine On
|
||
|
||
# 处理Next.js路由
|
||
RewriteCond %{REQUEST_FILENAME} !-f
|
||
RewriteCond %{REQUEST_FILENAME} !-d
|
||
RewriteRule ^(.*)$ /$1.html [L]
|
||
|
||
# 如果HTML文件也不存在，返回404
|
||
RewriteCond %{REQUEST_FILENAME} !-f
|
||
RewriteRule ^(.*)$ /404.html [L]
|
||
|
||
# 自定义错误页面
|
||
ErrorDocument 404 /404.html
|
||
|
||
# 静态资源缓存
|
||
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$">
|
||
ExpiresActive On
|
||
ExpiresDefault "access plus 1 year"
|
||
</FilesMatch>
|
||
```
|
||
|
||
## 📞 技术支持
|
||
|
||
如果遇到问题，请检查：
|
||
1. Node.js版本 >= 14
|
||
2. 静态文件已正确构建
|
||
3. 端口未被占用
|
||
4. 防火墙设置
|
||
|
||
---
|
||
|
||
**注意：** 生产环境建议使用专业的Web服务器（如Nginx、Apache）而不是Node.js静态服务器。 |