前提条件

在开始之前，请确保您具备以下条件：

• 一个 Vercel 账户（在 vercel.com 注册）。
• 一个准备好部署的 Flask 或 FastAPI 项目。
• 对 Python、Flask/FastAPI 和 Git 的基本了解。
• 已安装 Vercel CLI（运行 npm install -g vercel）。
• 项目已托管在 Git 仓库中（例如 GitHub、GitLab 或 Bitbucket）。

步骤 1：准备您的 Flask/FastAPI 项目

要在 Vercel 上部署 Python 项目，您的应用必须适配 Vercel 的无服务器环境。以下是如何准备 Flask 或 FastAPI 项目。

Flask 项目示例

对于 Flask 项目，确保您的项目结构如下：

my-flask-app/
├── app.py
├── requirements.txt
├── vercel.json

app.py（示例 Flask 应用）：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '来自 Vercel 上的 Flask 的问候！'

if __name__ == '__main__':
    app.run()

FastAPI 项目示例

对于 FastAPI 项目，结构类似：

my-fastapi-app/
├── main.py
├── requirements.txt
├── vercel.json

main.py（示例 FastAPI 应用）：

from fastapi import FastAPI

app = FastAPI()

@app.get('/')
async def root():
    return {'message': '来自 Vercel 上的 FastAPI 的问候！'}

依赖文件

创建一个 requirements.txt 文件，列出项目的依赖项：

# 对于 Flask
flask==2.3.2
gunicorn==20.1.0

# 对于 FastAPI
fastapi==0.95.1
uvicorn==0.21.1

Vercel 使用 gunicorn 作为 Flask 的 WSGI 服务器，使用 uvicorn 作为 FastAPI 的 ASGI 服务器，以在无服务器环境中处理请求。

步骤 2：配置 Vercel

Vercel 需要一个 vercel.json 配置文件来理解如何构建和部署您的 Python 项目。该文件指定了构建过程、路由和运行时设置。

Flask 的 Vercel 配置

在项目根目录创建 vercel.json 文件：

{
  "version": 2,
  "builds": [
    {
      "src": "app.py",
      "use": "@vercel/python"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "app.py"
    }
  ]
}

FastAPI 的 Vercel 配置

对于 FastAPI，vercel.json 文件因其 ASGI 特性略有不同：

{
  "version": 2,
  "builds": [
    {
      "src": "main.py",
      "use": "@vercel/python"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "main.py"
    }
  ]
}

vercel.json 说明

• "version": 2：指定 Vercel 配置版本。
• "builds"：定义构建过程。这里我们使用 @vercel/python 运行时来处理 Python 应用。
• "routes"：将所有传入请求映射到您的应用文件（Flask 为 app.py，FastAPI 为 main.py）。

步骤 3：本地测试

在部署之前，先在本地测试您的应用以确保其正常运行。

对于 Flask：

pip install -r requirements.txt
gunicorn --bind 0.0.0.0:8000 app:app

对于 FastAPI：

pip install -r requirements.txt
uvicorn main:app --host 0.0.0.0 --port 8000

在浏览器中访问 http://localhost:8000 以验证应用是否运行正常。

步骤 4：部署到 Vercel

项目准备好后，您可以将其部署到 Vercel。

1. 初始化 Git 仓库（如果尚未完成）： git init git add . git commit -m "初始提交"
2. 推送到 Git 托管服务（如 GitHub）： git remote add origin <您的仓库地址> git push origin main
3. 将 Vercel 链接到您的仓库：
   • 使用 CLI 登录 Vercel：vercel login
   • 部署您的项目：vercel
   • 按照提示将项目链接到 Git 仓库或直接部署。Vercel 将检测 Python 运行时并使用 vercel.json 中的设置。
4. 设置环境变量（如需要）：
   如果您的应用需要环境变量（例如 API 密钥），在 Vercel 仪表板的 设置 > 环境变量 中添加它们。
5. 验证部署：
   部署完成后，Vercel 会提供一个 URL（例如 https://my-flask-app.vercel.app）。访问该 URL 确认您的应用已上线。

步骤 5：持续部署

要启用持续部署，请将您的 Git 仓库连接到 Vercel：

• 在 Vercel 仪表板中，前往 新建项目 并导入您的仓库。
• 配置项目设置（Vercel 会自动检测 vercel.json 文件）。
• 推送到您的仓库，Vercel 将自动重新部署。

故障排除提示

• 构建错误：确保 requirements.txt 包含所有依赖项，并且 @vercel/python 与您的 Python 版本兼容（Vercel 支持 Python 3.9+）。
• 路由问题：检查 vercel.json 中的 routes 是否正确映射到您的应用入口点。
• 超时错误：Vercel 的无服务器函数有最大执行时间（Hobby 计划为 10 秒，Pro 计划为 60 秒）。优化您的应用以快速响应。
• 日志：在 Vercel 仪表板的 Functions > Logs 中查看部署日志以进行调试。

最佳实践

• 保持依赖最小化：在 requirements.txt 中仅包含必要的包，以减少构建时间。
• 使用环境变量：将敏感数据（例如数据库凭据）存储在 Vercel 的环境变量中。
• 优化无服务器环境：确保您的应用是无状态的，因为 Vercel 的无服务器环境不会在请求之间保留状态。
• 使用 Vercel CLI 本地测试：使用 vercel dev 模拟 Vercel 的本地环境。

结论

通过正确的配置，在 Vercel 上部署 Flask 或 FastAPI 项目非常简单。通过设置项目结构、创建 vercel.json 文件并使用 Vercel 的 CLI 或仪表板，您可以在几分钟内让您的 Python 后端上线。无论您是构建简单的 API 还是完整的 Web 应用，Vercel 的无服务器平台都提供了一个可扩展且无忧的部署解决方案。

祝您部署顺利！

在为公司开发官网时，传统国内建站方式通常涉及购买云服务器、采用 WordPress 或自研系统，流程复杂且耗时。相比之下，结合 Next.js、GitHub 和 Vercel 提供了一套高效、免费的解决方案：Next.js 提供现代化 Web 开发体验，GitHub 实现代码管理，Vercel 提供无缝 CI/CD 部署，而腾讯云域名配置则优化国内访问速度并满足合规需求。

本流程的优势在于：

• Next.js：支持服务器端渲染（SSR）、静态生成（SSG）和 API 路由，兼顾性能与 SEO。
• GitHub：免费代码托管，版本控制简单。
• Vercel：Next.js 官方部署平台，支持自动部署和全球 CDN。
• 腾讯云域名：支持 ICP 备案，加速国内访问。

本文总结了从零搭建 Next.js 官网、通过 GitHub 管理代码、使用 Vercel 实现 CI/CD，并关联腾讯云域名以优化国内访问的完整流程。内容基于官方文档和实践经验，适合有 React 基础的开发者，预计耗时 1-2 小时。以下步骤包含详细命令和界面描述，确保清晰易懂。

步骤 1: 创建 Next.js 项目

确保本地安装 Node.js（建议版本 18 或以上）。使用 create-next-app 快速创建项目。

1. 初始化项目：
   • 在终端运行：npx create-next-app@latest my-next-app
   • 按提示选择：推荐使用 App Router，TypeScript（可选）、ESLint 和 Tailwind CSS。生成的项目包含仪表板模板，适合快速开发。
   • 项目结构：my-next-app/ ├── app/ ├── public/ ├── next.config.js ├── package.json └── README.md
2. 启动开发服务器：
   • 进入目录：cd my-next-app
   • 运行：npm run dev
   • 打开 http://localhost:3000，查看 Next.js 默认页面。

图 1: Next.js 项目创建终端

初学者可参考 Next.js 官方文档的 React 基础课程，深入了解 App Router。

步骤 2: 代码托管到 GitHub

GitHub 提供可靠的代码版本控制和协作平台。我们将本地项目推送到 GitHub 仓库。

1. 初始化本地 Git 仓库：
   • 在项目根目录运行：git init git add . git commit -m "Initial commit"
2. 创建 GitHub 仓库：
   • 登录 GitHub，点击右上角 “+” > “New repository”。
   • 输入仓库名称（如 my-next-app），选择公有（便于 Vercel 集成）或私有，添加描述，可选添加 README 或 .gitignore。
   • 点击 “Create repository”。
3. 推送代码：
   • 添加远程仓库：git remote add origin https://github.com/your-username/my-next-app.git
   • 推送：git push -u origin main

此步骤确保代码安全备份，并为 CI/CD 部署做准备。

步骤 3: 使用 Vercel 实现 CI/CD 部署

Vercel 是 Next.js 的首选部署平台，支持从 GitHub 自动构建和部署，简化 CI/CD 流程。

1. 连接 GitHub 与 Vercel：
   • 注册/登录 Vercel（免费账户即可）。
   • 在 Vercel 仪表板点击 “New Project”。
   • 选择 GitHub，授权访问，选择 my-next-app 仓库，点击 “Import”。
2. 配置并部署：
   • 保留默认设置（框架自动识别为 Next.js）。
   • 点击 “Deploy”，Vercel 将自动构建并部署项目。
   • 部署完成后，获得类似 my-next-app.vercel.app 的默认域名。
3. 启用 CI/CD：
   • 推送至 main 分支触发生产部署，其他分支触发预览部署。
   • 可在 Vercel 设置中调整生产分支（默认 main）。
   • 私有仓库需确保提交者有 Vercel 项目权限。

图 3: Vercel 部署仪表板
（描述：Vercel 页面显示 “Deployments” 标签，列出构建日志和预览 URL，绿色状态表示部署成功。）

测试 CI/CD：修改本地代码，推送至 GitHub，Vercel 将自动重新部署。

步骤 4: 配置腾讯云域名以优化国内访问

为提升品牌形象和国内访问速度，我们通过 Vercel 添加子域名（如 blog.example.com），并结合腾讯云 DNS 解析。注意：中国用户需完成域名 ICP 备案（约 20 天），否则可能无法访问。备案可通过腾讯云控制台申请。

1. 在 Vercel 配置子域名：
   • 在 Vercel 项目仪表板，进入 “Settings” > “Domains”。
   • 输入子域名（如 blog.example.com），点击 “Add”。
   • Vercel 提供 CNAME 记录（如 cname.vercel-dns.com），并自动配置 SSL。

图 4: Vercel 域名配置界面
（描述：Vercel 设置页面显示 “Add Domain” 输入框和 DNS 记录提示，包含 CNAME 值。）

2. 在腾讯云设置 DNS：
   • 登录腾讯云控制台，进入 “域名管理” > “DNS 解析”。
   • 选择已备案域名（如 example.com）。
   • 添加记录：
     • 类型：CNAME
     • 主机记录：blog
     • 记录值：cname.vercel-dns.com（从 Vercel 复制）
     • TTL：600 秒
   • 保存后，等待 DNS 传播（几分钟至数小时）。
   • 验证：运行 dig blog.example.com，确认指向 Vercel IP。

图 5: 腾讯云 DNS 配置界面
（描述：腾讯云控制台显示 “添加记录” 按钮，填写 CNAME 类型、主机记录和值，蓝色主题。）

3. 优化国内访问：
   • 备案完成后，国内用户可直接访问子域名。
   • Vercel 的全球 CDN 结合腾讯云域名解析可降低延迟。
   • 若访问受限，检查备案状态或启用腾讯云 CDN 加速。

此配置兼顾合规性和性能：Vercel 负责部署，腾讯云 提供域名解析和备案支持。

结论

通过 Next.js、GitHub、Vercel 和腾讯云的组合，您可以快速构建一个高性能、易维护的企业官网。相比传统 WordPress 或自研建站方式，此流程简化了开发和部署，特别适合需要快速上线和国内优化的项目。遇到问题可参考 Next.js、Vercel 或腾讯云官方文档。

如需扩展功能（如环境变量、Edge Functions），请查阅 Vercel 文档。祝您的官网开发顺利！

相关链接