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

本文涉及的产品
函数计算FC,每月15万CU 3个月
Serverless 应用引擎免费试用套餐包,4320000 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 架构模式
目录
相关文章
|
17天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
31 3
|
18天前
|
Rust 前端开发 JavaScript
前端性能革命:WebAssembly在高性能计算中的应用探索
【10月更文挑战第26天】随着Web应用功能的日益复杂,传统JavaScript解释执行模式逐渐成为性能瓶颈。WebAssembly(Wasm)应运而生,作为一种二进制代码格式,支持C/C++、Rust等语言编写的代码在浏览器中高效运行。Wasm不仅提升了应用的执行速度,还具备跨平台兼容性和安全性,显著改善了Web应用的响应速度和用户体验。
31 4
|
17天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
35 2
|
18天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
18天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
28 2
|
18天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
19天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
28 2
|
25天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
20天前
|
前端开发 API UED
深入理解微前端架构:构建灵活、高效的前端应用
【10月更文挑战第23天】微前端架构是一种将前端应用分解为多个小型、独立、可复用的服务的方法。每个服务独立开发和部署,但共同提供一致的用户体验。本文探讨了微前端架构的核心概念、优势及实施方法,包括定义服务边界、建立通信机制、共享UI组件库和版本控制等。通过实际案例和职业心得,帮助读者更好地理解和应用微前端架构。
|
25天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。

热门文章

最新文章

相关产品

  • 函数计算