手把手搭一套ChatGPT聊天服务（附源码：前端+后端）

最近发现ChatGPT越来越好用了，特别是工作和学习的时候，比搜索引擎更能给出靠谱的引导和总结。

非常适合学习一门新技能，他能给出更靠谱且更容易理解的答案。

但有个问题：只能PC上用，最近新换的手机，没有梯子（iOS用户的翻墙成本是在太高）

所以抽空速度肝了一个WebApp出来，适配移动端页面，手机上随时访问，且不必翻墙，终于可以随心所欲啦～～

体验Demo

ChatGPT Service​chat.webinfra.cloud

项目结构说明

├── client

├── node-api

├── Dockerfile

├── README.md

├── assets

├── LICENSE

服务端项目fork自upstream项目html免费网站模板带后台，该项目最开始用做调用OpenAI内部训练的免费模型，不过稳定性不好，维护成本较高，目前不推荐了。 也保留了该项目的README文件用做参考或者直接去原项目查看详情。

快速开始

因为vercel被墙html免费网站模板带后台，国内体验并不友好，所以也没有做自动部署，大家直接看源码即可

启动服务端

服务端代码在node-api目录中，是个标准的 nodejs 项目

进入目录中，先安装依赖：

npm install
复制代码

启动项目

npm run start
复制代码

注意：项目启动时唯一需要配置的是 OpenAI 账户的 ApiKey，可以通过命令行中直接配置环境变量OPENAI_API_KEY，在生成环境，建议通过settings.js来配置。

另外，如需同时配置多个ApiKey，只需要将多个key中间用","隔开即可，注意中英文切换，例如

OPENAI_API_KEY=sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc,sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc,sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc
复制代码

配置项

服务端启动成功

启动前端页面

前端页面代码在目录client中，是个简单的CRA项目

进入目录中，先安装依赖：

npm install
复制代码

然后，启动项目

npm run start
复制代码

即可开始愉快地聊天啦～

功能列表已开发功能待开发功能源码

这里把代码分享出来，动手能力强的小伙伴们，也可以自己部署一套

欢迎PR和提issue

Github链接：

GitHub - frontend-engineering/chatgpt-webapp-fullstack: A fullstack chat webapp based on ChatGPT/BingAI/AndMore...​github.com/frontend-engineering/chatgpt-webapp-fullstack/tree/main