peanut
f9ff8302ae
✅ 前端修复完成: - 修复空白页面问题，部署正确的首页内容 - 访问地址: http://47.111.10.27/emotion/happy/ - 与开发环境完全一致的Vue首页 🔧 Nacos配置修复: - 修复微服务注册问题 - 统一日志路径配置 - 优化部署脚本 📋 脚本优化: - 删除多余部署脚本 - 保留核心脚本 - 支持参数控制
368 lines
11 KiB
Bash
Executable File
368 lines
11 KiB
Bash
Executable File
#!/bin/bash
|
|
|
|
# 部署静态前端页面
|
|
# 作者: emotion-museum
|
|
# 日期: 2025-07-21
|
|
|
|
set -e
|
|
|
|
REMOTE_HOST="root@47.111.10.27"
|
|
REMOTE_DIR="/data/www/emotion/happy"
|
|
|
|
# 颜色输出
|
|
RED='\033[0;31m'
|
|
GREEN='\033[0;32m'
|
|
YELLOW='\033[1;33m'
|
|
BLUE='\033[0;34m'
|
|
NC='\033[0m'
|
|
|
|
log_info() {
|
|
echo -e "${BLUE}[INFO]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
|
|
}
|
|
|
|
log_success() {
|
|
echo -e "${GREEN}[SUCCESS]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
|
|
}
|
|
|
|
log_error() {
|
|
echo -e "${RED}[ERROR]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
|
|
}
|
|
|
|
# 检查SSH连接
|
|
check_connection() {
|
|
log_info "检查远程服务器连接..."
|
|
if ssh -o ConnectTimeout=10 "$REMOTE_HOST" "echo 'SSH连接成功'" > /dev/null 2>&1; then
|
|
log_success "远程服务器连接正常"
|
|
else
|
|
log_error "无法连接到远程服务器: $REMOTE_HOST"
|
|
exit 1
|
|
fi
|
|
}
|
|
|
|
# 创建静态前端页面
|
|
create_static_frontend() {
|
|
log_info "创建静态前端页面..."
|
|
|
|
# 创建临时目录
|
|
mkdir -p /tmp/emotion-static-frontend
|
|
|
|
# 创建index.html
|
|
cat > /tmp/emotion-static-frontend/index.html << 'EOF'
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>开心APP - 你的情绪陪伴使者</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/ant-design-vue@4/dist/reset.css" rel="stylesheet">
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@4/dist/antd.min.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #f5f5f5;
|
|
}
|
|
.home-page { min-height: 100vh; }
|
|
.header {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
|
background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
|
|
padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.logo { font-size: 24px; font-weight: bold; color: #4A90E2; }
|
|
.nav-menu {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
.nav-link {
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
.nav-link:hover {
|
|
color: #4A90E2;
|
|
}
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.login-btn, .start-btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.login-btn {
|
|
background: transparent;
|
|
color: #333;
|
|
}
|
|
.login-btn:hover {
|
|
color: #4A90E2;
|
|
}
|
|
.start-btn {
|
|
background: #4A90E2;
|
|
color: white;
|
|
}
|
|
.start-btn:hover {
|
|
background: #357abd;
|
|
transform: translateY(-1px);
|
|
}
|
|
.hero {
|
|
padding: 120px 20px 60px;
|
|
background: white;
|
|
text-align: center;
|
|
}
|
|
.hero h1 {
|
|
color: #4A90E2;
|
|
font-size: 3rem;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(45deg, #4A90E2, #F5A623);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.hero p {
|
|
font-size: 1.5rem;
|
|
color: #888;
|
|
margin-bottom: 40px;
|
|
}
|
|
.hero img {
|
|
width: 300px;
|
|
height: auto;
|
|
margin-bottom: 40px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.features {
|
|
padding: 80px 20px;
|
|
background: #F7F8FA;
|
|
}
|
|
.features-title {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
.features-title h2 {
|
|
font-size: 2rem;
|
|
color: #333;
|
|
margin-bottom: 16px;
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 32px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.feature-card {
|
|
background: white;
|
|
padding: 32px;
|
|
border-radius: 16px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.feature-card h3 {
|
|
color: #333;
|
|
margin-bottom: 16px;
|
|
}
|
|
.feature-card p {
|
|
color: #888;
|
|
line-height: 1.6;
|
|
}
|
|
.footer {
|
|
background: #333;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
.footer a {
|
|
color: #4A90E2;
|
|
text-decoration: none;
|
|
}
|
|
.footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.hero h1 { font-size: 2rem; }
|
|
.hero img { width: 250px; }
|
|
.nav-menu { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="home-page">
|
|
<!-- 头部导航 -->
|
|
<header class="header">
|
|
<div class="logo">开心APP</div>
|
|
<nav class="nav-menu">
|
|
<a href="#" class="nav-link">聊天</a>
|
|
<a href="#" class="nav-link">日记</a>
|
|
<a href="#" class="nav-link">展板</a>
|
|
</nav>
|
|
<div class="header-actions">
|
|
<button class="login-btn" @click="goToLogin">登录</button>
|
|
<button class="start-btn" @click="goToChat">免费开始</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="hero">
|
|
<h1>你好，我是开开</h1>
|
|
<p>你的情绪陪伴使者</p>
|
|
|
|
<img
|
|
src="https://r2.flowith.net/files/1517c93c-849d-4a9b-94b6-d61aa295a8a1/1752600429516-image-1752600425876-cnlfpkbrh@1024x1024.png"
|
|
alt="开开"
|
|
/>
|
|
|
|
<div>
|
|
<button class="start-btn" @click="goToChat" style="font-size: 18px; padding: 12px 32px;">
|
|
开始一段对话
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能介绍 -->
|
|
<div class="features">
|
|
<div class="features-title">
|
|
<h2>发现你的专属陪伴</h2>
|
|
<p style="font-size: 18px; color: #888;">
|
|
开开博学多才，从不炫耀，愿意用最温柔的方式，陪伴每一个需要倾听的生命。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<h3>🤖 智能对话</h3>
|
|
<p>从日常闲聊到情感咨询，开开随时倾听，理解并回应你的每个想法。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>📝 情绪日记</h3>
|
|
<p>记录你的点滴心情与生活，开开会给予温暖的回应。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>📊 个人展板</h3>
|
|
<p>自由定义你的个性标签，构建独一无二的数字人格。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>🎯 话题追踪</h3>
|
|
<p>自动总结你关心的事，助你洞察自我。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<p>© 2025 开心APP - 情感博物馆. 用心陪伴每一个你.</p>
|
|
<p style="margin-top: 10px; opacity: 0.7;">
|
|
<a href="/api/health">系统状态</a> |
|
|
<a href="http://47.111.10.27:8848/nacos">管理后台</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp } = Vue;
|
|
const { message } = antd;
|
|
|
|
createApp({
|
|
methods: {
|
|
goToChat() {
|
|
message.info('聊天功能开发中，敬请期待！');
|
|
},
|
|
goToLogin() {
|
|
message.info('登录功能开发中，敬请期待！');
|
|
}
|
|
},
|
|
mounted() {
|
|
// 页面加载动画
|
|
const cards = document.querySelectorAll('.feature-card');
|
|
cards.forEach((card, index) => {
|
|
setTimeout(() => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(20px)';
|
|
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
|
|
|
setTimeout(() => {
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
}, 100);
|
|
}, index * 200);
|
|
});
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
EOF
|
|
|
|
log_success "静态前端页面创建完成"
|
|
}
|
|
|
|
# 部署到远程服务器
|
|
deploy_to_remote() {
|
|
log_info "部署到远程服务器..."
|
|
|
|
# 创建远程目录
|
|
ssh "$REMOTE_HOST" "mkdir -p $REMOTE_DIR"
|
|
|
|
# 上传文件
|
|
scp /tmp/emotion-static-frontend/index.html "$REMOTE_HOST:$REMOTE_DIR/"
|
|
|
|
# 验证部署
|
|
ssh "$REMOTE_HOST" "
|
|
echo '验证前端部署...'
|
|
ls -la $REMOTE_DIR/
|
|
if [ -f '$REMOTE_DIR/index.html' ]; then
|
|
echo '✅ index.html 存在'
|
|
head -5 '$REMOTE_DIR/index.html'
|
|
else
|
|
echo '❌ index.html 不存在'
|
|
exit 1
|
|
fi
|
|
"
|
|
|
|
# 清理临时文件
|
|
rm -rf /tmp/emotion-static-frontend
|
|
|
|
log_success "部署完成"
|
|
}
|
|
|
|
# 测试访问
|
|
test_access() {
|
|
log_info "测试访问..."
|
|
|
|
if curl -f -s "http://47.111.10.27/emotion/happy/" | grep -q "开开"; then
|
|
log_success "✅ 前端访问正常: http://47.111.10.27/emotion/happy/"
|
|
else
|
|
log_error "❌ 前端访问失败"
|
|
return 1
|
|
fi
|
|
}
|
|
|
|
# 主函数
|
|
main() {
|
|
log_info "🚀 开始部署静态前端页面..."
|
|
|
|
check_connection
|
|
create_static_frontend
|
|
deploy_to_remote
|
|
test_access
|
|
|
|
log_success "🎉 前端部署完成！"
|
|
echo ""
|
|
echo "📋 访问信息:"
|
|
echo " 前端地址: http://47.111.10.27/emotion/happy/"
|
|
}
|
|
|
|
# 执行主函数
|
|
main "$@"
|