实战部署指南

从零开始，手把手教你部署现代化的全栈应用，掌握生产环境的最佳实践和优化技巧。

完整部署流程

点击每个步骤查看详细说明

项目准备

代码优化与配置

→

版本控制

Git仓库管理

→

数据库部署

Supabase配置

→

应用部署

Vercel发布

→

域名配置

自定义域名

→

监控优化

性能监控

分步骤详细教程

第一步：准备项目

确保你的Next.js项目已经完成开发并通过本地测试。

检查项目结构

# 确保项目结构正确
my-app/
├── pages/          # 或 app/ (App Router)
├── public/
├── styles/
├── package.json
├── next.config.js
└── README.md

# 检查构建是否正常
npm run build
npm run start

第二步：推送到GitHub

将项目代码推送到GitHub仓库，Vercel将从这里拉取代码。

Git操作

# 初始化Git仓库
git init
git add .
git commit -m "Initial commit"

# 添加远程仓库
git remote add origin https://github.com/username/my-app.git
git push -u origin main

第三步：连接Vercel

登录Vercel控制台，导入GitHub仓库并配置部署设置。

环境变量配置

# .env.local (本地开发)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# 在Vercel中添加相同的环境变量
# Settings → Environment Variables

第一步：创建Supabase项目

在Supabase控制台创建新项目，选择合适的地区和定价计划。

数据库初始化

-- 创建用户表
CREATE TABLE users (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  email VARCHAR(255) UNIQUE NOT NULL,
  name VARCHAR(255),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 启用行级安全
ALTER TABLE users ENABLE ROW LEVEL SECURITY;

-- 创建策略
CREATE POLICY "Users can view own data" ON users
  FOR SELECT USING (auth.uid() = id);

第二步：配置身份认证

设置身份认证提供商，配置重定向URL和安全策略。

认证配置

// lib/supabase.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

// 配置重定向URL
// Authentication → Settings → Site URL
// 生产环境: https://yourdomain.com
// 开发环境: http://localhost:3000

第一步：购买域名

从域名注册商购买域名，推荐使用Cloudflare、Namecheap或GoDaddy。

第二步：配置DNS

在Vercel项目设置中添加自定义域名，然后配置DNS记录。

DNS记录配置

# 在域名DNS设置中添加以下记录：

# A记录 (根域名)
Type: A
Name: @
Value: 76.76.19.61

# CNAME记录 (www子域名)
Type: CNAME
Name: www
Value: cname.vercel-dns.com

# 或者使用CNAME记录指向Vercel
Type: CNAME
Name: @
Value: cname.vercel-dns.com

第三步：SSL证书

Vercel会自动为你的域名申请和配置SSL证书，通常需要几分钟时间。

第一步：构建优化

优化Next.js构建配置，启用压缩和缓存策略。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 启用压缩
  compress: true,
  
  // 图片优化
  images: {
    domains: ['example.com'],
    formats: ['image/webp', 'image/avif'],
  },
  
  // 实验性功能
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ['@prisma/client'],
  },
  
  // 头部配置
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig

第二步：资源优化

优化图片、字体和其他静态资源的加载性能。

图片优化示例

import Image from 'next/image'

// 使用Next.js Image组件


// 动态导入减少初始包大小
const DynamicComponent = dynamic(() => import('../components/Heavy'), {
  loading: () => Loading...,
  ssr: false
})

部署前检查清单

确保所有项目都已完成，避免部署后出现问题

代码质量

代码已通过ESLint检查
所有TypeScript错误已修复
本地构建成功
移除了console.log和调试代码

配置检查

环境变量已正确配置
数据库连接字符串已更新
API端点URL已配置
第三方服务密钥已设置

安全检查

敏感信息已从代码中移除
CORS策略已正确配置
API路由已添加认证
输入验证已实现

性能优化

图片已优化压缩
代码分割已实现
缓存策略已配置
SEO元数据已添加

常见问题排查

构建失败：模块未找到

检查package.json中的依赖是否完整，运行npm install确保所有包都已安装。确认import路径是否正确，特别是相对路径和别名配置。

环境变量未生效

确认环境变量名称以NEXT_PUBLIC_开头（客户端变量）。在Vercel控制台重新检查环境变量配置，注意大小写敏感。重新部署项目使环境变量生效。

数据库连接失败

检查Supabase项目状态是否正常。确认数据库URL和API密钥是否正确。检查网络连接和防火墙设置。验证数据库表结构和权限配置。

域名解析问题

DNS记录生效需要时间，通常24-48小时。使用dig或nslookup命令检查DNS解析。确认DNS记录类型和值是否正确配置。清除浏览器DNS缓存或使用隐身模式测试。

页面加载缓慢

检查图片大小和格式，使用WebP格式。启用代码分割和懒加载。优化数据库查询，添加适当的索引。使用CDN加速静态资源加载。

API请求跨域错误

在API路由中添加CORS头部。检查Supabase项目的CORS配置。确认请求URL是否使用HTTPS。验证API端点的认证配置。

性能指标监控

关键性能指标的目标值和优化建议

<2s

首次内容绘制

FCP - 用户看到内容的时间

<2.5s

最大内容绘制

LCP - 主要内容加载完成

<100ms

首次输入延迟

FID - 交互响应时间

<0.1

累积布局偏移

CLS - 视觉稳定性

95+

Lighthouse分数

综合性能评分

99.9%

可用性

服务正常运行时间

下一步学习

现在你已经掌握了完整的部署流程，接下来使用技术栈配置器来规划你的项目。

使用技术栈配置器返回云平台对比