粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • devlearn

    • 开发教程
    • 实践:利用ArrayBuffer实现预览指定目录下的所有文件的内容
    • 在linux-deepin上使用deepin-wine5完美运行腾讯会议/QQ/微信等此类应用
    • eslint插件开发教程
    • ServerLess之云函数实践-天气API
    • 移动端阻止弹窗下层页面被滑动
    • 小技巧:for of中获取index
    • Git常用的一些基本操作
    • 向页面注入js实现为图片和文字元素添加透明蒙层
    • 实践:使用jsencrypt配合axios实现非对称加密传输的数据
    • 封装dotenv库实现类似Vite加载环境变量的行为
    • 30行代码实现合并指定目录下的所有文件的内容
    • 马上中秋了,把鼠标指针变为小玉兔
    • Node中require与fs.readFile读取JSON文件的对比
    • 使用免费的七牛云OSS(10G)搭建个人的在线图床
    • 分享封装的一些七牛云OSS操作方法
    • 本地配置SSH免密远程登录服务器
    • 工具方法汇总
    • 腾讯云Serverless实践-Node.js服务部署
    • 腾讯云Serverless实践-静态网站托管
    • 为什么'\x1B'.length === 1?\x与\u知识延伸
    • Vite插件开发纪实:vite-plugin-monitor(上)
    • Vite插件开发纪实:vite-plugin-monitor(中)
    • Vite插件开发纪实:vite-plugin-monitor(下)
    • 解决Vite-React项目中js使用jsx语法报错的问题
    • webpack 项目接入Vite的通用方案介绍
    • webpack 项目接入Vite的通用方案介绍-草稿
    • 优雅的处理挂载window上的函数可能不存在的情况
    • Mac上抓包秒通关羊了个羊

腾讯云Serverless实践-Node.js服务部署

vuePress-theme-reco 粥里有勺糖    2018 - 2023

腾讯云Serverless实践-Node.js服务部署

粥里有勺糖 2021-06-16 技术笔记技术教程

# 腾讯云Serverless实践-Node.js服务部署

本文旨在帮助不懂运维/网络/服务器知识的小白,在不租用云服务器实现Node服务(Node开发的后端应用)的上线部署

本系列已更新:

  • 腾讯云Serverless实践-静态网站托管

超多图预警!!!

该手把手Serverless实践系列预计会出几篇包含静态站点,云函数,后端服务等等

如有表述不清,内容错误等还请评论区斧正

# 准备工作

  • 注册腾讯云账号 (opens new window)

# 创建Serverless应用

进入控制台面板 (opens new window),通常在首页右上角

图片

然后在左上角的云产品列表中找到Serverless应用中心 (opens new window)

图片

然后你能看到如下的界面

图片

点击新建,可以看见有很多模板可供选择,咱这里先选择Express应用,然后点击下一步

图片

基本配置包含:

  • 应用的名称:随心所欲填
  • 环境(dev/test/prod):随心所欲的选
  • 地域(服务器所在地区):随心所欲的选

高级配置包含:

  • 内存:默认128MB,可以根据服务的情况选择256或者更高,服务会在流量大的情况下动态扩容(建立新服务实例分摊流量)不用担心因为配置问题服务挂掉
  • 超时时间:默认3s,建议改长一点(10s左右),因为服务存在冷启动问题,所以在3s的时候部分请求可能会由于服务还未启动或者未及时响应导致接口调用失败
  • 环境变量:(可以忽略,建议配在项目的.env文件中)

图片

填完基本信息后紧接着点击完成即可

图片

赖心等待几分钟服务就初始化完毕了

这个真免费,不要钱(咱根本用不完免费额度 嘿嘿)

图片

# 线上访问地址

应用创建完成后能在卡片处看见后端服务的线上地址:

图片

比如我这个demo服务地址:https://service-rbji0bev-1256505457.cd.apigw.tencentcs.com/release/ (opens new window)

访问默认效果如下:

图片

# 模板的源代码

选择卡片中的 开发部署 -> 更新应用

图片

紧接着 选择 本地开发 ,点击下载项目

图片

# 模板目录结构

/home/sugar/Downloads/source
├── index.html             
├── layer                  
|  └── serverless.yml      
├── package-lock.json      
├── package.json           
├── serverless.yml   
├── sls.js
└── src.map

directory: 1 file: 7
1
2
3
4
5
6
7
8
9
10
11

需要关注的就只有serverless.yml配置文件与sls.js

其中serverless.yml文件就是Serverless服务的一个配置文件

没有特殊需求咱可以不用管它,它是生成好了的与你创建的项目一一对应

其中sls.js文件才是咱们项目的源代码

# sls.js源代码

点击查看完整源码
const express = require('express')
const path = require('path')
const app = express()

// Routes
app.get(`/`, (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'))
})

app.get('/user', (req, res) => {
  res.send([
    {
      title: 'serverless framework',
      link: 'https://serverless.com'
    }
  ])
})

app.get('/user/:id', (req, res) => {
  const id = req.params.id
  res.send({
    id: id,
    title: 'serverless framework',
    link: 'https://serverless.com'
  })
})

app.get('/404', (req, res) => {
  res.status(404).send('Not found')
})

app.get('/500', (req, res) => {
  res.status(500).send('Server Error')
})

// Error handler
app.use(function(err, req, res, next) {
  console.error(err)
  res.status(500).send('Internal Serverless Error')
})

app.listen(8080)

module.exports = app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

省去无关代码,核心上就只有短短4行

const express = require('express')
const app = express()

// 省略注册的路由

// 省略Error handler

app.listen(8080)

module.exports = app
1
2
3
4
5
6
7
8
9
10
  1. 引入express
  2. 执行express实例化
  3. 调用listen方法监听一个端口,以启动服务福
  4. 导出这个实例

所以要部署咱们自己的Node - Express项目(其它Node项目类似),只需要简单的2步:

  1. 拷贝serverless.yml 文件到自己项目对应目录
  2. 小小修改sls.js文件,先引入自己的express实例,再将其导出即可

可参看后面的现有Express项目改造示例

# serverless.yml配置文件解释

只关注根目录下的那个serverless.yml文件,不关注layer/serverless.yml

component: express
name: express-jskJUp-v4
org: '1256505457'
app: suixinsuoyu
stage: dev
inputs:
  src:
    src: ./
    exclude:              # 上传代码时,需要排除的目录或文件
      - .env
      - node_modules/**
  region: ap-chengdu
  runtime: Nodejs10.15
  apigatewayConf:
    protocols:
      - http
      - https
    environment: release
    serviceTimeout: 60
    autoCreateDns: false
  isAutoCiDeploy: false
  functionConf:
    eip: false
    timeout: 3           # 配置的响应超时时间,超过此时间接口未响应,就直接返回错误
    memorySize: 128      # 配置的服务使用的内存大小
  layers:
    - name: '${output:${stage}:${app}:suixinsuoyu-layer.name}'
      version: '${output:${stage}:${app}:suixinsuoyu-layer.version}'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

咱们只用关心 配置中加了注释的项

不同的框架/服务类型配置由些许差异

完整的配置介绍可翻阅文档:Serverless应用中心-yml文件规范 (opens new window)

测试发现,服务自动安装package.json中的依赖有些问题,为问题造成的避免影响,所以需要上传本地的node_modules目录

# 现有Express项目改造示例

  • 仓库完整源码 (opens new window)

# 原目录结构

├── README.md
├── _tests_
|  └── index.test.js
├── docs
|  ├── api
|  └── db.md
├── jest.config.js
├── package.json
├── src
|  ├── app.js
|  ├── config
|  ├── constants
|  ├── db
|  ├── routes
|  └── utils
└── yarn.lock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

src/app.js源码,省略部分代码

const dotenv = require('dotenv')
const express = require('express')

// 读取-打印环境变量
// 读取.env环境变量配置文件
console.log(dotenv.config())

const { serverConfig } = require('./config')
// 用户的所有路由
const mainRouter = require('./routes')

// 实例化express
const app = express()

// 注册一些中间件
app.use(express.urlencoded({ extended: false }))
app.use(express.json({ strict: true }))

// 首先进入的路由(全局的拦截器)
app.route('*').all(async (req, res, next) => {
  //  -------跨域支持-----------
  // 登录校验
  next()
})
// 注册所有路由
app.use(mainRouter)

app.listen(serverConfig.port, serverConfig.hostname, () => {
  console.log(`server start at ${serverConfig.hostname}:${serverConfig.port}`)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 改造步骤

参考上面叙述的两个步骤:

  1. sls.js,serverless.yml文件拷贝(一共3个),拷贝后的目录如下
├── LICENSE
├── README.md
├── _tests_
|  └── index.test.js
├── docs
|  ├── api
|  └── db.md
├── jest.config.js
├── layer       
|  └── serverless.yml # 1
├── package.json
├── serverless.yml   # 2
├── sls.js           # 3
├── src
|  ├── app.js
|  ├── config
|  ├── constants
|  ├── db
|  ├── routes
|  └── utils
└── yarn.lock

directory: 10 file: 11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  1. 小小修改 app.js 与 sls.js中的源码

src/app.js改动

// 省略其它代码
app.listen(serverConfig.port, serverConfig.hostname, () => {
  console.log(`server start at ${serverConfig.hostname}:${serverConfig.port}`)
})

// 添加的一行导出app实例
module.exports = app
1
2
3
4
5
6
7

sls.js源码

// 引入导出的app
const app = require('./src/app')

// 再将其导出
module.exports = app
1
2
3
4
5

大功改成,改造完毕

# 线上WebIDE查看源码

回到Serverless-应用选择我们刚刚创建的应用,回到熟悉的卡片页

图片

点击云函数蓝色的那个函数名称(是一个链接),就会跳转到WebIDE页面

图片

咱就能通过WebIDE查看到我们模板项目的源代码,其中还有一些不是模板中的代码,咱不管它,也不去修改

# 部署上线

下面咱简单修改一下我们刚才的那个模板项目,然后部署上线

# 简单修改模板

  • 模板修改后的完整源码 (opens new window)
点击查看 index.html 修改后的内容
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>随心所欲Demo - Express.js</title>
</head>

<body>
  <h1>
    接口列表(随心所欲Demo)
  </h1>
  <ul>
    <li><span>首页</span><span>GET:</span>/</li>
    <li><span>获取随机数字</span><span>GET:</span>/random/code</li>
    <li><span>登录</span><span>POST:</span>/user/login</li>
    <li><span>404</span><span>GET:</span>/404</li>
  </ul>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
点击查看 sls.js 修改后的内容
const express = require('express')
const path = require('path')
const app = express()

// Routes
app.get(`/`, (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'))
})

app.get('/random/code',(req,res)=>{
  res.send({
    num:Math.random()
  })
})
app.post('/user/login', (req, res) => {
  res.send({
    code:0,
    data:{
      token:'test-token'
    },
    msg:'ok'
  })
})

app.get('/404', (req, res) => {
  res.status(404).send('Not found')
})

// Error handler
app.use(function(err, req, res, next) {
  console.error(err)
  res.status(500).send('Internal Serverless Error')
})

app.listen(8080)

module.exports = app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 前置环境

  • Node.js

确保电脑上有Node.js环境,没有可参考菜鸟教程:Node.js (opens new window) 安装

打开你的终端工具查看是否拥有Node环境

node -v
1

图片

# Serverless Framework

安装Serverless Framework (opens new window)

npm install -g serverless
1

验证是否安装完成

sls -v
1

图片

# 部署

在项目跟路径执行部署指令

部署

sls deploy
1

会弹出一个登录界面,微信扫码登录即可

图片

此时静静等待几秒

图片

出现此图说明部署成功

图片

示例访问地址:https://service-rbji0bev-1256505457.cd.apigw.tencentcs.com/release/ (opens new window)

部署的GET接口地址:

  • GET /random/code (opens new window)
  • GET /404 (opens new window)

访问结果可以看出我们改造后的模板项目已经上去了

图片

到此从0-1的创建应用到部署上线的流程都走完了

# TODO

  • 补全原生Node使用HTTP模块开发的应用部署
  • 补全koa项目的部署
  • 探究一下终端如何展示二维码的,展示图片的可能性
Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34