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静态服务器。
|