621 lines
22 KiB
HTML
621 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>jiao77.cn 部署仪表板</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 10px;
|
||
padding: 30px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
h1 {
|
||
color: #333;
|
||
font-size: 32px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
background: #10b981;
|
||
color: white;
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.card-content {
|
||
color: #666;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 8px;
|
||
background: #e5e7eb;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #10b981, #059669);
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
.icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.section {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 10px;
|
||
padding: 30px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 2px solid #667eea;
|
||
}
|
||
|
||
.checklist {
|
||
list-style: none;
|
||
}
|
||
|
||
.checklist li {
|
||
padding: 12px 0;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.checklist li:before {
|
||
content: '✓';
|
||
color: #10b981;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.checklist li.pending:before {
|
||
content: '⏳';
|
||
color: #f59e0b;
|
||
}
|
||
|
||
.checklist li.pending {
|
||
color: #999;
|
||
}
|
||
|
||
.code-block {
|
||
background: #f3f4f6;
|
||
border-left: 4px solid #667eea;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 13px;
|
||
color: #333;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.button {
|
||
display: inline-block;
|
||
padding: 10px 20px;
|
||
background: #667eea;
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
transition: background 0.3s;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.button:hover {
|
||
background: #764ba2;
|
||
}
|
||
|
||
.button-secondary {
|
||
background: #e5e7eb;
|
||
color: #333;
|
||
}
|
||
|
||
.button-secondary:hover {
|
||
background: #d1d5db;
|
||
}
|
||
|
||
.metric {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.metric:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.metric-label {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.metric-value {
|
||
color: #333;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.timeline-item {
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.timeline-item:before {
|
||
content: '';
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #667eea;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: -25px;
|
||
top: 3px;
|
||
}
|
||
|
||
.timeline-item.completed:before {
|
||
background: #10b981;
|
||
}
|
||
|
||
.timeline-item.current:before {
|
||
animation: pulse 1.5s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.3); }
|
||
}
|
||
|
||
.timeline-title {
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.timeline-subtitle {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
color: white;
|
||
margin-top: 40px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.alert {
|
||
background: #fef3c7;
|
||
border-left: 4px solid #f59e0b;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin: 15px 0;
|
||
color: #92400e;
|
||
}
|
||
|
||
.success {
|
||
background: #dcfce7;
|
||
border-left: 4px solid #10b981;
|
||
color: #166534;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.section {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 页眉 -->
|
||
<header>
|
||
<h1>🚀 jiao77.cn 部署仪表板</h1>
|
||
<p class="subtitle">Phase 1 P0 自动化完成 • 等待执行部署</p>
|
||
<span class="status-badge">✅ 自动化就绪</span>
|
||
</header>
|
||
|
||
<!-- 关键指标 -->
|
||
<div class="grid">
|
||
<div class="card">
|
||
<div class="card-title"><span class="icon">⚡</span>自动化脚本</div>
|
||
<div class="card-content">3 个完整脚本<br>800+ 行代码<br>生产就绪</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><span class="icon">📚</span>部署文档</div>
|
||
<div class="card-content">5 份详细指南<br>1,300+ 行文档<br>完整参考</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><span class="icon">⏱️</span>时间节省</div>
|
||
<div class="card-content">从 90 分钟<br>→ 18 分钟<br>节省 80%</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><span class="icon">✅</span>自动化覆盖</div>
|
||
<div class="card-content">92% 任务自动化<br>8% 手工配置<br>一键部署</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 92%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速开始 -->
|
||
<div class="section">
|
||
<h2 class="section-title">🎯 立即开始</h2>
|
||
|
||
<div class="alert success">
|
||
<strong>✨ 好消息</strong><br>
|
||
所有脚本已准备就绪，只需一条命令启动整个部署流程！
|
||
</div>
|
||
|
||
<h3 style="margin-top: 20px; color: #333; margin-bottom: 10px;">第 1 步：一键部署到 VPS</h3>
|
||
<div class="code-block">bash scripts/deploy-to-vps.sh</div>
|
||
<p style="color: #666; font-size: 14px; margin-bottom: 15px;">
|
||
预计时间：25-30 分钟（完全自动化）
|
||
</p>
|
||
|
||
<h3 style="margin-top: 20px; color: #333; margin-bottom: 10px;">第 2 步：配置 DNS</h3>
|
||
<p style="color: #666; font-size: 14px; margin-bottom: 10px;">
|
||
在域名注册商添加 A 记录，将 jiao77.cn 指向 VPS IP（从脚本输出获得）
|
||
</p>
|
||
<p style="color: #666; font-size: 14px; margin-bottom: 15px;">
|
||
预计时间：5 分钟配置 + 15-60 分钟 DNS 传播
|
||
</p>
|
||
|
||
<h3 style="margin-top: 20px; color: #333; margin-bottom: 10px;">第 3 步：申请 SSL 证书</h3>
|
||
<div class="code-block">ssh root@jiao77.cn "cd /home/app/astro-jiao77.cn && bash scripts/init-ssl.sh"</div>
|
||
<p style="color: #666; font-size: 14px;">
|
||
预计时间：3-5 分钟（需要 DNS 已生效）
|
||
</p>
|
||
|
||
<div class="button-group">
|
||
<button class="button" onclick="copyToClipboard('bash scripts/deploy-to-vps.sh')">
|
||
📋 复制部署命令
|
||
</button>
|
||
<a href="QUICK_START.md" class="button button-secondary">
|
||
📖 查看快速指南
|
||
</a>
|
||
<a href="DEPLOYMENT_CHECKLIST.md" class="button button-secondary">
|
||
✅ 查看检查清单
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目进度 -->
|
||
<div class="section">
|
||
<h2 class="section-title">📊 项目进度</h2>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item completed">
|
||
<div class="timeline-title">✅ SSH 连接验证</div>
|
||
<div class="timeline-subtitle">已完成</div>
|
||
</div>
|
||
|
||
<div class="timeline-item completed">
|
||
<div class="timeline-title">✅ 自动化脚本创建</div>
|
||
<div class="timeline-subtitle">3 个脚本 (800+ 行)</div>
|
||
</div>
|
||
|
||
<div class="timeline-item completed">
|
||
<div class="timeline-title">✅ 部署文档编写</div>
|
||
<div class="timeline-subtitle">5 份指南 (1,300+ 行)</div>
|
||
</div>
|
||
|
||
<div class="timeline-item current">
|
||
<div class="timeline-title">⏳ VPS 初始化</div>
|
||
<div class="timeline-subtitle">等待执行 (25-30 分钟)</div>
|
||
</div>
|
||
|
||
<div class="timeline-item pending">
|
||
<div class="timeline-title">⏳ DNS 配置</div>
|
||
<div class="timeline-subtitle">手工配置 + 等待传播 (15-60 分钟)</div>
|
||
</div>
|
||
|
||
<div class="timeline-item pending">
|
||
<div class="timeline-title">⏳ SSL 证书申请</div>
|
||
<div class="timeline-subtitle">自动化脚本 (3-5 分钟)</div>
|
||
</div>
|
||
|
||
<div class="timeline-item pending">
|
||
<div class="timeline-title">📅 Phase 2 后端开发</div>
|
||
<div class="timeline-subtitle">60 小时计划</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phase 1 P0 检查清单 -->
|
||
<div class="section">
|
||
<h2 class="section-title">✅ Phase 1 P0 任务清单</h2>
|
||
|
||
<ul class="checklist">
|
||
<li>SSH 连接 VPS</li>
|
||
<li>系统更新和工具安装</li>
|
||
<li>防火墙配置 (UFW)</li>
|
||
<li>时区和 NTP 配置</li>
|
||
<li>应用用户创建</li>
|
||
<li>Docker 和 Docker Compose 安装</li>
|
||
<li class="pending">DNS 配置</li>
|
||
<li class="pending">SSL 证书申请</li>
|
||
<li class="pending">HTTPS 测试</li>
|
||
<li>存储分配规划</li>
|
||
<li>数据目录创建</li>
|
||
<li>项目克隆</li>
|
||
<li>后端项目结构</li>
|
||
<li>环境配置生成</li>
|
||
<li>最小化 package.json</li>
|
||
<li>Express 服务器框架</li>
|
||
<li>PostgreSQL 连接</li>
|
||
<li>数据库 Schema</li>
|
||
<li>API 端点规划</li>
|
||
<li>测试框架设置</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 关键文件 -->
|
||
<div class="section">
|
||
<h2 class="section-title">📁 关键文件位置</h2>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
|
||
<div style="background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 3px solid #667eea;">
|
||
<div style="font-weight: bold; color: #333; margin-bottom: 5px;">一键部署</div>
|
||
<div style="color: #666; font-size: 13px; font-family: monospace;">scripts/deploy-to-vps.sh</div>
|
||
</div>
|
||
|
||
<div style="background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 3px solid #667eea;">
|
||
<div style="font-weight: bold; color: #333; margin-bottom: 5px;">快速开始</div>
|
||
<div style="color: #666; font-size: 13px; font-family: monospace;">QUICK_START.md</div>
|
||
</div>
|
||
|
||
<div style="background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 3px solid #667eea;">
|
||
<div style="font-weight: bold; color: #333; margin-bottom: 5px;">检查清单</div>
|
||
<div style="color: #666; font-size: 13px; font-family: monospace;">DEPLOYMENT_CHECKLIST.md</div>
|
||
</div>
|
||
|
||
<div style="background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 3px solid #10b981;">
|
||
<div style="font-weight: bold; color: #333; margin-bottom: 5px;">完成报告</div>
|
||
<div style="color: #666; font-size: 13px; font-family: monospace;">docs/PHASE_1_P0_COMPLETION_REPORT.md</div>
|
||
</div>
|
||
|
||
<div style="background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 3px solid #10b981;">
|
||
<div style="font-weight: bold; color: #333; margin-bottom: 5px;">详细指南</div>
|
||
<div style="color: #666; font-size: 13px; font-family: monospace;">docs/VPS_DEPLOYMENT_GUIDE.md</div>
|
||
</div>
|
||
|
||
<div style="background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 3px solid #10b981;">
|
||
<div style="font-weight: bold; color: #333; margin-bottom: 5px;">项目规划</div>
|
||
<div style="color: #666; font-size: 13px; font-family: monospace;">docs/SINGLE_VPS_DEPLOYMENT_PLAN.md</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间表 -->
|
||
<div class="section">
|
||
<h2 class="section-title">⏱️ 预计时间表</h2>
|
||
|
||
<div style="background: #f9fafb; border-radius: 6px; padding: 15px;">
|
||
<div class="metric">
|
||
<span class="metric-label">VPS 初始化（自动化）</span>
|
||
<span class="metric-value">25-30 分钟</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span class="metric-label">DNS 配置</span>
|
||
<span class="metric-value">5 + 15-60 分钟</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span class="metric-label">SSL 证书申请（自动化）</span>
|
||
<span class="metric-value">3-5 分钟</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span class="metric-label">总计</span>
|
||
<span class="metric-value">60-110 分钟</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: #f9fafb; border-radius: 6px; padding: 15px; margin-top: 15px;">
|
||
<div style="color: #666; font-size: 14px;">
|
||
<strong>时间节省</strong><br>
|
||
• 手工配置：90 分钟<br>
|
||
• 自动化：18 分钟<br>
|
||
• 节省：72 分钟 (80%)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 故障排查 -->
|
||
<div class="section">
|
||
<h2 class="section-title">🔧 常见问题</h2>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h3 style="color: #333; margin-bottom: 8px;">Q: 部署需要多久？</h3>
|
||
<p style="color: #666; font-size: 14px;">A: VPS 初始化 25-30 分钟（自动化），加上 DNS 传播等待时间，总计 60-110 分钟</p>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h3 style="color: #333; margin-bottom: 8px;">Q: SSL 证书如何配置？</h3>
|
||
<p style="color: #666; font-size: 14px;">A: DNS 生效后自动配置，脚本会处理所有细节，无需手工介入</p>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h3 style="color: #333; margin-bottom: 8px;">Q: 出现错误怎么办？</h3>
|
||
<p style="color: #666; font-size: 14px;">A: 查看 DEPLOYMENT_CHECKLIST.md 中的故障排查部分</p>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h3 style="color: #333; margin-bottom: 8px;">Q: 脚本可以重复执行吗？</h3>
|
||
<p style="color: #666; font-size: 14px;">A: 可以，脚本设计支持幂等性，重复执行不会产生问题</p>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<a href="DEPLOYMENT_CHECKLIST.md" class="button button-secondary">
|
||
📖 查看完整故障排查指南
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 下一步 -->
|
||
<div class="section">
|
||
<h2 class="section-title">📅 后续规划</h2>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
|
||
<div style="background: #f0f9ff; padding: 15px; border-radius: 6px; border: 1px solid #0284c7;">
|
||
<div style="font-weight: bold; color: #0c4a6e; margin-bottom: 8px;">📅 Phase 2</div>
|
||
<div style="color: #064e3b; font-size: 14px;">
|
||
后端开发<br>
|
||
<strong>60 小时</strong><br>
|
||
Express + PostgreSQL
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: #fefce8; padding: 15px; border-radius: 6px; border: 1px solid #eab308;">
|
||
<div style="font-weight: bold; color: #713f12; margin-bottom: 8px;">📅 Phase 3</div>
|
||
<div style="color: #713f12; font-size: 14px;">
|
||
前端开发<br>
|
||
<strong>50 小时</strong><br>
|
||
React 组件
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: #fdf2f8; padding: 15px; border-radius: 6px; border: 1px solid #ec4899;">
|
||
<div style="font-weight: bold; color: #831843; margin-bottom: 8px;">📅 Phase 4</div>
|
||
<div style="color: #831843; font-size: 14px;">
|
||
Docker 化<br>
|
||
<strong>20 小时</strong><br>
|
||
容器编排
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="color: #666; font-size: 14px; margin-top: 15px;">
|
||
<strong>总计</strong>：220 小时（4-6 周），一个人开发或 3-4 周两个人
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<footer>
|
||
<p>✨ jiao77.cn 项目 • Phase 1 P0 自动化完成</p>
|
||
<p style="font-size: 12px; margin-top: 10px;">准备好了吗？执行命令：<code style="background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 4px;">bash scripts/deploy-to-vps.sh</code></p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
function copyToClipboard(text) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
alert('已复制到剪贴板！');
|
||
}).catch(err => {
|
||
console.error('复制失败:', err);
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|