从零到上线:Node.js 前后端开发选型与腾讯云无服务器部署实战

0 阅读4分钟

还在为买服务器、配 Nginx、搞域名备案头疼?本文带你用最省心的方式,把 Node.js 全栈项目部署到云端,全程不需要管理任何服务器。

一、为什么选择“无服务器”?

做过全栈开发的朋友都知道,传统部署有多折腾:买服务器、装 Node 环境、配 Nginx 反向代理、申请 SSL 证书、设置防火墙规则……一套流程走下来,半天就没了。

腾讯云 CloudBase 提供了一套无服务器(Serverless) 方案,把数据库、云函数、静态托管、身份认证全部封装好。你只需要写业务代码,剩下的交给平台。新账号有免费体验版,提供 3000 点/月的资源额度,个人项目完全够用。

二、技术选型:Vue 3 + Vite + Express

这套组合是目前 Node.js 全栈开发的主流选择:

  • 前端:Vue 3 + Vite,开发热更新飞快,构建产物是纯静态文件,适合部署到静态托管。
  • 后端:Express,轻量灵活,路由和中间件机制上手快。
  • 部署目标:腾讯云 CloudBase,前端走静态网站托管,后端走云函数。

项目结构很简单:

my-cloudbase-app/
├── frontend/          # Vue 前端
│   ├── src/App.vue
│   ├── index.html
│   └── package.json
├── cloudfunctions/
│   └── api/           # Express 云函数
│       ├── index.js
│       └── package.json
│       └── scf_bootstrap

三、第一步:写前端

创建一个最简单的 Vue 页面,功能是调用后端接口并显示返回内容:

frontend/src/App.vue

<template>
  <div style="padding: 40px; font-family: sans-serif;">
    <h1>CloudBase 部署测试</h1>
    <p>后端返回:{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const message = ref('加载中...')

onMounted(async () => {
  const res = await fetch('/api/hello')
  const data = await res.json()
  message.value = data.message
})
</script>

本地开发时,Vite 的 Dev Server 会处理页面,/api 请求通过代理转发到本地后端。

四、第二步:写后端云函数

CloudBase 的 HTTP 云函数支持 Express 框架,但有一个硬性要求:必须监听 9000 端口,且需要一个 scf_bootstrap 启动脚本。

cloudfunctions/api/index.js

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

app.get('/hello', (req, res) => {
  res.json({ message: 'Hello from CloudBase!' })
})

app.listen(9000, '0.0.0.0')

cloudfunctions/api/scf_bootstrap(注意:这个文件没有 .sh 扩展名,必须用 LF 换行)

#!/bin/bash
node index.js

创建后给它执行权限:

chmod +x cloudfunctions/api/scf_bootstrap

五、第三步:部署上线

5.1 安装 CLI 并登录

npm i -g @cloudbase/cli
tcb login

浏览器会自动打开授权页面,扫码或点击同意即可。

5.2 部署云函数

在 CloudBase 控制台创建一个环境,记下环境 ID,然后执行:

tcb fn deploy api -e <你的环境ID> --force

部署成功后,控制台会输出云函数的 HTTP 访问地址。

5.3 部署前端

先构建,再部署:

cd frontend
npm install && npm run build
tcb hosting deploy dist -e <你的环境ID>

静态托管会自动分配一个默认域名(格式类似 https://xxx.tcloudbaseapp.com),免备案,直接就能访问

5.4 打通前后端

前端部署后,/api/hello 请求不会自动路由到云函数。需要在 CloudBase 控制台配置 HTTP 访问服务,添加路径映射:

  • 路径:/api/*
  • 映射到:api 云函数

或者更简单:在前端代码里把请求地址改成云函数的完整 HTTP 地址,重新构建部署一次。

六、最终效果

浏览器打开默认域名,页面显示:

CloudBase 部署测试 后端返回:Hello from CloudBase!

整个过程没有买服务器,没有配 Nginx,没有申请 SSL 证书。HTTPS 是自动的,域名解析是自动的,扩缩容也是自动的。空闲时云函数实例缩容到零,不产生费用。

七、为什么推荐这套方案?

对于个人开发者和中小型项目,CloudBase 有几个明显优势:

  • 上手极快:CLI 一条命令完成构建+部署,不需要理解 Docker、K8s 这些底层概念。
  • 成本可控:免费额度对个人项目绰绰有余,付费也是按量计费,没有闲置资源浪费。
  • 中文生态完善:文档是中文的,控制台是中文的,遇到问题查资料方便。
  • 一体化:数据库、存储、认证都是现成的,需要时直接接入,不用再去拼装第三方服务。

如果你刚学完 Node.js 前后端,想快速把项目发到网上给朋友看,CloudBase 是目前国内最省心的选择之一。