关于前端:私有化部署chatGPT告别网络困扰

最近的 chatGPT 是热气腾腾，根本人手一个。工具用的好，工作 5 分钟，划水一整天。

然而也会有不少懊恼，拜访官方网站都有网络的问题，须要 FQ 解决。这类工具也还是会有网络稳定的问题，也有肯定的平安危险。明天介绍一个计划，从此辞别网络的问题，私人独享属于本人的 chatGPT，不再放心想用的时候拜访不了的状况。

这个我的项目是一个国内大佬 ddiu8081 开源的 chatGPT 我的项目，基于 OpenAI GPT-3.5 Turbo API 的 demo。界面如下所示，十分简洁难看，反应速度晦涩，还能够设置场景角色提醒词，更好的和 chatGPT 交换。

本地部署

本地部署须要有肯定的前端开发环境，如果没有开发环境可间接跳过看下一种在线部署到云端的形式。

前置环境筹备

1 Node：在部署之前要装置 node 环境。查看您的开发环境和部署环境是否都应用 Node v18 或更高版本，你能够应用 nvm 治理本地多个 node 版本。能够应用上面的命令查看 node 的版本。

node -v

2 PNPM: 举荐应用 pnpm 来治理依赖，如果你要用 npm 装置依赖也是能够的，如果你素来没有装置过 pnpm，能够应用上面的命令装置：

npm i -g pnpm

3 OPENAI_API_KEY: 在运行此应用程序之前，您须要从 OpenAI 获取 API 密钥。您能够在官网 beta.openai.com/signup 注册 API 密钥。

本地运行

1 克隆我的项目到本地的两种形式，仓库地址如下:

// http
git clone https://github.com/ddiu8081/chatgpt-demo.git
// ssh
git clone git@github.com:ddiu8081/chatgpt-demo.git

2 克隆下载实现后，进入我的项目跟目录，在终端输出如下命令装置依赖：

pnpm install

3 复制 .env.example 文件，重命名为 .env，并增加你的 OpenAI API key 到 .env 文件中。

OPENAI_API_KEY=sk-xxx...

4 运行利用，本地我的项目运行在 http://localhost:3000/

pnpm run dev

tips：因为是本地运行，所以还是会有网络的问题，如果你有相干工具，能够进行配置，配置 .env 文件中的 HTTPS_PROXY 即可。

# Provide proxy for OpenAI API. e.g. http://127.0.0.1:7890
HTTPS_PROXY=

部署到 Vercel

Vercel 是一个云端部署和服务平台，它提供了一个疾速、平安、可扩大的形式来部署和治理古代 web 应用程序和网站。

部署到 Vercel 绝对比较简单，点击仓库的 README 文件的 Deploy with Vercel 跳转到 Vercel 中设置相干 OPENAI_API_KEY 即可。

部署到 Netlify

Netlify 是一个现代化的 Web 应用程序部署和托管平台，它提供了一个疾速、简略、平安、自动化的形式来构建、部署和治理 Web 应用程序。

1 Fork 此我的项目，返回 https://app.netlify.com/start 新建站点，抉择刚刚 fork 实现的我的项目，将其与 GitHub 帐户连贯。

2 抉择要部署的分支，抉择 main 分支，在我的项目设置中配置环境变量，环境变量配置参考下文。

3 抉择默认的构建命令和输入目录，单击 Deploy Site 按钮开始部署站点。

4 部署实现后在集体的站点外面即可看到对应的拜访地址，如果集体有域名也能够设置自定义域名。

部署实现后拜访地址能够看到运行失常，网络顺畅。

为了避免别人应用能够为网站设置明码，批改 .env 中的 SITE_PASSWORD 配置即可，以下是有设置明码的款式。

环境变量

最初

整个装置部署的教程就到此结束了，绝对还是比较简单，从此再也不必放心网络的问题了，电脑手机随时随地都能够应用。有趣味的敌人能够试试看，有遇到装置或部署问题的欢送留言交换。

看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）