还在为买服务器、配 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 是目前国内最省心的选择之一。