website/DEPLOY.md

部署说明

远程服务器部署步骤

1. 克隆代码

git clone git@github.com:BrunoGao/website.git
cd website

2. 安装依赖（重要）

# 如果使用 npm
npm install

# 如果使用 pnpm（推荐）
pnpm install

# 如果使用 yarn
yarn install

3. 构建项目

npm run build

4. 启动服务

开发环境

npm run dev

生产环境预览

npm run preview

使用 PM2 部署（生产环境）

# 安装 PM2
npm install -g pm2

# 启动应用
pm2 start npm --name "omniverse-website" -- run preview

# 查看状态
pm2 status

# 查看日志
pm2 logs omniverse-website

Docker 部署（推荐）

创建 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 文件（如需要）：

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=OmniVerse

更新部署

# 拉取最新代码
git pull origin main

# 安装新依赖（如果有）
pnpm install

# 重新构建
npm run build

# 重启服务
pm2 restart omniverse-website