286 lines
6.5 KiB
Markdown
286 lines
6.5 KiB
Markdown
|
# 部署检查清单
|
|||
|
|
|
|||
|
|
## 📋 预部署检查
|
|||
|
|
|
|||
|
|
### 代码质量
|
|||
|
|
- [ ] 所有HTML文件通过W3C验证
|
|||
|
|
- [ ] CSS文件通过CSS验证器检查
|
|||
|
|
- [ ] JavaScript代码无语法错误
|
|||
|
|
- [ ] 控制台无错误和警告
|
|||
|
|
|
|||
|
|
### 功能测试
|
|||
|
|
- [ ] 导航功能在所有设备上正常工作
|
|||
|
|
- [ ] 表单验证和提交功能正常
|
|||
|
|
- [ ] 所有链接有效且无404错误
|
|||
|
|
- [ ] 响应式设计在所有断点正常
|
|||
|
|
- [ ] 动画和过渡效果流畅
|
|||
|
|
|
|||
|
|
### 性能优化
|
|||
|
|
- [ ] 图片已压缩并转换为WebP格式
|
|||
|
|
- [ ] CSS和JavaScript文件已压缩
|
|||
|
|
- [ ] 启用Gzip压缩
|
|||
|
|
- [ ] 配置适当的缓存头
|
|||
|
|
- [ ] 移除未使用的CSS和JS代码
|
|||
|
|
|
|||
|
|
### 可访问性
|
|||
|
|
- [ ] 通过WCAG 2.1 AA标准检查
|
|||
|
|
- [ ] 所有图片有alt文本
|
|||
|
|
- [ ] 表单有正确的标签和ARIA属性
|
|||
|
|
- [ ] 颜色对比度符合标准
|
|||
|
|
- [ ] 键盘导航正常工作
|
|||
|
|
|
|||
|
|
### 安全性
|
|||
|
|
- [ ] 所有外部链接使用`rel="noopener noreferrer"`
|
|||
|
|
- [ ] 表单有CSRF保护（如适用）
|
|||
|
|
- [ ] 无敏感信息硬编码
|
|||
|
|
- [ ] 使用HTTPS协议
|
|||
|
|
|
|||
|
|
## 🚀 部署步骤
|
|||
|
|
|
|||
|
|
### 1. 生产环境构建
|
|||
|
|
```bash
|
|||
|
|
# 压缩CSS
|
|||
|
|
css-minify -f style.css -o dist/css/
|
|||
|
|
css-minify -f responsive.css -o dist/css/
|
|||
|
|
|
|||
|
|
# 压缩JavaScript
|
|||
|
|
uglifyjs main.js -o dist/js/main.min.js -c -m
|
|||
|
|
|
|||
|
|
# 优化HTML（移除注释、空白等）
|
|||
|
|
html-minifier --collapse-whitespace index.html -o dist/index.html
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 图片优化
|
|||
|
|
```bash
|
|||
|
|
# 转换图片为WebP格式
|
|||
|
|
cwebp -q 80 image.jpg -o image.webp
|
|||
|
|
|
|||
|
|
# 压缩PNG图片
|
|||
|
|
pngquant --quality=65-80 image.png
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 文件结构
|
|||
|
|
```
|
|||
|
|
dist/
|
|||
|
|
├── index.html
|
|||
|
|
├── css/
|
|||
|
|
│ ├── style.min.css
|
|||
|
|
│ ├── responsive.min.css
|
|||
|
|
│ └── variables.css
|
|||
|
|
├── js/
|
|||
|
|
│ └── main.min.js
|
|||
|
|
├── images/
|
|||
|
|
│ ├── avatar.webp
|
|||
|
|
│ └── projects/
|
|||
|
|
└── assets/
|
|||
|
|
└── favicon.ico
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 服务器配置
|
|||
|
|
|
|||
|
|
#### Nginx配置示例
|
|||
|
|
```nginx
|
|||
|
|
server {
|
|||
|
|
listen 80;
|
|||
|
|
server_name lijianhua.dev www.lijianhua.dev;
|
|||
|
|
|
|||
|
|
# 重定向到HTTPS
|
|||
|
|
return 301 https://$server_name$request_uri;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
server {
|
|||
|
|
listen 443 ssl http2;
|
|||
|
|
server_name lijianhua.dev www.lijianhua.dev;
|
|||
|
|
|
|||
|
|
ssl_certificate /path/to/certificate.crt;
|
|||
|
|
ssl_certificate_key /path/to/private.key;
|
|||
|
|
|
|||
|
|
root /var/www/portfolio;
|
|||
|
|
index index.html;
|
|||
|
|
|
|||
|
|
# Gzip压缩
|
|||
|
|
gzip on;
|
|||
|
|
gzip_vary on;
|
|||
|
|
gzip_min_length 1024;
|
|||
|
|
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
|||
|
|
|
|||
|
|
# 缓存头
|
|||
|
|
location ~* \.(jpg|jpeg|png|gif|ico|css|js|webp)$ {
|
|||
|
|
expires 1y;
|
|||
|
|
add_header Cache-Control "public, immutable";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
# 安全头
|
|||
|
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
|||
|
|
add_header X-Content-Type-Options "nosniff" always;
|
|||
|
|
add_header X-XSS-Protection "1; mode=block" always;
|
|||
|
|
|
|||
|
|
# 错误页面
|
|||
|
|
error_page 404 /404.html;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Apache配置示例
|
|||
|
|
```apache
|
|||
|
|
<VirtualHost *:80>
|
|||
|
|
ServerName lijianhua.dev
|
|||
|
|
ServerAlias www.lijianhua.dev
|
|||
|
|
|
|||
|
|
Redirect permanent / https://lijianhua.dev/
|
|||
|
|
</VirtualHost>
|
|||
|
|
|
|||
|
|
<VirtualHost *:443>
|
|||
|
|
ServerName lijianhua.dev
|
|||
|
|
ServerAlias www.lijianhua.dev
|
|||
|
|
|
|||
|
|
SSLEngine on
|
|||
|
|
SSLCertificateFile /path/to/certificate.crt
|
|||
|
|
SSLCertificateKeyFile /path/to/private.key
|
|||
|
|
|
|||
|
|
DocumentRoot /var/www/portfolio
|
|||
|
|
|
|||
|
|
# 启用压缩
|
|||
|
|
AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript
|
|||
|
|
|
|||
|
|
# 缓存头
|
|||
|
|
<FilesMatch "\.(jpg|jpeg|png|gif|ico|css|js|webp)$">
|
|||
|
|
Header set Cache-Control "public, max-age=31536000, immutable"
|
|||
|
|
</FilesMatch>
|
|||
|
|
|
|||
|
|
# 安全头
|
|||
|
|
Header always set X-Frame-Options "SAMEORIGIN"
|
|||
|
|
Header always set X-Content-Type-Options "nosniff"
|
|||
|
|
Header always set X-XSS-Protection "1; mode=block"
|
|||
|
|
</VirtualHost>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. 静态托管服务
|
|||
|
|
|
|||
|
|
#### GitHub Pages
|
|||
|
|
1. 创建GitHub仓库
|
|||
|
|
2. 推送代码到`main`分支
|
|||
|
|
3. 在Settings > Pages中启用GitHub Pages
|
|||
|
|
4. 配置自定义域名（可选）
|
|||
|
|
|
|||
|
|
#### Netlify
|
|||
|
|
1. 连接Git仓库
|
|||
|
|
2. 配置构建命令（如无需构建则留空）
|
|||
|
|
3. 设置发布目录为`dist/`
|
|||
|
|
4. 配置自定义域名和SSL
|
|||
|
|
|
|||
|
|
#### Vercel
|
|||
|
|
1. 导入Git仓库
|
|||
|
|
2. 选择框架为静态网站
|
|||
|
|
3. 配置输出目录为`dist/`
|
|||
|
|
4. 部署并配置域名
|
|||
|
|
|
|||
|
|
## 📊 部署后验证
|
|||
|
|
|
|||
|
|
### 功能验证
|
|||
|
|
- [ ] 网站可通过域名访问
|
|||
|
|
- [ ] HTTPS证书有效
|
|||
|
|
- [ ] 所有页面加载正常
|
|||
|
|
- [ ] 表单提交功能正常
|
|||
|
|
- [ ] 移动端访问正常
|
|||
|
|
|
|||
|
|
### 性能测试
|
|||
|
|
- [ ] Google PageSpeed Insights测试
|
|||
|
|
- [ ] WebPageTest性能分析
|
|||
|
|
- [ ] Lighthouse审计通过
|
|||
|
|
- [ ] 核心Web指标达标
|
|||
|
|
|
|||
|
|
### 监控设置
|
|||
|
|
- [ ] Google Analytics集成
|
|||
|
|
- [ ] 错误监控（如Sentry）
|
|||
|
|
- [ ] 性能监控（如New Relic）
|
|||
|
|
- [ ] 正常运行时间监控
|
|||
|
|
|
|||
|
|
## 🔧 维护计划
|
|||
|
|
|
|||
|
|
### 日常维护
|
|||
|
|
- [ ] 每月检查链接有效性
|
|||
|
|
- [ ] 每季度更新项目内容
|
|||
|
|
- [ ] 监控网站性能指标
|
|||
|
|
- [ ] 备份网站数据
|
|||
|
|
|
|||
|
|
### 安全维护
|
|||
|
|
- [ ] 定期更新SSL证书
|
|||
|
|
- [ ] 监控安全漏洞
|
|||
|
|
- [ ] 定期安全扫描
|
|||
|
|
- [ ] 保持依赖项更新
|
|||
|
|
|
|||
|
|
### 内容更新
|
|||
|
|
1. 更新项目信息
|
|||
|
|
- 编辑`index.html`中的项目部分
|
|||
|
|
- 添加新项目图片到`images/projects/`
|
|||
|
|
- 更新项目描述和技术栈
|
|||
|
|
|
|||
|
|
2. 更新个人信息
|
|||
|
|
- 修改联系方式
|
|||
|
|
- 更新技能列表
|
|||
|
|
- 更换头像图片
|
|||
|
|
|
|||
|
|
3. 更新样式
|
|||
|
|
- 修改`css/variables.css`中的颜色变量
|
|||
|
|
- 更新`css/style.css`中的样式
|
|||
|
|
- 测试响应式布局
|
|||
|
|
|
|||
|
|
## 🚨 故障排除
|
|||
|
|
|
|||
|
|
### 常见问题
|
|||
|
|
|
|||
|
|
#### 1. 网站无法访问
|
|||
|
|
- 检查DNS解析
|
|||
|
|
- 验证服务器状态
|
|||
|
|
- 检查防火墙设置
|
|||
|
|
- 查看错误日志
|
|||
|
|
|
|||
|
|
#### 2. HTTPS证书问题
|
|||
|
|
- 确保证书未过期
|
|||
|
|
- 检查证书链完整性
|
|||
|
|
- 验证域名匹配
|
|||
|
|
- 重启Web服务器
|
|||
|
|
|
|||
|
|
#### 3. 性能问题
|
|||
|
|
- 检查图片大小和格式
|
|||
|
|
- 验证缓存头设置
|
|||
|
|
- 分析网络请求
|
|||
|
|
- 优化JavaScript代码
|
|||
|
|
|
|||
|
|
#### 4. 移动端问题
|
|||
|
|
- 测试不同设备
|
|||
|
|
- 检查视口设置
|
|||
|
|
- 验证触摸事件
|
|||
|
|
- 测试不同网络条件
|
|||
|
|
|
|||
|
|
### 紧急联系人
|
|||
|
|
- **技术负责人**: 李建华 (138-0003-0003)
|
|||
|
|
- **托管服务商**: [服务商联系方式]
|
|||
|
|
- **域名注册商**: [注册商联系方式]
|
|||
|
|
- **SSL证书提供商**: [证书提供商联系方式]
|
|||
|
|
|
|||
|
|
## 📈 成功指标
|
|||
|
|
|
|||
|
|
### 技术指标
|
|||
|
|
- ✅ Lighthouse评分 > 90
|
|||
|
|
- ✅ 首次内容绘制 < 1.5秒
|
|||
|
|
- ✅ 累计布局偏移 < 0.1
|
|||
|
|
- ✅ 无控制台错误
|
|||
|
|
|
|||
|
|
### 业务指标
|
|||
|
|
- ✅ 用户访问量稳定
|
|||
|
|
- ✅ 表单提交成功率 > 95%
|
|||
|
|
- ✅ 移动端访问占比合理
|
|||
|
|
- ✅ 用户停留时间适中
|
|||
|
|
|
|||
|
|
### 可访问性指标
|
|||
|
|
- ✅ WCAG 2.1 AA合规
|
|||
|
|
- ✅ 屏幕阅读器兼容
|
|||
|
|
- ✅ 键盘导航完整
|
|||
|
|
- ✅ 颜色对比度达标
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**最后更新**: 2026-04-01
|
|||
|
|
**版本**: v1.0
|
|||
|
|
**负责人**: 李建华
|