open webui 部署 以及解决，首屏加载缓慢，nginx反向代理访问404，WebSocket后端服务器链接失败等问题

项目地址：GitHub - open-webui/open-webui: User-friendly AI Interface (Supports Ollama, OpenAI API, ...)

选择了docker部署

如果 Ollama 在您的计算机上，请使用以下命令

docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

参数详解

1. -d

• 含义：此参数表示以 “分离”（detached）模式运行容器。即容器在后台运行，不会将容器的标准输出和错误输出直接显示在终端中。
• 作用：使得用户在启动容器后可以继续在当前终端执行其他命令，而无需等待容器运行结束。

2. -p 3000:8080

• 含义：该参数用于进行端口映射，格式为 主机端口:容器端口。这里将主机的 3000 端口映射到容器内部的 8080 端口。
• 作用：外部客户端可以通过访问主机的 3000 端口来间接访问容器内部运行在 8080 端口上的服务。

3. --add-host=host.docker.internal:host-gateway

• 含义：向容器的 /etc/hosts 文件中添加一条主机记录。host.docker.internal 是一个自定义的主机名，host-gateway 代表 Docker 主机的 IP 地址。
• 作用：在容器内部，当使用 host.docker.internal 这个主机名时，会解析到 Docker 主机的 IP 地址，方便容器与主机进行通信。

4. -v open-webui:/app/backend/data

• 含义：此为挂载卷（volume）的操作。open-webui 是一个 Docker 卷的名称，/app/backend/data 是容器内部的目标路径。
• 作用：将名为 open-webui 的 Docker 卷挂载到容器内的 /app/backend/data 目录。这样容器内该目录的数据会被存储在 Docker 卷中，实现数据的持久化，即使容器被删除，数据也不会丢失。

5. --name open-webui

• 含义：为新创建的容器指定一个名称，这里将容器命名为 open-webui。
• 作用：方便后续对容器进行管理和操作，例如使用 docker stop open-webui 可以停止该容器，使用 docker logs open-webui 可以查看容器的日志。

6. --restart always

• 含义：设置容器的重启策略为 always。即无论容器因何种原因停止（如正常退出、异常崩溃等），Docker 都会自动尝试重新启动该容器。
• 作用：确保容器在各种情况下都能保持运行状态，提高服务的可用性。

7. ghcr.io/open-webui/open-webui:main

• 含义：指定要使用的 Docker 镜像。ghcr.io 是 GitHub Container Registry 的域名，open-webui/open-webui 是镜像的名称，main 是镜像的标签。
• 作用：从 GitHub Container Registry 拉取 open-webui/open-webui 镜像的 main 版本，并基于该镜像创建并启动容器。

如果 Ollama 位于其他服务器上，请使用以下命令：

要连接到另一台服务器上的 Ollama，请将 更改为服务器的 URL：OLLAMA_BASE_URL

docker run -d -p 3000:8080 -e OLLAMA_BASE_URL=https://example.com -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

部署完成后可直接访问 ip+3000端口

解决访问过程中的一些问题

首次加载缓慢白屏等问题

问题原因 接口 api/models 调用加载模型列表缓慢，访问了默认配置的地址不断的尝试最后失败了

进入管理员面板

OpenAI API默认 chart gpt的访问链接 删除掉

Ollama API默认链接 删除掉

再次访问就快很多了，要注意如果配置了一个校验链接不通的地址又会出现这个情况

配置nginx方向代理后，页面静态资源访问404、WebSocket后端服务器链接失败问题

基于宝塔面板的配置

server
{listen 80;server_name chart.xxx.com;index index.php index.html index.htm default.php default.htm default.html;root /www/wwwroot/chart.xxx.com;#ERROR-PAGE-START  错误页配置，可以注释、删除或修改error_page 404 /404.html;#反向代理到open webuilocation / {proxy_pass http://127.0.0.1:3000;}#需要配置开启代理到WebSocket后端服务器 不然访问时候WebSocket链接失败location /ws {# 允许客户端发起跨域请求add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# 代理到WebSocket后端服务器proxy_pass http://127.0.0.1:3000;# 启用WebSocket支持proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";proxy_set_header Host $host;# 可选：设置代理超时时间proxy_read_timeout 86400;}#禁止访问的文件或目录location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md){return 404;}#如果存在静态资源访问配置 缓存啥的#需要配置代理到内部的open webui 服务 不然访问404location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${proxy_pass http://127.0.0.1:3000;expires      30d; #这是一个用于设置缓存过期时间的指令error_log /dev/null;access_log /dev/null;}#如果存在静态资源访问配置缓存#需要配置代理到内部的open webui 服务   不然访问404location ~ .*\.(js|css)?${proxy_pass http://127.0.0.1:3000;expires      12h; #这是一个用于设置缓存过期时间的指令error_log /dev/null;access_log /dev/null;}
}