共计 3610 个字符，预计需要花费 10 分钟才能阅读完成。
作者
杨苏博，偏后端的全栈开发，目前负责腾云扣钉的 Cloud Studio 产品。在团队中负责接技术架构设计与 Review、Cloud Studio 编辑器内核设计与开发、局部外围插件设计与开发；对 WebIDE 畛域中的 VS Code 和 Theia IDE 有深入研究与丰盛实际；多年 Serverless 畛域从业教训，是 Serverless First Malagu 开源框架的作者；酷爱开源，敢于创新。
前言
Next.js 是由 Vercel 团队研发的一款全栈利用开发框架。咱们应用 Next.js 开发前端页面以及一些轻量级的后端 API。前端和后端都用 Javascript 技术栈，并且是前后端一体化的（在同一个我的项目中开发前后端）。另一个被大家所熟知的个性是它的服务端渲染能力，对 SEO 敌对。
Vercel 本身是一个用户体验极佳的 Serverless 平台，反对包含 Next.js 在内的几十框开发框架一键部署到 Vercel 平台。Vercel 平台本身领有极强的适配扩大能力，第三方框架能够依照 Vercel 平台的适配规定自主进行适配。
作为 Vercel 亲儿子的 Next.js 能够完满适配 Vercel 平台，通过 Next.js + Vercel，让开发和部署体验都能领有极致的体验。Vercel 团队崇奉着“吃本人的狗粮”准则，Vercel 本身很多利用都是基于本人的工具和平台开发的。
美中不足
Next.js + Vercel 看起来是如此的完满：通过 Vercel CLI 一键部署 Next.js 到 Vercel。另外，Next.js 也能很不便地运行在云主机上。然而 Vercel 作为国外的 Serverless 平台，对于国内用户，总是存在种种难以逾越的限度。如何将 Next.js 完满运行在国内的 Serverless 平台变得尤为重要。
国内 Serverless 平台官网在如何让 Next.js 运行起来各显神通。让 Next.js 在 Serverless 平台上运行不难，而要做到像 Vercel 一样的极致部署运行体验却很有挑战。
在尝试将 Next.js 部署到国内 Serverless 平台的时候，比方腾讯云函数、阿里云函数计算，可能会遇到如下一些坑：
运行适配艰难
Next.js 的运行须要一个 HTTP Server，而事件函数提供的是一个简略签名函数，无奈间接运行，须要将事件函数模仿成一个近似 HTTP Server 的代理服务；
代码体积过大
一个最简略的 Next.js 利用的代码体积为 245 MB 左右，打包压缩后是 54 MB 左右，而函数代码体积限度个别是在 50 MB 以内（阿里云函数计算通过 OSS 形式上传代码能够超过 50 MB 的限度，但不能超过 100 MB）。代码体积过大往往带来一系列副作用：
- 代码上传工夫长，且容易失败，部署老本变大（通过 NFS 和 Layer 解决）；
- 依赖更多云服务，如应用对象存储服务部署代码包，又或者把体积大的 node_modules 目录上传到 NFS 服务上，而后挂载到函数上。总之，让利用架构变简单；
- 冷启动工夫变长，函数在第一次运行的时候，须要先加载远端的代码，如果代码包越大，则冷启动工夫越长；
不过，通过腾讯云的 Web 函数和阿里云函数计算的 Custom Runtime，能够解决第一个问题，因为它容许咱们运行一个真正的 HTTP Server。而第二个问题要艰难很多，尽管其中局部问题能够通过肯定伎俩缓解，比方冷启动，能够通过预置并发解决，然而又会让运行老本变得难以承受。所以解决问题的基本还是在代码体积上。
为什么 Next.js 我的项目代码体积大
为了剖析这个问题，咱们须要先理解 Next.js 的架构。Next.js 是一种 React 的服务端渲染框架，集成度极高，框架本身集成了 Webpack、SWC、Babel、Express 等，使得开发者仅依赖 Next、React 和 React-dom 就能够不便地构建本人的 SSR React 利用，咱们甚至能够不必关怀路由。Next.js 的高度集成性，易于实现代码宰割、路由跳转、热更新、服务端渲染和前端渲染。
在 Next.js 我的项目中，不仅仅蕴含了运行时所须要的依赖，还蕴含了本地开发、构建所须要的开发时依赖，而且开发时依赖体积又大，而咱们常见的解决方案是简略粗犷打包所有的依赖，从而导致 Next.js 我的项目代码偏大。
Vercel 官网如何打包部署 Next.js
Vercel 官网打包部署 Next.js 计划比较复杂。Vercel 平台底层基础设施是集成了 AWS Lambda，Next.js 实质是部署在 AWS Lambda 平台上。为了能让 Next.js 能在 Lambda 上运行，Vercel 官网提供了一个专门用于构建 Next.js 我的项目的构建器：@vercel/next。该构建器的逻辑大抵是把 Next.js 中的每一个 API 和服务端渲染的页面都别离构建输入为一个函数，这一系列函数都归属与 Vercel 平台上的一个利用。所以这样就保障了每个函数的代码体积足够的小。
Next.js 打包部署到国内 Serverless 平台最佳实际
解决函数适配艰难：咱们能够通过 Web 函数或者 Custom Runtime 来解决，不举荐应用自定义镜像形式，因为自定义镜像冷启动很重大。并在其中运行一个 HTTP Server，且简略适配 Next.js。Next.js 官网有示例。
解决代码包体积过大问题：剔除掉运行时不须要的可选依赖和开发依赖，剔除形式如下：
npm install --omit optional --omit dev
# 或者
yarn install --ignore-optional --prod阐明：因为 swc 构建工具是通过可选依赖装置的，在运行时不须要，所以咱们须要把可选依赖也剔除。
通过以上形式构来的代码体积由原来的 54 MB 减小到了 18 MB。另外，值得一提的是阿里云函数计算 Custom Runtime 内置的 Node.js 版本为 v10.16.2，而 Next.js 最新版本要求必须是 Node.js 12.22.0+。所有间接部署在函数计算的 Custom Runtime 上的 Next.js 利用无奈运行，此时咱们就须要自行将 Node.js 的二进制下载到咱们本人的代码中（也能够通过 Layer 实现），而后指定新的 PATH 环境变量。
如果每次部须要做下面的操作是不是很繁琐，而且还须要本人写适配入口代码，以及 Web 函数和 Custom Runtime 所必须的 bootstrap 文件，且该文件必须领有可执行权限，额定装置新版 Node.js 运行时。其实，这些能力在 Cloud Studio 云开发平台中曾经内置提供了。一个原生的 Next.js 利用，应用 Cloud Studio 云开发平台能够一键部署到腾讯云函数或者阿里函数计算，对业务代码零侵入，零门槛。只需如下几步：
1. 登录进入 Cloud Studio 的 Dashboard 页面
2. 抉择 Next.js 模板，并创立一个工作空间
3. 切换到 Cloud Studio 云部署套件视图
4. 抉择腾讯云部署选项，并微信扫描登录
5. 点击【开始部署】按钮，一键部署 Next.js 利用
6. 点击【拜访】按钮，即刻预览部署后的成果
阐明：同样的 Next.js 利用，无需做任何批改，采纳上述一样的步骤，一键部署到阿里云函数计算。
Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。其蕴含代码高亮、主动补全、Git 集成、终端等 IDE 的根底性能，同时反对实时调试、插件扩大等，能够帮忙开发者疾速实现各种利用的开发、编译与部署工作。用户在应用 Cloud Studio 时无需装置，随时随地关上浏览器就能应用。
目前 Cloud Studio 反对部署到腾讯云函数和阿里云函数计算。并且反对 15+ 前后端框架的一键部署。
写在最初
开始胡乱打包，到前面的粗劣打包，让代码体积变小，从而防止了一些列的坑。至于咱们为什么不采纳像 Vercel 那样的极致计划，起因有三点：实现老本太高、对 Next.js API 深度依赖，保护老本高和构建成多个函数治理老本极大（咱们不可能想 Vercel 一样提供一个高阶平台）。通过 Cloud Studio 云开发平台，咱们能够一键部署 Next.js 等风行框架，对框架零革新。
对于咱们
更多对于云原生的案例和常识，可关注同名【腾讯云原生】公众号~
福利：
①公众号后盾回复【手册】，可取得《腾讯云原生路线图手册》&《腾讯云原生最佳实际》~
②公众号后盾回复【系列】，可取得《15 个系列 100+ 篇超实用云原生原创干货合集》，蕴含 Kubernetes 降本增效、K8s 性能优化实际、最佳实际等系列。
③公众号后盾回复【白皮书】，可取得《腾讯云容器平安白皮书》&《降本之源 - 云原生老本治理白皮书 v1.0》
④公众号后盾回复【光速入门】，可取得腾讯云专家 5 万字精髓教程，光速入门 Prometheus 和 Grafana。
【腾讯云原生】云说新品、云研新术、云游新活、云赏资讯，扫码关注同名公众号，及时获取更多干货！！