第19章 部署与环境变量

// 在项目根目录执行

// 1. 初始化 Git（如果还没做）
git init

// 2. 添加所有文件
git add .

// 3. 提交
git commit -m "第一次提交"

// 4. 关联远程仓库（替换为你的仓库地址）
git remote add origin https://github.com/你的用户名/你的仓库名.git

// 5. 推送
git push -u origin main

https://你的项目名.vercel.app

// 修改代码后
git add .
git commit -m "更新了首页"
git push

// Vercel 会自动检测到变化并重新部署
// 大约 1-2 分钟后，网站就会更新

// .env.local 文件内容

# 数据库连接字符串
DATABASE_URL="mysql://用户名:***@localhost:3306/数据库名"

# API 密钥
API_SECRET_KEY="你的秘密密钥123456"

# 其他配置
NEXT_PUBLIC_SITE_URL="https://你的网站.vercel.app"

# 依赖
node_modules

# Next.js
.next

# 环境变量（重要！）
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# 其他
.DS_Store
*.tsbuildinfo

// app/api/test/route.js

export async function GET() {
    // 普通环境变量 - 只在服务器端可用
    const dbUrl = process.env.DATABASE_URL
    const apiKey = process.env.API_SECRET_KEY

    return Response.json({
        message: '环境变量测试',
        hasDbUrl: !!dbUrl,
        hasApiKey: !!apiKey
    })
}

// app/page.js

export default function Home() {
    // NEXT_PUBLIC_ 变量 - 客户端可用
    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL

    return (
        <div>
            <h1>环境变量测试</h1>
            <p>网站地址：{siteUrl}</p>
        </div>
    )
}

# ✅ 正确：敏感信息用普通变量
DATABASE_URL="mysql://..."
API_SECRET_KEY="sk-123456"

# ✅ 正确：公开信息用 NEXT_PUBLIC_ 变量
NEXT_PUBLIC_SITE_URL="https://example.com"
NEXT_PUBLIC_SITE_NAME="我的网站"

// app/api/users/route.js

// 辅助函数：获取环境变量
function getDbConfig() {
    return {
        url: process.env.DATABASE_URL,
        apiKey: process.env.API_SECRET_KEY
    }
}

// GET 请求 - 获取用户列表
export async function GET() {
    const config = getDbConfig()

    // 模拟数据（实际项目中从数据库获取）
    const users = [
        { id: 1, name: '张三', email: '***@example.com' },
        { id: 2, name: '李四', email: 'lisi@example.com' }
    ]

    return Response.json({
        success: true,
        data: users,
        configStatus: {
            hasDbUrl: !!config.url,
            hasApiKey: !!config.apiKey
        }
    })
}

// POST 请求 - 创建新用户
export async function POST(request) {
    const config = getDbConfig()

    // 检查配置
    if (!config.url) {
        return Response.json(
            { error: '数据库未配置' },
            { status: 500 }
        )
    }

    try {
        const body = await request.json()

        // 这里应该是真实的数据库操作
        // const result = await db.query('INSERT INTO users ...', [body.name, body.email])

        return Response.json({
            success: true,
            message: '用户创建成功',
            user: { id: 3, ...body }
        })
    } catch (error) {
        return Response.json(
            { error: '请求格式错误' },
            { status: 400 }
        )
    }
}

// app/page.js

export default async function Home() {
    // 调用 API
    const response = await fetch(process.env.NEXT_PUBLIC_SITE_URL + '/api/users', {
        cache: 'no-store' // 不缓存，每次请求最新数据
    })
    const data = await response.json()

    return (
        <div>
            <h1>用户列表</h1>
            {data.success ? (
                <ul>
                    {data.data.map(user => (
                        <li key={user.id}>
                            {user.name} - {user.email}
                        </li>
                    ))}
                </ul>
            ) : (
                <p>加载失败：{data.error}</p>
            )}
        </div>
    )
}

# ========== 数据库配置 ==========
DATABASE_URL="postgresql://username:***@localhost:5432/blog_db"

# ========== 第三方服务 ==========
# 图床 API 密钥
IMAGE_UPLOAD_API_KEY="your-image-upload-key"

# 邮件服务
SMTP_PASSWORD="your-smtp-password"

# ========== 公开配置（可用 NEXT_PUBLIC_ 前缀）==========
# 网站 URL
NEXT_PUBLIC_SITE_URL="https://my-blog.vercel.app"

# Google Analytics
NEXT_PUBLIC_GA_ID="G-XXXXXXXXXX"

# 网站名称
NEXT_PUBLIC_SITE_NAME="我的博客"