Claude Code+宝塔面板：网站上线部署的喂饭级教程，前端后端分分钟搞定！现在在各种AI编程工具的加持下，让开发变

哈罗，大家好，我是涛哥，上市公司程序员裸辞，All in AI，探索AI编程更多可能，主要使用Claude Code等AI编程工具进行开发，打造一人公司，立志在AI时代做出世界级产品。

现在在各种AI编程工具的加持下，让开发变得非常快，很多开发小白也能快速做出一个功能齐全的网站。

但是如何把做好的网站发布到线上，给其他用户访问、使用成了我们不得不面对的一个问题。

在昨天的这篇文章中 Claude和Cursor的最佳拍档！宝塔面板1小时成功上线（前端篇）我们把前端页面已经在宝塔中部署好了。今天我们需要完成后端服务的部署，并配置 Nginx 网关，让前端页面能够顺利调用后端接口，最终实现一个完整的线上可访问网站。

这个教程使用后端的代码我以开源的这个项目（github.com/samelltiger… 为例，该项目是这个提示词网站的后端服务的半成品仓库，我在这个半成品的基础上开发了提示词网站的相关接口。

先简单介绍一下这个仓库的文件：

prompt-backend-template/
├── cmd/                    # 主程序入口
│   └── main.go
├── internal/               # 内部业务逻辑
│   ├── api/               # API 路由和处理器
│   │   ├── admin/        # 管理员 API
│   │   ├── chat/         # 聊天接口
│   │   └── dashboard/    # 仪表板接口
│   ├── middleware/        # 中间件
│   ├── models/           # 数据模型
│   └── service/          # 业务服务层
├── pkg/                   # 公共库
│   ├── cache/            # 缓存组件
│   ├── cron/             # 定时任务
│   ├── database/         # 数据库连接
│   ├── logger/           # 日志组件
│   ├── oss/              # OSS 存储
│   ├── queue/            # 消息队列
│   └── util/             # 工具函数
├── config/               # 配置文件
│   ├── config.yaml      # 开发配置
│   └── config.prd.yaml  # 生产配置
├── web/                 # 静态文件（前端界面）
├── scripts/             # 脚本文件
├── docs/               # 文档
└── deploy/             # 部署文件

上面是原始代码文件目录和功能说明，但是这只是个半成品，因此我本地的文件目录是有所修改的，是增加了提示词数据拉取等接口逻辑的。下面开始利用宝塔程序来部署后端服务。

上传代码文件

首先，我们要将项目的代码文件夹压缩成zip文件（我本地后端代码文件夹为 nano-banana-prompt）：

压缩代码文件夹

压缩后的文件就在上图中第一个zip文件。

完成压缩之后，我们要打开宝塔的“文件”页面，并开始上传zip文件：

上传zip文件

点击开始上传后，等待文件上传完成，然后要对文件进行解压：

解压上传的zip包文件

解压zip文件的设置

下面是解压后文件夹文件列表的截图：

解压后的文件列表

记住这个解压后的目录，后面会用到，比如我这里是 /www/wwwroot/nano-banana-prompt

在本地编译go代码

由于go语言是编译型语言，在运行之前需要编译的。虽然我们最终是在服务器上运行网站，但考虑到服务器可能没有安装 Go 环境，我们选择在本地编译成 Linux 可执行文件，再上传到服务器运行。

首先，在本地打开终端程序或者 CMD程序：

进入终端的后端代码目录

在终端或cmd中执行以下命令：

# 进入到后端代码目录 比如，我的是 h:/code/nano-banana-prompt
h:  # 说明：windows切换到h盘符就是这个命令
cd code/nano-banana-prompt

# 编译go代码为二进制程序
go env -w GOOS=linux; go env -w GOARCH=amd64; go build -o main .\cmd\main.go

# 重要：编译完以后需要恢复回来，要不然以后编译的都是linux程序
# 这个在windows里是运行不了的
# 重置为 Windows
$env:GOOS = "windows"
$env:GOARCH = "amd64"

编译完以后会得到一个main文件，这个文件就是编译出来的可以在Linux里面运行的文件：

编译后的main程序

上传Linux可执行文件到服务器

我们再次进入宝塔的网页里，在服务器上的代码文件夹内（比如我这里是 /www/wwwroot/nano-banana-prompt 点击上传/下载按钮）

上传文件1

上传刚才在windows下编译好的main文件：

上传mainn文件

好了，到此，这个go项目所需要的所有文件就准备好了，下一步需要用宝塔将这个程序运行起来。

运行后端程序

为了运行这个后端程序，我们需要进入宝塔的 “网站页面”，点击 GO项目，再点击 “添加GO项目”。

添加GO项目

在弹出的添加GO项目框中，配置如下内容：

注意，里面之所以配置为9702，是因为我们项目的配置文件config/config.yaml 里配置的端口就是9702，需要保持一致。

配置GO项目

然后我们可以看到页面中多了一个任务记录，然后将这个程序启动起来。

启动GO程序

验证是否启动成功：

你需要找一个你开发的接口，然后在终端或者cmd中执行如下命令：

curl --location --request GET \
'http://你的服务器的IP:9702/api/prompts?page=1&page_size=10'

也可以用这个软件 Apifox，设置好你的接口地址和请求参数，看看接口有没有正常返回数据，如果有数据返回，那么表示是没什么问题的。

调用验证接口

这样，我们的后端服务就已经运行起来了，接口也已经可以正常返回数据了。但是现在还有个问题，如果你打开前端页面，就会发现，前端页面里面的提示词数据还是没有拉取到啊。这是因为我们还缺少一步，需要再设置一下nginx网关服务器。

配置前端项目的nginx服务器

为什么要配置nginx服务器呢？

nginx是我们这个网站的入口，所有的请求都会经过这个入口。

可以把网站想象成一家奶茶店，奶茶店里有两名员工：

前端小哥：负责把奶茶（网页）递送给顾客，长的帅，但是不懂怎么做奶茶的原料（数据）。

后端大厨：躲在厨房拼命煮珍珠、泡茶（数据），但不会直接面对顾客（用户）。

现在有个比较尴尬的问题：

顾客（浏览器/用户）想点一杯“提示词奶茶”，于是对前端小哥说：“我要 /api/prompts 口味！”

前端小哥一脸懵：“我只是个递奶茶的，厨房在哪？/api/prompts 是啥？我没听过啊！”

这时候就需要一个店长——Nginx：

店长站在柜台，所有顾客先找他。

他耳朵很灵，听到顾客说要 “/api/xxx” 的东西，立刻转身朝厨房大喊：“大厨！有人要 /api/prompts 数据！快端出来！”

大厨把数据做好后，店长再转手递给前端小哥，前端小哥笑眯眯地送给顾客。

简而言之，Nginx就是一个传话员。所以我们现在要做的就是，给店长（Nginx一本暗号手册），告诉他“只要听到 /api 开头的订单，一律送到厨房（后端服务程序）处理！”。

这个手册在实际配置中就是一段文本内容，把 /api 开头的请求转发到后端地址，比如 http://localhost:9702 。

nginx配置举例：

# 店长手册：遇到/api开头的url就转给厨房
location /api {
    proxy_pass http://localhost:9702;  # 后端大厨的厨房地址
}

正式配置nginx

现在我们就要给告诉nginx碰到那些情况要找大厨。

我们的后端接口的url全部是以 /api 开头的，所以就像上面那样在nginx里面添加一个 location /api 这个配置，下面配置的是 proxy_pass http://localhost:9702 ，意思就是：你如果碰到 /api 开头的请求，那么就转发到 http://localhost:9702 。这个9702就是我在后端程序里面配置的那个端口。

开始配置Nginx，首先，我们先要打开“网站”页面，再点击HTML项目，再点设置。