ServerlessDev+云效流水线迁移Express+NodeJS前端应用至函数计算

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
函数计算FC,每月15万CU 3个月
简介: 笔者所在的公司,PC端页面使用了NodeJS进行部署。由于函数计算(FC)对nodejs有非常优秀的支持,笔者就将整个前端项目由ECS部署迁移至函数计算。

背景

公司内部的PC站页面(www页面),使用了Express+NodeJS对后端资源进行统一请求并渲染,部署在ECS上。由于前段时间接连出现突发请求,使得负载被打满。公司不得不紧急购买了多台ECS进行扩容。同时,我关注到FC对于NodeJS有着相当优秀的支持,基本可以起到秒级启动和秒级扩容。故尝试将项目迁移至FC中。

同时为了解决项目CI/CD的问题,我们同时使用了ServerlessDEV组件并结合云效“流水线”功能,完成了项目的自动打包上线的一系列操作。

需求

  • PC站迁移至函数计算,并可通过HTTP访问
  • 通过云效流水线进行打包和发布。

过程详解

迁移函数计算

得益于Express框架的易用性,整个代码发布到函数计算上还是比较容易的。在函数计算的“应用”中,有线程的模板。(如果大家嫌自己配置麻烦,不如直接使用该功能进行部署,再参考其s.yaml文件对自己的服务进行配置)

image.png

具体的参数配置可以参考下图

image.png

关键参数说明

  • 内存规格大小:通过ServerlessDEV中的性能工具,测得在1GB的内存规格下,可以得到成本和响应时间的最优值(内存规格继续上升,响应时间只有非常微小的下降;而内存规格下降会导致响应时长大幅上升)
  • 启动命令:这里要和项目中package.json内的scripts块相匹配。
  • 执行超时时间:由于是一个PC前端应用,执行时间一般不超过5s(超过5s用户会没有等待的耐心)。考虑到一些异常情况,故配置15s。超时会返回504

踩坑说明(注意事项)

  • Custom Runtime运行环境,默认HTTP端口为3001,部署时要更改NodeJS的默认端口
  • 以前项目是通过nginx进行gzip压缩的,迁移到函数计算后,需要启用NodeJS的gzip压缩配置,不然后期流量会很喜人(压缩后流量约为压缩前流量的1/5)

使用流水线进行发布

完成部署后,就要去搞定流水线发布了。(总不见得每次都黏贴代码吧)。好在通过ServerlessDev能够完成一些CI\CD操作,同时“流水线”内又内置了对ServerlessDev组件的支持。我们只需要准备对应函数的s.yaml文件即可。

文件如下(已经做了脱敏):

edition: 1.0.0services:  cn-hangzhou-lyh_dt_pc-main:    component: devsapp/fc
    props:      region: cn-hangzhou
      service:        description: pc站(生产环境)
        role: acs:ram::11111111:role/AliyunFcDefaultRole
        logConfig:          project: aliyun-fc-cn-hangzhou-1111111
          logstore: function-log
          enableRequestMetrics: true          enableInstanceMetrics: true          logBeginRule: DefaultRegex
        vpcConfig:          vpcId: vpc-1111111
          securityGroupId: sg-1111111
          anytunnelViaENI: null
          vswitchIds:            - vsw-1111111
            - vsw-2222222
            - vsw-3333333
        internetAccess: true        tracingConfig: Enable
        name: test_pc
      function:        runtime: custom
        handler: index.handler
        timeout: 15        memorySize: 1024        environmentVariables: {}        instanceConcurrency: 20        caPort: 3001        instanceType: e1
        customRuntimeConfig:          command:            - npm
          args:            - run
            - start:prd
        name: main
        codeUri: '.'      triggers:        - name: defaultTrigger
          description: ''          type: http
          qualifier: LATEST
          config:            methods:              - GET
              - POST
              - PUT
              - DELETE
              - HEAD
              - OPTIONS
              - PATCH
            authType: anonymous

直接使用流水线进行发布配置,他会自动进行打包。配置的步骤如下:

image.png

步骤:Node.js构建及部署

这里面分2部:

  • NodeJS构建
  • ServerlessDev构建上传(部署)

image.png

其中:

  • 构建命令较为简单,就是普通的打包命令
npminstall
  • ServerlessDev构建上传(部署)相对复杂。需要完成账户配置+发布
sconfigadd--AccessKeyID${FC_AK}--AccessKeySecret${FC_SK}-adefault-fsdeployfunction--use-local-ts.yaml

结束语

至此,我们完成了通过函数计算部署NodeJS.


相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
|
14天前
|
Serverless API 异构计算
函数计算产品使用问题之修改SD模版应用的运行环境
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
14天前
|
运维 Serverless 网络安全
函数计算产品使用问题之通过仓库导入应用时无法配置域名外网访问,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
13天前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
29 3
|
11天前
|
开发者 存储 API
Xamarin 开发者的社区资源概览:从官方文档到GitHub示例,全面探索提升开发技能与解决问题的多元化渠道与实用工具
【8月更文挑战第31天】Xamarin 开发者社区资源概览旨在提升开发效率与解决问题,涵盖官方文档、社区论坛、GitHub 项目等。官方文档详尽,涵盖 Xamarin.Forms 使用、性能优化等;社区论坛供交流心得;GitHub 提供示例代码。此外,第三方博客、视频教程及 Xamarin University 等资源也丰富多样,适合各阶段开发者学习与提升。通过综合利用这些资源,开发者可不断进步,应对技术挑战。
26 0
|
11天前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
17 0
|
11天前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
15 0
|
11天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
34 0
|
11天前
|
前端开发 UED 开发者
React组件优化全攻略:深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时,性能是提升用户体验的关键因素。React作为主流前端库,其组件优化尤为重要。本文深入探讨了React组件优化策略,包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法,帮助开发者显著提升应用性能。通过实践案例对比优化前后效果,不仅提高了页面渲染速度,还增强了用户体验。优化React组件是每个开发者必须关注的重点。
22 0
|
13天前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
25 0
|
13天前
|
存储 JavaScript 前端开发
Vue.js + Vuex:解锁前端复杂应用的神秘钥匙,探索状态管理的新境界!
【8月更文挑战第30天】Vue.js结合Vuex状态管理,为复杂前端应用提供了解锁高效与优雅的金钥匙。Vue.js凭借简洁的API和高效虚拟DOM更新机制广受好评,但在大规模应用中,组件间状态共享变得复杂。这时,Vuex通过中心化状态存储,使状态管理清晰可见,如同为Vue.js应用增添智慧大脑。例如,在购物车应用中,Vuex通过`state`、`mutations`、`actions`和`getters`清晰管理状态,简化组件间状态同步,减少耦合,确保单一状态源,使开发更加高效有序。在Vue.js的世界里,Vuex是一位智慧管家,让前端开发不仅高效,更成为一门艺术。
8 0

热门文章

最新文章

相关产品

  • 函数计算