不到10分钟,创建并部署一个在线gpt聊天室项目

288 阅读2分钟

原文链接: Next.js Chat

官方项目链接:chat.vercel.ai/

大家好,我是evanryuu😎

今天这篇文章告诉大家如何通过vercel快速部署一个gpt聊天室。只需要如下条件:

  1. 有一个Github账号
  2. 有能用的openai的apikey,可以在OpanAI Api-keys这里去生成一个 image.png

使用github登录

点进官方教程页之后,用github登录网页。

image.png

创建仓库

登录之后应该会自动选中你的git scope(你的账号),不想用默认的仓库名的话就改改就行。好了之后点击右下角的create就会自动创建了。

image.png

自动创建存储数据库

在这里选择添加。注意:普通Vercel账号只能添加一个KV数据库,要添加更多的话就需要升级为Pro。

image.png

配置环境变量

image.png

也可以点击右下角的Learn more,注释也很详细了: github.com/vercel/ai-c…

我按照顺序说下这4个值分别怎么获取

1. OPENAI_API_KEY

直接登录OpenAI的网站,拿到apikey填进去就好。

2/3. AUTH_GITHUB_ID / AUTH_GITHUB_SECRET

这一步需要创建一个Github Oauth App,可以通过这个url创建。需要注意的是两个url需要我们部署项目之后才会有正确的url,现在先填个如图所示的url就好。

image.png

创建好了之后可以通过github.com/settings/developers 里找到Oauth Apps找到刚才注册的App

image.png

点进App,如图所示就是我们需要的AUTH_GITHUB_ID和AUTH_GITHUB_SECRET

image.png

4. AUTH_SECRET

可以直接通过这个网站随便生成一个就行。

完成剩下的步骤

接着在vercel那个网页往下走就好了,没别的什么要填的啦。

修改github Oauth app的url

进入vercel的官网 vercel.com ,在项目里找到刚刚部署的项目后复制线上域名,回到github修改oauth app的首页和callback url就好了。

image.png

然后我们就可以去线上的项目里试试效果啦!

showcase.gif

如果你看完这篇文章觉得有点收获的话,希望你能给我点一个免费的赞,这会对我写文章给予莫大的激励,感谢😄