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 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;
    }
}