前端部署open-webui
时间: 2025-02-15 11:09:00 浏览: 184
### 如何部署 Open-WebUI 前端应用
#### 准备工作
为了成功部署 Open-WebUI,环境准备至关重要。确保安装了 Node.js 和 npm 或 yarn 作为包管理器。Node.js 版本建议不低于 LTS 版本[^1]。
#### 获取源码
通过 Git 克隆官方仓库或是下载压缩包来获取最新版本的 Open-WebUI 源代码。如果采用 Git 方式,则命令如下所示:
```bash
git clone https://github.com/Open-WebUI/open-webui.git
cd open-webui
```
#### 安装依赖项
进入项目目录后执行以下命令以安装所需的所有依赖库:
```bash
npm install
# 或者使用yarn
yarn install
```
#### 构建生产版文件
构建用于生产的优化后的静态资源文件,在根目录下运行下列指令完成此操作:
```bash
npm run build
# 使用yarn的话则是
yarn build
```
这一步骤会创建一个 `dist` 文件夹,里面包含了可以被 Web 服务器直接提供服务的 HTML/CSS/JavaScript 文件以及其他必要的资产文件。
#### 启动开发服务器 (可选)
对于测试目的来说,可以通过启动内置的开发服务器来进行快速预览:
```bash
npm start
# 对应于yarn则为
yarn start
```
此时访问 http://localhost:3000 即可在浏览器中查看效果并调试页面布局等问题。
#### 配置 Web 服务器
为了让更多人能够在线上看到这个应用程序,还需要配置好合适的 web server 来托管这些静态文件。常见的做法是利用 Nginx 或 Apache HTTP Server 进行设置。这里给出基于 Nginx 的简单配置实例:
编辑 `/etc/nginx/sites-available/default` 文件加入如下内容:
```nginx
server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/dist; # 替换成实际路径
index index.html;
try_files $uri $uri/ /index.html;
}
}
```
最后重启 nginx 让更改生效即可让全世界都能浏览到已部署的应用程序。
阅读全文
相关推荐


















