首先我關(guān)注這個(gè)項(xiàng)目有一段時(shí)間了，不得不說作者和他的社區(qū)真的很猛！

首先這個(gè)項(xiàng)目截至目前已經(jīng)有了40.9K的Start了，F(xiàn)ork也已經(jīng)有了38.1K了，這個(gè)數(shù)據(jù)真的超級(jí)牛批了。

那么我們來看一下這款號(hào)稱： “一鍵擁有你自己的跨平臺(tái) ChatGPT 應(yīng)用”。的應(yīng)用都有那些過人之處吧。

不想看的直接去搭建好的站點(diǎn)體驗(yàn)，下面的教程是針對(duì)想自己搭建和自己本地運(yùn)行的

https://ikunn.ciu?

根據(jù)作者的ReadMe寫道：

主要功能

• 在 1 分鐘內(nèi)使用 Vercel?免費(fèi)一鍵部署

• 提供體積極小（~5MB）的跨平臺(tái)客戶端（Linux/Windows/MacOS）,?下載地址

• 完整的 Markdown 支持：LaTex 公式、Mermaid 流程圖、代碼高亮等等

• 精心設(shè)計(jì)的 UI，響應(yīng)式設(shè)計(jì)，支持深色模式，支持 PWA

• 極快的首屏加載速度（~100kb），支持流式響應(yīng)

• 隱私安全，所有數(shù)據(jù)保存在用戶瀏覽器本地

• 預(yù)制角色功能（面具），方便地創(chuàng)建、分享和調(diào)試你的個(gè)性化對(duì)話

• 海量的內(nèi)置 prompt 列表，來自中文和英文

• 自動(dòng)壓縮上下文聊天記錄，在節(jié)省 Token 的同時(shí)支持超長對(duì)話

• 多國語言支持：English, 簡體中文, 繁體中文, 日本語, Espa?ol, Italiano, Türk?e, Deutsch, Ti?ng Vi?t, Русский, ?e?tina

• 擁有自己的域名？好上加好，綁定后即可在任何地方無障礙快速訪問

  那么這是這個(gè)項(xiàng)目中基本的一些功能清單，另外功能還在陸續(xù)更新中，我們今天著重講解一下如何使用他。

  首先，你如果想在自己的本地PC上直接使用的話，你無需下載NodeJS、Yarn等的環(huán)境配置文件，也就是說門檻為0！，作者在Releases中已經(jīng)打造好了全面適配Windows和MacOS的桌面端應(yīng)用，也就是說你直接下載解壓后直接啟動(dòng)就可以運(yùn)行了。

  下面我們進(jìn)入倉庫地址：

• https://github.com/Yidadaa/ChatGPT-Next-Web

  在右側(cè)的Release中直接點(diǎn)擊，選擇適合自己的操作系統(tǒng)版本，下載解壓后直接使用即可。

  
  

目前截至發(fā)稿日最新的版本為v2.9.4

下面讓我來給大家做一個(gè)教程和評(píng)測(cè)吧。

我們圍繞著三個(gè)主流系統(tǒng)上如何使用：

1、windows安裝使用（這里會(huì)穿插講解一下原生代碼Clone到本地后的運(yùn)行方法）

2、MacOS上安裝使用

3、寶塔面板如何運(yùn)行部署

后面會(huì)統(tǒng)一講解一下如何設(shè)置APIKey和代理節(jié)點(diǎn)的使用方法。

1、在Window上安裝使用

首先我們來看Widnows版本用戶的”傻瓜式“安裝使用

1、首先我們通過剛才的界面直接下載ChatGPT.Next.Web_2.9.4_x64-setup.exe 這個(gè)即可

下載后是一個(gè)可.exe的可執(zhí)行文件，大概是這樣子的

接下來我們雙擊運(yùn)行它，可能會(huì)出現(xiàn)下面的彈窗，我們不用管他，點(diǎn)擊仍然運(yùn)行即可。

（這里需要注意的是，下載安裝的文件目錄一定是在某個(gè)盤下的二級(jí)目錄，不要直接安裝在比如D:// 下的一級(jí)目錄下，他會(huì)有個(gè)提示的，沒關(guān)系）

點(diǎn)擊仍然要運(yùn)行后，我們會(huì)出現(xiàn)以下界面，我們點(diǎn)擊Next

我們Next后會(huì)出現(xiàn)讓你選擇安裝目錄的路徑，這里注意一下我上面說的路徑問題。

我們自己選擇到對(duì)應(yīng)的目錄位置后，繼續(xù)點(diǎn)擊Next

接下來我們點(diǎn)擊Install

我們Install后會(huì)出現(xiàn)兩個(gè)選項(xiàng)，分別是Run ChatGPT Next Web? 和Create desktop short truct

至于一個(gè)意思是現(xiàn)在立刻運(yùn)行?ChatGPT Next Web這個(gè)軟件，一個(gè)是創(chuàng)建桌面快捷方式。我們根據(jù)自己的需求勾選或者取消即可，

這樣我們就完成了Windows上安裝——————簡直不要太方便了兄弟們，這個(gè)項(xiàng)目的牛逼之處就在于，很多Github上的代碼你都需要拉下來重新編譯，有時(shí)候環(huán)境不對(duì)的情況下還會(huì)導(dǎo)致錯(cuò)誤失敗的原因，這個(gè)Release中就相當(dāng)于幫你打包成了完整的軟件，就像我們常用的QQ和微信一樣，直接桌面安裝。真的非常厲害！

我們安裝完成后直接點(diǎn)擊Finish就可以看出來直接在本地就能運(yùn)行了。就像微信一樣簡單Easy。

下面我們切換一下分支，來講解一下，如何在本地Build和Install運(yùn)行他，也就是我們常說的本地編譯，如果你是一名開發(fā)者你肯定不會(huì)陌生這些操作，尤其是前端的同學(xué)們，這節(jié)主要是為了方便你自己本地進(jìn)行修改代碼和學(xué)習(xí)代碼來用的，其實(shí)一般操作這一步驟的同學(xué)基本都是同行了。就不贅述那么多，直接來講一下吧。

首先我們使用Git命令將次倉庫Clone下來

我們桌面新建一個(gè)文件夾。

右鍵使用GitBash進(jìn)行操作。

輸入命令：git clone?https://github.com/Yidadaa/ChatGPT-Next-Web.git??

出現(xiàn)100% 就說明我們已經(jīng)把這個(gè)倉庫的代碼Clone下來了。

我們雙擊進(jìn)入該文件夾，我們就可以看到改代碼了。

如果你想本地運(yùn)行它，請(qǐng)確認(rèn)你的電腦中有NodeJS 這些環(huán)境，最基本的你要有

我們?nèi)绾螜z查呢？使用Win+R 輸入CMD? ?進(jìn)入控制臺(tái)。輸入Node -v檢查我們的Node版本。

yarn 自己安裝

我這里使用的是16.19.1版本的NodeJS? 你可以嘗試一下其他版本，沒試過其他的我不曉得。

那么確定好版本之后呢，我們需要給他配置一個(gè)環(huán)境變量，我們看到剛才的文件夾下方有一個(gè)叫做.env.template 的文件? 他就是一個(gè)環(huán)境配置文件的模板，我們復(fù)制他 并且使用F12 對(duì)他進(jìn)行重命名，把后面的?.template去掉，改成.env?

那么我們創(chuàng)建好這個(gè)文件夾之后，我們來使用記事本進(jìn)行打開，為他填上所需要的變量，這里給大家截個(gè)圖，然后我們按照需要自行配置即可。

我們打開后就會(huì)看到下面的文件，以及一大堆的配置參數(shù)。

下面我們來詳細(xì)講解一下配置參數(shù)里面的東西，以及如何配置吧。

OPENAI_API_KEY?（必填項(xiàng)）

OpanAI 密鑰，你在 openai 賬戶頁面申請(qǐng)的 api key。? 買key可以來：https://hezuba.top/

CODE?（可選）

訪問密碼，可選，可以使用逗號(hào)隔開多個(gè)密碼。

警告：如果不填寫此項(xiàng)，則任何人都可以直接使用你部署后的網(wǎng)站，可能會(huì)導(dǎo)致你的 token 被急速消耗完畢，建議填寫此選項(xiàng)。

BASE_URL?（可選）

Default:?https://api.openai.com

Examples:?http://your-openai-proxy.com

OpenAI 接口代理 URL，如果你手動(dòng)配置了 openai 接口代理，請(qǐng)?zhí)顚懘诉x項(xiàng)。

如果遇到 ssl 證書問題，請(qǐng)將?BASE_URL?的協(xié)議設(shè)置為 http。

OPENAI_ORG_ID?（可選）

指定 OpenAI 中的組織 ID。

HIDE_USER_API_KEY?（可選）

如果你不想讓用戶自行填入 API Key，將此環(huán)境變量設(shè)置為 1 即可。

DISABLE_GPT4?（可選）

如果你不想讓用戶使用 GPT-4，將此環(huán)境變量設(shè)置為 1 即可。

HIDE_BALANCE_QUERY?（可選）

如果你不想讓用戶查詢余額，將此環(huán)境變量設(shè)置為 1 即可。

上面就是對(duì)應(yīng)的配置文件的詳細(xì)介紹，這個(gè)ReadMe下面也是有的 有需要的可以自行設(shè)置。

設(shè)置好參數(shù)之后，我們退出保存。由于是為了給大家演示，就不去配置這些參數(shù)了。

我們來看下一步。

我們進(jìn)入上方文件目錄欄里，來進(jìn)入控制臺(tái)

輸入CMD后進(jìn)入控制臺(tái)界面我們輸入? yarn install? ? ?沒有這些環(huán)境的同學(xué)自行配置吧。

輸入yarn install 后我們等待他把依賴安裝完成。（可能需要些時(shí)間，耐心等待即可）

你也可以直接倆一起執(zhí)行??yarn install && yarn dev?

等待他加載完成后我們繼續(xù)在這個(gè)頁面上輸入命令 yarn dev? ?

輸入yarn dev?

等到下面出現(xiàn)Successfuly?的時(shí)候就說明成功了，我們就可以在瀏覽器通過localhost:3000 來進(jìn)行訪問了

這期間有錯(cuò)誤提示就www.baidu.com? 搜索一下就好了

成功后效果

你如果修改代碼里面的東西的話用VSCode 或者是WebStrom 加載進(jìn)去就行了編譯器就不用我教了吧。

這是作者的Reame 自己看哈

基本上本地二開，調(diào)試就是這樣了 還有一點(diǎn)：如果你要部署在CentoOS環(huán)境上你不要把本地Node_moudle給帶上去。不知道是什么原因我本地yarn install 之后打壓縮包放在服務(wù)器上不行。也可能是操作問題吧，我直接下載純凈的代碼把自己修改后的內(nèi)容進(jìn)行了替換就是可以的。

具體就是在windows上yarn install 和yarn build 有沖突 如果你也遇到了就重新下載一個(gè)純凈的git代碼打包到服務(wù)器上然后找到你更改的文件替換 在服務(wù)器上去yarn install 和yarn build??

2、在MacOS上下載運(yùn)行

由于我沒有MAC 我只能幫你腦部一下咯。

哈哈哈哈??

依然是去Release中下載安裝包

地址：https://github.com/Yidadaa/ChatGPT-Next-Web/releases

這個(gè).dmg的下載后就直接可以運(yùn)行了。如果有Mac的朋友麻煩補(bǔ)一下看有沒有問題哈。

3、寶塔如何安裝部署

好了，本地的兩種操作系統(tǒng)都進(jìn)行了講解，在寶塔上安裝主要是踩過幾個(gè)坑，給大家避免一下。

首先你需要購買一臺(tái)服務(wù)器，然后安裝寶塔面板。開心版的話也不是不行。就是可能會(huì)有奇奇怪怪的BUG。

我們打開寶塔之后，默認(rèn)安裝他所需要的環(huán)境，我的寶塔環(huán)境有些雜亂就不給大家演示了，大家上網(wǎng)搜索一下初始化安裝的步驟就行了。

我這里主要用到了PM2管理器

我們?nèi)ボ浖痰赀M(jìn)行搜索，注意一下NodeJS管理器和PM2管理器有沖突大家別搞錯(cuò)了！

我們打開PM2管理器，如果是第一次安裝會(huì)比較慢，大家耐心能等待一下，然后我們進(jìn)入Node版本，這里我切換到和我Windwos一樣的16.19.1

切換好后會(huì)比較卡，稍等刷新一下就好了。

然后我們將下載好的代碼上傳到服務(wù)器上

然后我們繼續(xù)回到PM2管理器，來添加項(xiàng)目

里面的設(shè)置基本是這樣的

如果提示沒有模塊管理去左側(cè)的模塊管理下載安裝就行了，然后再返回

正常情況下他就能啟動(dòng)正常運(yùn)行了，另外通過域名訪問有兩種方式

第一種，直接在PM2管理器中映射域名

第二種通過反向代理方式：

在左側(cè)網(wǎng)站中添加一個(gè)PHP項(xiàng)目? 選擇純靜態(tài)

然后自行添加SSL證書開啟HTTPS之類的常規(guī)操作

主要的是我們需要一個(gè)反向代理

點(diǎn)擊添加反向代理，按照上面的配置，如果你改了端口就按照你實(shí)際的端口來操作。

然后點(diǎn)擊配置文件將下方的配置輸入進(jìn)去：

? ? proxy_cache off;

? ? proxy_buffering off;

? ? chunked_transfer_encoding on;

? ? tcp_nopush on;

? ? tcp_nodelay on;

? ? keepalive_timeout 300;

別忘了保存啊，保存好之后就可以通過域名訪問你的ChatGPT了哈

Docker我嫌麻煩，個(gè)人習(xí)慣問題別噴，所以我沒寫。

記錄一下踩坑的地方：

1. 寶塔的WAF關(guān)了 等運(yùn)行成功后再開

   
   

2、把安全中心的防火墻暫時(shí)關(guān)了，還有入侵防御給關(guān)了。

3、就是PM2管理器和NodeJS沖突的問題了

還有就是：

不要把Windows上build后的東西給傳上來?還有install 的東西

不要把Windows上build后的東西給傳上來?還有install 的東西

不要把Windows上build后的東西給傳上來 還有install 的東西

我不知道為什么我也不想知道。

我是改完之后在本地的文件夾里把修改后的某些代碼直接Copy過來在服務(wù)器上進(jìn)行的修改然后build的?

基本上就這樣了。

下面說一下設(shè)置的用法。

圖片上的水印是我自己的別懷疑，不是抄襲

關(guān)于如何使用CloudFalre搭建OpenAI的文章到處都是我說一下我的吧

我在CSDN上CV的哈，原作者看到了別捶我謝謝

第一步：注冊(cè)cloudflare賬號(hào)

前往官方網(wǎng)站注冊(cè)一個(gè)賬戶? ：https://www.cloudflare.com/

第二步：創(chuàng)建worker，進(jìn)行請(qǐng)求中轉(zhuǎn)

名字可以自己隨便取一個(gè)，點(diǎn)擊快速編輯，進(jìn)入代碼編輯界面

js代碼為

export default {

? async fetch(request) {

? ? const url = new URL(request.url);

? ? url.host = 'api.openai.com';

? ? return fetch(url, { headers: request.headers, method: request.method, body: request.body });

? },

};

至此，代理中轉(zhuǎn)服務(wù)就搭建完成了，但是我們?cè)趪鴥?nèi)仍然不能使用的，需要配置一個(gè)可訪問域名進(jìn)行域名轉(zhuǎn)發(fā)

第三步：域名轉(zhuǎn)發(fā)

在左側(cè)菜單欄==>網(wǎng)站 ===>添加站點(diǎn)，添加上我們自己的域名，這里需要是根域名

?配置以后，點(diǎn)擊域名，會(huì)提示你修改域名的DNS服務(wù)器

需要在我們自己的域名控制面板里，找到dns管理，修改dns服務(wù)器地址

比如我的域名是在阿里云上，我們就可以在下面這里，修改為cloudflare 要求的DNS地址

等待cloudflare驗(yàn)證DNS配置成功后，會(huì)給你郵箱發(fā)送通知郵件

就回到Worker配置那里，增加一個(gè)域名轉(zhuǎn)發(fā)，我添加了一個(gè)自己的自定義域名

以上操作完成后，就可以在使用OpenAI官方接口的時(shí)候，配置使用自己的代理域名了

我就不展示了自己用自己的。

基本上代理就是這么玩兒的。

其他的應(yīng)該沒什么遺漏的，如果有的話請(qǐng)見諒?？梢栽谠u(píng)論區(qū)進(jìn)行互動(dòng)。

公益站點(diǎn)：ikunn.icu? 我是哥哥的好粉絲！?。?！