Сегодня я поделюсь частным веб-приложением ChatGPT — ChatGPT Next Web, позволяющим удобно использовать ChatGPT в любое время и в любом месте!

Основной интерфейс

1. Краткое введение в ChatGPT Next Web (с GitHub)

1.1 Основные функции

• существовать 1 Используйте в течение нескольких минут Vercel Бесплатное развертывание в один клик
• Хорошо продуманный пользовательский интерфейс, адаптивный дизайн, поддержка темного режима.
• Чрезвычайно высокая скорость загрузки первого экрана (~ 100 КБ)
• Массивный встроенный prompt список,откитайскийиАнглийский
• Автоматически сжимать стенограммы контекстного чата,существовать节省 Token поддерживая при этом очень длинные разговоры
• Экспортируйте записи чата одним щелчком мыши, полная поддержка Markdown
• У вас есть собственное доменное имя? Еще лучше,Сразу после привязкисуществоватьгде угодноДоступностьбыстрый доступ

Без лишних слов, давайте начнем строить его прямо сейчас!

2. Отображение проекта

1ffad7a7971a6a5442756d5a51fbc22f.png

Демо Demo: https://chat-gpt-next-web.vercel.app/

обратная связь Issues: https://github.com/Yidadaa/ChatGPT-Next-Web/issues

присоединиться Discord: https://discord.gg/zrhvHCr79N

Награды разработчикам: Пригласите оригинального автора проекта выпить кофе.

Существует два официальных метода построения: первый не требует сервера и развертывается непосредственно на Vercel, второй развертывается на вашем собственном сервере;

3. Начните работу

3.1 Развертывание на Vercel (может потребоваться доменное имя)

1. Подготовьте ключ API OpenAI;
2. Нажмите кнопку справа, чтобы начать развертывание: Deploy with Vercel,Используйте напрямую Github Просто войдите в свою учетную запись и не забудьте заполнить страницу переменных среды. API Key иПароль доступа к странице CODE；
3. После завершения развертывания вы можете начать его использовать;
4. （Необязательный）Привязать собственное доменное имя：Vercel назначенное доменное имя DNS существуют Некоторые территории загрязнены,Привязать собственное доменное имя может быть связано напрямую.

3.2 Развертывание на собственном сервере

version: '3.3'
services:
    chatgpt-next-web:
        ports:
            - '8090:3000'
        environment:
            - OPENAI_API_KEY=sk-xxxx    # Заполните свой API KEY
            - CODE=your-password    # Введите пароль, иначе ваш лимит скоро будет исчерпан
        image: yidadaa/chatgpt-next-web

Выкидывайте ядро ​​прямо сюда docker-compose.yaml файл, знакомый docker Друзья окружающей среды могут напрямую копировать и строить его.

Уведомление:

OPENAI_API_KEY Вы можете сослаться на Гугу в прошлом году12луна Написано статей：От регистрации до игры в ChatGPT — самом продвинутом в мире гражданском чат-боте с искусственным интеллектом.。

2af1a9097e385d570fd60a55d5e31976.png

Рекомендуем к прочтению：Народный! Кратко объясните ChatGPTиOpenAI и API КЛЮЧИ

CODE Не забудьте записать это, иначе веб-страница будет доступна в Интернете, и ваша квота API скоро будет исчерпана.

Ниже приводится подробное руководство по настройке для развертывания сервера.

4. Настройте среду

Исправление: Кажется, ничего страшного, если он заблокирован. Так мы называем API.

Выберите сервер и сначала проверьте, можете ли вы получить доступ к ChatGPT:

bash <(curl -Ls https://cpp.li/openai)

28ee855c0e93ff28e03853fc50c6089b.png

• сервер：Тенсент Гонконглегкий сервер приложений 24 Юань / луна VPS один Гугу построил его сам, используя технологии Кремниевой долины.Легкий сервер приложений Tencent , (на этот раз лучше всего выбрать Европейские и американские серверы）если Если вы новичок и только начали играть,,Вы также можете купить Лайкра Облако сервер, (Лайкра Облакосервер介绍：Нажмите, чтобы просмотреть）
• Система: Дебиан 11 （ДД-скрипт Не требуется ДД, даже с оригинальной системой Хорошо, я буду использовать его во всех последующих уроках. Debian или Ubuntu Построить~)
• Установлено Docker、Docker-compose（Связанные скрипты）
• 【Не требуется Но рекомендуется】Доменное имя и разрешить его на сервере（Покупка доменного имени, разрешение доменного имени Видеоурок）
• 【Не требуется】нестивперед Установлено панель пагоды зарубежная версия aapanel,и Установлено Nginx（Адрес установки）
• 【Не требуется В этом уроке используется】Установлено Nginx Proxy Manager（Связанные руководства）

Требования к серверу: рекомендуется 1 ГБ или более памяти.

5. Создайте видео

5.1 YouTube：

Видео адрес：https://youtu.be/C97PAwJ9fkA

5.2 Билибили

Билибили [HD-версию можно нажать, чтобы пожаловаться на нее B стоять и смотреть】：<joe-bilibili bvid="BV1w84y1M7zG"></joe-bilibili>

6. Метод строительства

Если вы не используете облегченный сервер приложений Tencent Cloud, вы можете сразу перейти к разделу 5.1.

Установите систему (облегченный сервер приложений Tencent Cloud)

e59713fba8726d3cb55ae11bca83fe3c.png

Самая большая особенность легкого сервера Tencent Cloud заключается в том, что «Легкий» по сравнению с CVM больше подходит для начала работы новичкам. Здесь выбираем между. Docker Базовый образ, можно сохранить для последующей установки. Docker шаги (Если вы настаиваете на использовании домашнего сервера, установите его здесь. Docker Зеркало также поможет вам настроить источники внутреннего зеркала для ускорения доступа. docker Зеркальные ресурсы) Не используйте отечественные 。

Войдите в систему (облегченный сервер приложений Tencent Cloud)

2722040ee311eb4a9ebf2a4945bf38f4.png

c0b5d360053746c4095d592967ee401f.png

e0ba858f021b846ad0abc27acf5008c2.png

6.1 Установите Docker и Nginx Proxy Manager

Вы можете напрямую обратиться к этому контенту:

https://blog.laoda.de/archives/nginxproxymanager

6.2 Создайте каталог установки

Создайте каталог установки:

sudo -i

mkdir -p /root/data/docker_data/chatgpt-web

cd /root/data/docker_data/chatgpt-web

Здесь мы устанавливаем его напрямую с помощью докера.

vim docker-compose.yml

В разделе «Английский метод ввода» нажмите i

version: '3.3'
services:
    chatgpt-next-web:
        ports:
            - '8090:3000'
        environment:
            - OPENAI_API_KEY=sk-xxxx    # Заполните свой API KEY
            - CODE=your-password    # Введите пароль, иначе ваш лимит скоро будет исчерпан
        image: yidadaa/chatgpt-next-web

После внесения изменений обратите внимание на переключение на английский метод ввода, а затем нажмите esc,Затем :wq Сохраняем и выходим.

6.3 Включите брандмауэр сервера (не обязательно) и получите доступ к веб-странице.

Открыть порты брандмауэра 8090

Например, способ открытия Tencent Cloud следующий (некоторые поставщики услуг не имеют собственного брандмауэра панели, поэтому этот шаг не обязателен):

<img src="https://img.laoda.de/i/2022/06/30/zlio5h-2.webp" alt="image-20220630215240864" style="zoom:33%;" />

<img src="https://img.laoda.de/i/2022/06/30/10h3dqt-2.webp" alt="image-20220630220546335" style="zoom:33%;" />

Пример на картинке заполнен 5230,Замечание заполнено memos,Здесь мы заполняем 8090,Заполните пример chatgpt-web , просто подтвердите (если вы находитесь в docker-compose Изменено в файле 9009,Вам нужно заполнить это здесь 9009,и так далее)

<img src="https://img.laoda.de/i/2022/08/19/o4byqz-2.webp" alt="image-20220819145844555" style="zoom:33%;" />

Проверьте, занят ли порт (начните с 8090 (например), введите:

lsof -i:8090  #Проверять 8090 Порт занят?,если занято,Переопределить порт

Если ничего не появляется, это означает, что порт не занят и мы можем продолжить следующие операции ~

Если оно появляется:

-bash: lsof: command not found

бегать:

apt install lsof  #Установить lsof

Если порт не занят (если занят, измените порт, например, измените его на 8081,Уведомление docker И командную строку, и фаервол надо менять)

наконец:

cd /root/data/docker_data/chatgpt-web    # приходить dockercompose В папке, где находится файл

docker-compose up -d 

Теоретически мы можем войти http://ip:8090 Доступ установлен.

Уведомление: 1. Не знаю сервера IP,может быть напрямуюсуществоватькомандная строкавходить：curl ip.sb,会显示当впередсервериз IP。 2. Если вы столкнулись с невозможностью доступа, проверьте еще раз, открыт ли соответствующий порт в брандмауэре панели Pagoda и внутреннем брандмауэре поставщика услуг.

Некоторые друзья могут захотеть настроить его и поделиться им с другими. Если они захотят позже поделиться им с другими, порт IP + слишком неэлегантен. Гугу предлагает каждому создать доменное имя, которое легко запомнить и которое выглядит более формально. . Это позволит вам использовать https, что сделает веб-страницу более безопасной.

и namesilo выше xyz Доменное имя с суффиксом действует один год. 7 Юани можно выбрасывать каждый год. (Пустяки, по названию Плата за продление шестизначного номера xyz всегда составляет 0,99 доллара США. = =）

Если вы хотите использовать его в течение длительного времени, рекомендуется купить его. com Доменное имя с суффиксом более формально и его можно вводить laodade получить 1 Скидка в долларах США (не знаю, доступна ли она сейчас)

namesilo Поставляется с защитой конфиденциальности,Гугу использовал это место,Цена также относительно низкая среди этих регистраторов.,Ключевым моментом является то, что его компания не похожа на других регистраторов доменных имен.,Никаких трюков！（Это просто какой-то фоновый интерфейсуродливый древний = =）

[Покупка доменного имени] Код скидки Namesilo и руководство по разрешению доменных имен (с рекомендациями и мерами предосторожности при покупке сервера)

Давайте посмотрим вниз!

6.4 Обновление веб-чата gpt

cd /root/data/docker_data/chatgpt-web

docker-compose down 

cp -r /root/data/docker_data/chatgpt-web /root/data/docker_data/chatgpt-web.archive  # На всякий случай заранее сделайте резервную копию

docker-compose pull

docker-compose up -d    # пожалуйста, не используйте docker-compose stop остановить контейнер, поскольку для этого требуется дополнительное время на ожидание остановки контейнера; up -d Когда вы напрямую обновляете контейнер, он автоматически останавливается и немедленно перестраивает новый контейнер, поэтому нет необходимости тратить это время.

docker image prune  # prune Команда используется для удаления тех, которые больше не используются. docker объект. Удалить все элементы, которые не были tag Отметьте и изображения, которые не используются контейнерами

намекать:

WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N] 

входить y

Приложения, созданные с использованием Docker, очень легко обновлять~

6.5 Удалить чатgpt-web

cd /root/data/docker_data/chatgpt-web

docker-compose down

cd ..

rm -rf /root/data/docker_data/chatgpt-web  # Полностью удалить данные, сопоставленные локально

Может быть удален очень чисто.

7. Обратный прокси

Для доступа к нашему сервису нам нужно использовать доменное имя вместо IP+порта!

7.1 Использование прокси-менеджера Nginx

существоватьдобавить вобратный прокси之вперед,Убедитесь, что вы завершили разрешение доменного имени,Если вы не знаете как, вы можете посмотреть это：Доменное имя и разрешить его на сервере（Покупка доменного имени, разрешение доменного имени Видеоурок）

image-20221016140213282

После этого войдите в систему Nginx Proxy Manager（Не знаю, как это смотреть：Установите прокси-менеджер Nginx.（Связанные руководства））

Уведомление: Nginx Proxy Менеджер (далее – НПМ) будет использоваться 80、443 порт, поэтому эта машина не может его занять (например, изначально у нее был Nginx）

Просто добавьте несколько фотографий:

<img src="https://img.laoda.de/i/2022/05/02/kfes4s\_7.webp" alt="image-20220502123517401" style="zoom: 33%;" />

<img src="https://img.laoda.de/i/2023/04/03/pnip9i-0.webp" alt="image-20230403155113921" style="zoom:50%;" />

Обратите внимание на заполнение соответствующего доменное имя、IP и порт,Согласно статье,должно быть 8090

Заполните IP:

если Nginx Proxy Manager и chatgpt-web существоватьтакой жеодинсервер上,Можетсуществовать Терминалвходить：

ip addr show docker0

Просмотрите соответствующий внутренний IP-адрес контейнера Docker.

В противном случае заполните напрямую chatgpt-web Сервер, где IP Вот и все.

<img src="https://img.laoda.de/i/2022/04/03/h9azjx\_7.webp" alt="image-20220403104353185" style="zoom: 33%;" />

Откройте его еще раз и проверьте следующее:

image-20221016140356324

Затем вы можете использовать доменное имя для установки и доступа к нему.

7.2 Использование панели «Пагода»

Я обнаружил, что многие друзья до сих пор привыкли использовать панель «Пагода», и вот обратная конфигурация панели «Пагода»:

Просто создайте новый сайт, без базы данных, без PHP, просто статический.

Затем откройте следующую конфигурацию и измените конфигурацию Nginx.

image-20220819150345725

image-20220819150542867

Код выглядит следующим образом:

    location / {
      proxy_pass http://127.0.0.1:8090/;       # Будьте осторожны и измените его на тот порт, который вы действительно используете.
      rewrite ^/(.*)$ /$1 break;
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade-Insecure-Requests 1;
      proxy_set_header X-Forwarded-Proto https;
    }

Этот метод подходит для 90% изобратный прокси может быть эффективным, затем вы можете использовать доменное имя для установки и доступа к нему.

Некоторые студенты могут спросить, почему бы просто не использовать функцию обратного прокси, которая поставляется с Pagoda.

image-20220819150730128

Это также возможно, но сам Гугу уже сталкивался с ситуацией, когда при наличии нескольких веб-сайтов, которые необходимо отменить, при настройке здесь будет сообщаться об ошибке = =

Поэтому позже я перестал его использовать и просто использовал метод выше для управления им.

8. Руководство по использованию

Давайте поговорим об этом, пока записываем видео. Давайте исследуем это сами = =.

Помнитьвходить之впередdocker-compose.yml Пароль внутри~

image-20230410171603073

image-20230410171616981

Вы можете сначала попробовать сами. Это несложно. Если вы хотите узнать подробности работы, подождите, пока Гугу сделает видео на выходных.

9. Области, требующие улучшения

Никто

10. Концовка

Желаю всем удачного опыта и не стесняйтесь спрашивать, если у вас есть какие-либо вопросы. GitHub нести Issues,Вы также можете общаться и обсуждать друг с другом в комментариях.

При этом есть возможность отдать ChatGPT Next Студенты, которые вносят свой вклад в Интернет, также могут активно участвовать. проект Приходите и внесите свой вклад!

Наконец, спасибо Упорный труд веб-разработчиков ChatGPT Next позволил нам использовать такой отличный проект!

Ссылки

Демо Demo: https://chat-gpt-next-web.vercel.app/

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