第一个项目部署 #

┌─────────────────────────────────────────┐
│           Vercel 部署方式                │
├─────────────────────────────────────────┤
│  Git 集成   →  自动部署，推荐方式        │
│  CLI 部署   →  命令行，灵活控制          │
│  API 部署   →  编程方式，自动化          │
│  拖拽上传   →  静态文件，快速部署        │
└─────────────────────────────────────────┘

项目结构示例：
my-project/
├── package.json        # 依赖配置
├── src/               # 源代码
│   └── index.js
├── public/            # 静态资源
└── README.md

{
  "name": "my-project",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/my-project.git
git push -u origin main

┌─────────────────────────────────────────┐
│  Import Git Repository                  │
├─────────────────────────────────────────┤
│  ┌─────────────────────────────────┐    │
│  │ 🔍 Search repositories...       │    │
│  └─────────────────────────────────┘    │
│                                         │
│  Recent Repositories                    │
│  ┌─────────────────────────────────┐    │
│  │ username/my-project      [Import]│   │
│  └─────────────────────────────────┘    │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│  Configure Project                      │
├─────────────────────────────────────────┤
│  Project Name: my-project               │
│                                         │
│  Framework Preset: [Next.js ▼]          │
│                                         │
│  Root Directory: [./ ▼]                 │
│                                         │
│  Build Command: [npm run build]         │
│  Output Directory: [.next]              │
│  Install Command: [npm install]         │
│                                         │
│  [Deploy]                               │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│  Building...                            │
├─────────────────────────────────────────┤
│  ✓ Cloning repository                   │
│  ✓ Installing dependencies              │
│  ○ Building application                 │
│  · Optimizing assets                    │
│                                         │
│  [View Build Logs]                      │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│  🎉 Deployment Ready!                   │
├─────────────────────────────────────────┤
│  Production: https://my-project.vercel.app
│                                         │
│  [Visit] [View Build Logs]              │
└─────────────────────────────────────────┘

npm i -g vercel

vercel login

cd my-project
vercel

? Set up and deploy "~/my-project"? [Y/n] y
? Which scope do you want to deploy to? username
? Link to existing project? [y/N] n
? What's your project's name? my-project
? In which directory is your code located? ./
? Want to modify these settings? [y/N] n

🔗  Linked to username/my-project
🚀  Deployed to production in 1m 23s

📝  https://my-project.vercel.app

vercel --prod

┌─────────────────────────────────────────┐
│  Drop files here to deploy              │
│                                         │
│     ┌───────────────────────────┐       │
│     │                           │       │
│     │    📁 Drag & Drop         │       │
│     │                           │       │
│     └───────────────────────────┘       │
│                                         │
│  Supported: HTML, CSS, JS, Images       │
└─────────────────────────────────────────┘

{
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "framework": "nextjs"
}

{
  "buildCommand": "react-scripts build",
  "outputDirectory": "build",
  "framework": "create-react-app"
}

{
  "buildCommand": "vue-cli-service build",
  "outputDirectory": "dist",
  "framework": "vue"
}

{
  "buildCommand": "nuxt build",
  "outputDirectory": ".output",
  "framework": "nuxtjs"
}

{
  "buildCommand": "vite build",
  "outputDirectory": "dist",
  "framework": "vite"
}

{
  "buildCommand": null,
  "outputDirectory": "public",
  "framework": null
}

Project → Deployments

┌─────────────────────────────────────────────────────────┐
│  Deployments                                            │
├─────────────────────────────────────────────────────────┤
│  Production                                             │
│  ├── abc123  main  2 hours ago  ✓ Ready  [Visit]       │
│  └── def456  main  1 day ago    ✓ Ready  [Visit]       │
│                                                         │
│  Preview                                                │
│  └── ghi789  feat/x  30 mins ago  ✓ Ready  [Visit]     │
└─────────────────────────────────────────────────────────┘

Deployment → Build Logs

[00:00:00.000] Cloning repository...
[00:00:01.234] Cloning completed: 234ms
[00:00:01.500] Running "vercel build"
[00:00:02.000] Detecting framework...
[00:00:02.100] Framework detected: Next.js
[00:00:02.200] Installing dependencies...
[00:00:15.300] npm install completed
[00:00:15.400] Running "npm run build"
[00:00:45.600] Build completed
[00:00:46.000] Deploying to edge network...
[00:01:00.000] Deployment ready

Deployment → Functions

┌─────────────────────────────────────────┐
│  Function: /api/hello                   │
├─────────────────────────────────────────┤
│  2024-01-15 10:30:00  Request received  │
│  2024-01-15 10:30:00  Processing...     │
│  2024-01-15 10:30:01  Response sent     │
└─────────────────────────────────────────┘

Deployments → 选择历史部署 → Promote to Production

vercel rollback [deployment-url]

Project Settings → General → Delete Project

常见原因：
├── 依赖安装失败 → 检查 package.json
├── 构建命令错误 → 检查 Build Command
├── 内存不足 → 升级计划或优化构建
└── 环境变量缺失 → 配置环境变量

解决方案：
├── 优化构建速度
├── 减少依赖数量
├── 使用构建缓存
└── 检查网络问题

检查项：
├── Output Directory 是否正确
├── 路由配置是否正确
├── 静态文件是否生成
└── vercel.json 配置