技术架构

网站设计

在为公司开发官网时，传统国内建站方式通常涉及购买云服务器、采用 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 文档。祝您的官网开发顺利！

相关链接