超级个体必备——云函数FC快速部署 Next.js 服务
背景：Next.js 默认模板的“坑”
在近期的项目实践中，为了简化后端服务的运维，我尝试使用阿里云函数计算（FC）部署一个 Express 应用。
然而，这种方式需要手动安装和配置多个中间件、日志管理工具等组件，增加了额外的工作量。
为优化未来的部署流程，我决定探索如何在 FC 环境下高效部署现有框架，尤其是 Next.js。
该框架天然支持前后端同构渲染，适用于轻量级的全栈应用。然而，在实际部署过程中，仍然遇到了一些配置上的坑。
部署流程
1. 创建 Next.js 项目
首先，在本地通过 Next.js 官方脚手架初始化一个新项目。具体的命令可参考官方文档，本文不再赘述。
关键配置：
在 next.config.ts 中，需要添加如下配置：
module.exports = {
output: "standalone",
};
此项配置能够确保 Next.js 生成独立运行的构建产物，以便在只有 Nodejs 运行环境的服务器端高效部署。
2. 上传代码至 Git 仓库
为了实现持续集成与自动化部署，建议将项目代码提交至 Git 仓库。
阿里云 FC 目前支持以下代码托管平台：
• GitHub
• Gitee
• GitLab
• 云效 Codeup
3. 创建 Next.js 服务
在阿里云官网，按照以下步骤创建 Next.js 服务：
-
进入
函数计算 FC 3.0控制台； -
依次点击
应用->创建项目； -
选择
基于模板创建； -
选择
Next.js 模板并点击立即部署。
注意：在部署前，应用名称和服务名称均可修改，但修改入口较为隐蔽，建议提前确认命名策略。
4. 配置服务
部署成功后，需要进一步调整服务配置，确保构建和自动部署流程正常运行。
-
绑定 Git 仓库及分支：
• 绑定后，每当代码仓库的指定分支发生更新，系统将自动触发构建与部署。
-
调整构建命令（默认情况下路径存在问题，需手动修正）：
• 在路径
./下运行npm install• 在路径
./下运行npm run build• 在路径
./下运行cp -r public .next/standalone/• 在路径
./.next下运行cp -r static standalone/.next/ -
调整代码包路径：
• 需设置代码包路径为
./.next/standalone，确保部署后的文件结构符合 Next.js 运行环境。 -
手动触发部署：
• 完成上述配置后，需进行一次手动部署，以验证整体流程。
5. 验证部署结果
在 部署记录 选项卡中，查看最近一次的部署状态，确保状态为 成功。
随后，可点击 访问地址，测试 Next.js 应用是否能够正常运行。
总结
本次 Next.js 部署的核心难点主要集中在以下两点：
-
启用 standalone 模式，确保构建后的产物能够独立运行；
-
调整构建命令，确保正确复制
public和.next/static资源。
之前的对象存储 OSS能够解决纯前端网站的部署。
现在对于轻后端的项目，也可以用 Next.js 应用实现了。
对于更复杂的架构，建议采用前后端分离模式：
• 前端：基于对象存储（OSS）托管静态资源；
• 后端：采用独立的后端框架（如 NestJS、Express、Koa 等）部署至云函数或服务器环境。
通过上述方式，可以实现灵活高效的全栈应用部署，满足不同规模的项目需求。
最关键的是，整个方案的成本几乎可以忽略不计，大概每个月几毛钱。
嗯~~真香~~~
关注我，掌握更多云开发省钱妙招和 AI 提效技巧~
