用ChatGPT生成网站前端页面和Dockerfile并部署上线

背景

上文用Java调用OpenAI API查询账户余额已经写好了后端，并且可以通过 postman 直接调用接口查询余额。可是这样毕竟不方便，要是有个前端页面的话，服务部署好就直接浏览器访问就可以了。可我对前端不熟悉，怎么办？ChatGPT：这个好说，看我的！

生成前端

直接把需求描述一下提给 ChatGPT，我说：

帮我写个前端页面，要求很简单：

1.标题是[查询 OpenAI API 余额]，下面是一行提示[本站不保存 KEY 信息，查询后请自行保存]，再下来就是输入框和查询按钮

2.查询时调用后端接口，接口地址/balanceQuery，参数只有一个apikey，就是输入框中输入的内容，发送get请求

3.查询结果若响应正确，后端会返回类似{“code”:0,“msg”:“成功”,“data”: “total”:18,“used”:1.795,“balance”:16.205}}这样的数据，如果出错，会返回{“code”:-1,“msg”:“请求出错——Incorrect API key provided”,“data”:null}，请对后端返回的信息进行合理展示

看来确实比较简单，ChatGPT 直接给出了代码：

将其代码保存为html 文件，一打开，好家伙，这也太简陋了

那接下来，我们就让他变美：

一提需求他就马不停蹄地写代码了，这次让我们检验一下成果：

果然比第一次好看多了，那接下来我们将他部署起来吧。

平时工作中的项目一般比较复杂，采用的都是前后端分离架构，我这就是个小项目，没有必要搞前后端分离，还要配置 nginx 什么的，太麻烦了。依稀记得是把前端文件放到SpringBoot 项目的src/main/resources/templates 目录下，然后就照此实践了下，启动项目，看到了熟悉的404。。。

再来问问 ChatGPT 老师：

原来如此，是缺少依赖了啊，加上之后，完美运行，测试一下看看效果：

好了，接下来就是打成 jar 包，丢到服务器上，就可以让大家访问啦。

Hold on, Hold on, Hold on……

我突然想到，前段时间有看到过一个网站，https://railway.app 支持部署 docker 上去，这样都用不着买服务器了。

开干！

生成 Dockerfile

依旧是让 ChatGPT 来帮我生成个 Dockerfile

不止给了我 Dockerfile，还给我解释一通参数的意思，最后还教我如何构建及运行，真是贴心！

复制到文件中，命名为 Dockerfile ,先在本地测试一下，直接在 Idea 构建运行：

nice！运行通过，一次成功！

接下来，就将其部署到 railway 上就好了，这个部署和在 Vercel 上部署（参考：保姆级教程教你搭建自己的ChatGPT国内镜像站）方式很类似，都是需要先将代码上传到 Github 仓库，然后用 Github 账号登录，导入之后就可以一键部署了。

正当我开心准备部署时，打开railway ，我发现自己这个月的免费额度用完了。。

原来是上个月末为了体验这个网站，随便部署了一个项目上去，忘了关闭了，超出了每月500小时的免费时长限制。

没有关系，我又想到了一个网站 https://zeabur.com ，这是国内一个创业公司正在做的，之前看到过介绍，也可以支持docker部署，来试试吧：

一路傻瓜式操作，很顺畅，而且导入后自动识别项目类型，并触发自动构建，等待构建结束吧。

哦吼，构建出错了：

错误详情：

STEP 4/8: COPY ${JAR_FILE} app.jar

  

00:14Error: building at STEP "COPY ${JAR_FILE} app.jar": checking on sources
under "/src": copier: stat: "/target/openai-java-0.0.1-SNAPSHOT.jar": no such
file or directory

原来是构建时没找到这个 jar 文件，之前本地之所以可以构建成功，是因为本地构建 docker 镜像前已经进行过 Maven 打包了。

那就再麻烦 ChatGPT 改一下 Dockerfile 咯：