AwsLinker/STATIC_SERVER_README.md

166 lines
3.5 KiB
Markdown
Raw Normal View History

2025-09-16 17:19:58 +08:00
# 静态文件服务器使用说明
本项目包含自定义的静态文件服务器支持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静态服务器。