作者
杨苏博,偏后端的全栈开发,目前负责腾云扣钉的 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。
【腾讯云原生】云说新品、云研新术、云游新活、云赏资讯,扫码关注同名公众号,及时获取更多干货!!