CloudBase AI Toolkit | 没有服务器，怎么云化部署前后端项目....

最新推荐文章于 2025-07-07 10:48:06 发布

原创最新推荐文章于 2025-07-07 10:48:06 发布 · 702 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #服务器 #运维

前言

对于很多学生来说，实现一个H5的系统很简单，最不济从github上找一个代码改改就可以了。但是对于如何将这个系统部署运行起来，可能会遇到很多的问题。首先就是需要花钱购买一台服务器，其次就是环境搭建和一些运维工作，资金投入和工作量就是挺大的。

然后最近刚好有小伙伴问到我，如果没有服务器怎么运行。我给出了两个方案：

在本地电脑上运行，但是只能当测试自己访问
使用云开发 CloudBase

云开发 CloudBase

说起云开发 CloudBase，我可以说再也熟悉不过了，作为腾讯云提供的云原生一体化开发环境和工具平台，我之前使用 CloudBase 可视化开发了一个微信小程序，也体验了一把与AI协同开发的快感。而今天，CloudBase 又带来了新的能力：CloudBase AI Toolkit。

CloudBase AI Toolkit

CloudBase AI ToolKit 是腾讯云开发CloudBase 的新能力，它无缝适配主流 AI 编程工具（如Cursor、CodeBuddy、Trae、WinSurf等），它能自动帮你生成可直接部署的前后端应用+小程序，并一键发布到腾讯云开发，可以通过简单的MCP配置即可拥有以下能力：

🤖 AI 原生 - 专为 AI 编程工具设计的规则库，生成代码符合云开发最佳实践
🚀 一键部署 - MCP 自动化部署到腾讯云开发 CloudBase 平台，Serverless 架构无需购买服务器
📱 全栈应用 - Web + 小程序 + 数据库 + 后端一体化，支持多种应用形式和后端托管
🔧 智能修复 - AI 自动查看日志并修复问题，降低运维成本
⚡ 极速体验 - 国内 CDN 加速，比海外平台访问速度更快
📚 知识检索 - 内置云开发、微信小程序等专业知识库的智能向量检索

具体用法和配置可以参考：AI ToolKit GitHub地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit

安装

我们打开codebuddy的mcp市场，在MCP Server中配置CloudBase-AI-ToolKit mcp。

{
  "mcpServers": {
    "cloudbase": {
      "command": "npx",
      "args": ["-y", "@cloudbase/cloudbase-mcp@latest"]
    }
  }
}

或者在 MCP市场直接搜索 CloudBase AI ToolKit 安装即可。

配置成功之后，可以看到 CloudBase AI Toolkit 提供的Tools，其中包括登录云开发（login），上传文件（uploadFiles)等。

我们在AI Promot中输入登录云开发，CloudBase AI Toolkit 会调用 login 这个工具。

然后在浏览器访问 clodebase，我们扫码登录之后，确认 CLI 授权，CloudBase AI Toolkit 就与你的 cloudbase 环境相关联，然后也具备了操作 cloudbase 的能力。

那么，如何开通一个免费的 cloudbase 环境呢？

cloudbase开通

我们登录到云开发 CloudBase，点击 立即体验，进入到云开发的环境列表，这时候是列表空白的。

点击 开通环境，进入到购买页面，这时候我们选择 个人版，输入环境名称，购买时长选择 开发期，点击立即购买，可以看到费用为0元。

然后我的环境列表里面就有了刚刚创建的 aqi-tcb 这个云开发环境。

进入环境，我们就看到后台列表。

项目部署

万事俱备，我们就开始使用 CloudBase AI Toolkit 将我的项目部署到cloudbase中。因为我这个项目是已经存在的H5前后端项目，前端使用的 nodejs + vite + vue 的架构，后端是springboot。CloudBase AI Toolkit提供了微信小程序、React/Vue Web应用、UniApp的云开发模版可供下载使用。

后端部署

因为前端要调用后端的接口，所以我们首先完成后端的云开发部署，然后才能在前端项目中调用后端接口请求数据。因为我的后端是 springboot 项目，所以需要使用 cloudbase 的 云托管 功能。

云托管提供了六种托管方式，我尝试了其中的两种：容器镜像部署和本地代码部署。镜像容器部署需要将本地的创建的image推送到 docker仓库，腾讯云也有这种服务。而本地代码部署需要在项目下生成Dockerfile，然后上传到 cloudbase，由cloudbase 进行部署。

Dockerfile

这里我选择使用容器镜像部署，首先进入到后端项目目录，生成 Dockerfile。

FROM maven:3.6-jdk-11 as builder

# 将代码复制到容器内
WORKDIR /app
COPY pom.xml .
COPY src ./src
COPY settings.xml /root/.m2/settings.xml

# 构建项目
RUN mvn package -DskipTests

# 使用 AdoptOpenJDK 作为基础镜像
# https://hub.docker.com/r/adoptopenjdk/openjdk8
# https://docs.docker.com/develop/develop-images/multistage-build/#use-multi-stage-builds

#FROM alpine:3.13
FROM eclipse-temurin:11-jre-alpine

# 将 jar 放入容器内
COPY --from=builder /app/target/*.jar /jwgl.jar
CMD ["java", "-jar", "/jwgl.jar"]

这是我根据 cloudbase 文档中的样例进行修改的，除了基本的项目配置，我将基础镜像由 alpine:3.13 修改成了 eclipse-temurin:11-jre-alpine，因为我在使用 alpine 构建的镜像生成容器之后，提示 “PATH 找不到 java 命令”。

images

然后就是使用 docker build 根据Dockerfile来构造镜像。

接下来就是将jwgl这个image推送到腾讯云的镜像仓库，或者其他的远程仓库，然后我们记住镜像地址就可以了。

云托管

再次进入到云托管平台，选择 通过容器镜像部署，进入到配置页面。

输入远程镜像地址、服务名称，然后配置容器端口，这里我配置的 8080 是我的springboot服务端口，在项目的server.port中可以看到。这也是我在上面 Dockerfile 中没有使用 EXPOSE 开放8080的原因。

其他命令我在构建images的时候都已经定义好了，所以这里我们直接点击部署就可以了。在部署页面等待一会，看到状态正常即是部署完成。

在服务详情里面就可以看到云托管项目。

在概览里面可以找到默认的域名，复制下来配置到前端api中，这就是相当于我们的服务ip + 8080端口。

接下来就是部署前端代码。

前端部署

我使用 prompt 部署前端项目到云开发，在调用 getWebsiteConfig 和 uploadFles 上传云开发的过程中也发现了一些类型错误的语法问题。

于是我们配合 CloudBase AI Toolkit 进行修复，让项目适配cloudbase。

并将前端项目中的 api，修改成 cloudbase 托管的springboot后台服务。

在修改之后，本地调用 npm run build 完成了前端项目的打包，并将js文件这些静态文件上传到了 云开发静态托管，并返回了一个 url。

如何确定这些文件是否真正上传到我们的云开发平台了呢，我们登录云开发控制台/静态网站托管，可以看到刚刚上传的前端文件目录。

我们通过 url 就可以访问我们的前端页面。

然后输入账号、密码就进入到了系统页面。

通过控制台，我们可以看到前端调用的后端接口，就是我们在cloudbase托管的springboot后台服务。

这样我们就解决了开头所提到的无服务器部署的问题，接下来就是运维的问题。

运维

我们在云托管中，可以通过 监控概览 查看后台接口的调用次数、QPS以及一些响应指标。

也可以在 服务详情 中看到后台的运行日志，能够分析一些运行中遇到的问题。

其次，在部署过程和运维过程中遇到问题，可以一键将问题反馈给云开发copilot，获得 AI 的协助。

数据库

同时cloudbase要提供了强大的数据库能力，可以使用cloudbase的云数据库，也可以将自有的数据库托管到cloudbase。

如果想要实现整个项目的云化部署，只需要在cloudbase中一键开通MySQL云数据库即可。

结语

在这次将H5前端 + springboot后端项目无服务器部署的过程中，体验了cloudbase强大的云托管能力，也体验了CloudBase AI Toolkit与CloudBase的AI协作能力。通过云托管，我们可以轻松部署多种语言的后端服务，而CloudBase AI Toolkit让我们的 AI 无缝集成了cloudbase的强大能力，有兴趣的可以体验一下。