Add deployment configuration and scripts

- Added DEPLOY.md with detailed deployment instructions - Created Dockerfile for containerized deployment - Added docker-compose.yml for easy Docker deployment - Created deploy.sh automated deployment script - Added .dockerignore to optimize Docker builds This ensures all dependencies are properly installed on remote servers 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
2025-09-30 19:57:38 +08:00
parent c9cbb042b5
commit 6d10485b10
5 changed files with 375 additions and 0 deletions
@@ -0,0 +1,12 @@
+node_modules
+dist
+.git
+.github
+.gitignore
+README.md
+.env
+.env.local
+.vscode
+.idea
+*.log
+.DS_Store
@@ -0,0 +1,148 @@
+# 部署说明
+
+## 远程服务器部署步骤
+
+### 1. 克隆代码
+```bash
+git clone [email protected]:BrunoGao/website.git
+cd website
+```
+
+### 2. 安装依赖（重要）
+```bash
+# 如果使用 npm
+npm install
+
+# 如果使用 pnpm（推荐）
+pnpm install
+
+# 如果使用 yarn
+yarn install
+```
+
+### 3. 构建项目
+```bash
+npm run build
+```
+
+### 4. 启动服务
+
+#### 开发环境
+```bash
+npm run dev
+```
+
+#### 生产环境预览
+```bash
+npm run preview
+```
+
+#### 使用 PM2 部署（生产环境）
+```bash
+# 安装 PM2
+npm install -g pm2
+
+# 启动应用
+pm2 start npm --name "omniverse-website" -- run preview
+
+# 查看状态
+pm2 status
+
+# 查看日志
+pm2 logs omniverse-website
+```
+
+## Docker 部署（推荐）
+
+创建 Dockerfile 已包含所有依赖：
+
+```dockerfile
+FROM node:18-alpine
+
+WORKDIR /app
+
+# 复制 package.json 和 lock 文件
+COPY package*.json ./
+COPY pnpm-lock.yaml ./
+
+# 安装 pnpm
+RUN npm install -g pnpm
+
+# 安装依赖
+RUN pnpm install
+
+# 复制源代码
+COPY . .
+
+# 构建
+RUN npm run build
+
+# 暴露端口
+EXPOSE 5173
+
+# 启动应用
+CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0"]
+```
+
+## 常见问题
+
+### 1. 依赖安装失败
+- 确保 Node.js 版本 >= 18.0.0
+- 清除缓存：`npm cache clean --force`
+- 删除 node_modules 和 lock 文件重新安装
+
+### 2. 构建失败
+- 检查所有依赖是否安装完整
+- 确保 TypeScript 配置正确
+- 查看错误日志定位问题
+
+### 3. 端口被占用
+- 修改 vite.config.ts 中的端口配置
+- 或使用环境变量：`PORT=5175 npm run dev`
+
+## 依赖说明
+
+所有项目依赖都已在 `package.json` 中声明，包括：
+
+- **核心依赖**
+  - react: React 框架
+  - react-dom: React DOM 渲染
+  - react-router-dom: 路由管理
+  - framer-motion: 动画库
+  - i18next & react-i18next: 国际化
+  - lucide-react: 图标库
+
+- **内容渲染**
+  - react-markdown: Markdown 渲染
+  - react-syntax-highlighter: 代码高亮
+
+- **开发工具**
+  - vite: 构建工具
+  - typescript: 类型检查
+  - tailwindcss: CSS 框架
+  - eslint: 代码检查
+
+## 环境变量
+
+创建 `.env` 文件（如需要）：
+
+```env
+VITE_API_URL=https://api.example.com
+VITE_APP_TITLE=OmniVerse
+```
+
+## 更新部署
+
+```bash
+# 拉取最新代码
+git pull origin main
+
+# 安装新依赖（如果有）
+pnpm install
+
+# 重新构建
+npm run build
+
+# 重启服务
+pm2 restart omniverse-website
+```
@@ -0,0 +1,41 @@
+# Build stage
+FROM node:18-alpine as builder
+
+WORKDIR /app
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install pnpm and serve
+RUN npm install -g pnpm serve
+
+# Copy built files from builder
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/pnpm-lock.yaml ./
+
+# Install production dependencies only
+RUN pnpm install --prod --frozen-lockfile
+
+# Expose port
+EXPOSE 5173
+
+# Start the application
+CMD ["serve", "-s", "dist", "-l", "5173"]
@@ -0,0 +1,156 @@
+#!/bin/bash
+
+# 部署脚本 - 自动化部署流程
+
+set -e  # 遇到错误立即退出
+
+echo "🚀 开始部署 OmniVerse Website..."
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# 检查 Node.js 版本
+check_node_version() {
+    echo "📋 检查 Node.js 版本..."
+    NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+    if [ "$NODE_VERSION" -lt 18 ]; then
+        echo -e "${RED}❌ Node.js 版本必须 >= 18.0.0${NC}"
+        exit 1
+    fi
+    echo -e "${GREEN}✅ Node.js 版本检查通过${NC}"
+}
+
+# 拉取最新代码
+pull_latest_code() {
+    echo "📥 拉取最新代码..."
+    git pull origin main
+    echo -e "${GREEN}✅ 代码更新完成${NC}"
+}
+
+# 安装依赖
+install_dependencies() {
+    echo "📦 安装依赖..."
+    
+    # 检查使用哪个包管理器
+    if [ -f "pnpm-lock.yaml" ]; then
+        echo "使用 pnpm 安装..."
+        if ! command -v pnpm &> /dev/null; then
+            echo "安装 pnpm..."
+            npm install -g pnpm
+        fi
+        pnpm install --frozen-lockfile
+    elif [ -f "yarn.lock" ]; then
+        echo "使用 yarn 安装..."
+        yarn install --frozen-lockfile
+    else
+        echo "使用 npm 安装..."
+        npm ci
+    fi
+    
+    echo -e "${GREEN}✅ 依赖安装完成${NC}"
+}
+
+# 构建项目
+build_project() {
+    echo "🔨 构建项目..."
+    npm run build
+    echo -e "${GREEN}✅ 构建完成${NC}"
+}
+
+# 使用 Docker 部署
+deploy_with_docker() {
+    echo "🐳 使用 Docker 部署..."
+    
+    # 检查 Docker 是否安装
+    if ! command -v docker &> /dev/null; then
+        echo -e "${YELLOW}⚠️  Docker 未安装，跳过 Docker 部署${NC}"
+        return
+    fi
+    
+    # 停止旧容器
+    docker-compose down || true
+    
+    # 构建并启动新容器
+    docker-compose up -d --build
+    
+    echo -e "${GREEN}✅ Docker 部署完成${NC}"
+}
+
+# 使用 PM2 部署
+deploy_with_pm2() {
+    echo "🔄 使用 PM2 部署..."
+    
+    # 检查 PM2 是否安装
+    if ! command -v pm2 &> /dev/null; then
+        echo "安装 PM2..."
+        npm install -g pm2
+    fi
+    
+    # 停止旧进程
+    pm2 stop omniverse-website || true
+    pm2 delete omniverse-website || true
+    
+    # 启动新进程
+    pm2 start npm --name "omniverse-website" -- run preview -- --host 0.0.0.0
+    
+    # 保存 PM2 配置
+    pm2 save
+    pm2 startup || true
+    
+    echo -e "${GREEN}✅ PM2 部署完成${NC}"
+}
+
+# 健康检查
+health_check() {
+    echo "🏥 执行健康检查..."
+    sleep 5
+    
+    if curl -f http://localhost:5173 &> /dev/null; then
+        echo -e "${GREEN}✅ 服务运行正常${NC}"
+    else
+        echo -e "${RED}❌ 服务启动失败${NC}"
+        exit 1
+    fi
+}
+
+# 主流程
+main() {
+    echo "选择部署方式:"
+    echo "1) Docker 部署（推荐）"
+    echo "2) PM2 部署"
+    echo "3) 仅构建"
+    read -p "请输入选项 (1/2/3): " choice
+    
+    check_node_version
+    pull_latest_code
+    install_dependencies
+    build_project
+    
+    case $choice in
+        1)
+            deploy_with_docker
+            ;;
+        2)
+            deploy_with_pm2
+            ;;
+        3)
+            echo -e "${GREEN}✅ 构建完成，请手动部署${NC}"
+            ;;
+        *)
+            echo -e "${RED}❌ 无效选项${NC}"
+            exit 1
+            ;;
+    esac
+    
+    if [ "$choice" != "3" ]; then
+        health_check
+    fi
+    
+    echo -e "${GREEN}🎉 部署成功完成！${NC}"
+}
+
+# 运行主流程
+main
@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  web:
+    build: .
+    ports:
+      - "5173:5173"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped
+    volumes:
+      - ./dist:/app/dist:ro
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:5173"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s