openwebui部署以及解决，首屏加载缓慢，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= example -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 ; index index.php index.html index.htm default.php default.htm default.html; root / / root/chart.xxx ; #ERROR-PAGE-START 错误页配置，可以注释、删除或修改 error_page 404 /404.html; #反向代理到open webui location / { 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 服务 不然访问404 location ~ .*\.(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 服务 不然访问404 location ~ .*\.(js|css)?$ { proxy_pass http://127.0.0.1:3000; expires 12h; #这是一个用于设置缓存过期时间的指令 error_log /dev/null; access_log /dev/null; } }