Umbrel Dashboard 项目启动与配置教程

Umbrel Dashboard 项目启动与配置教程

umbrel-dashboard [Deprecated] Moved to https://github.com/getumbrel/umbrel/tree/master/packages/dashboard. Web-based dashboard to interact with your Umbrel. 项目地址: https://gitcode.com/gh_mirrors/um/umbrel-dashboard

1. 项目的目录结构及介绍

Umbrel Dashboard 是 Umbrel OS 的网页用户界面，它通过容器化服务运行。项目目录结构大致如下：

• .github/: 存放 GitHub Actions 工作流配置文件。
• src/: 源代码目录，包含所有前端代码。
• .dockerignore: 用于 Docker 构建时排除不需要的文件和目录。
• .env: 环境变量配置文件，用于定义项目运行时的环境变量。
• .env.production: 生产环境下的环境变量配置。
• .env.staging: 预发布环境下的环境变量配置。
• .gitignore: 用于 Git 忽略不需要提交的文件和目录。
• CONTRIBUTING.md: 贡献指南，描述如何为项目贡献代码。
• Dockerfile: Docker 构建文件，用于创建项目的 Docker 容器镜像。
• Dockerfile.dev: 开发环境的 Docker 构建文件。
• LICENSE.md: 项目许可证文件。
• README.md: 项目说明文件，包含项目信息和使用指南。
• babel.config.js: Babel 配置文件，用于 JavaScript 代码转换。
• package.json: 项目依赖和脚本配置文件。
• vue.config.js: Vue 配置文件，用于自定义 Vue.js 行为。
• yarn.lock: 依赖锁文件，确保依赖的一致性。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 文件中定义的脚本来进行。以下是一些主要的启动命令：

• yarn: 安装项目依赖。
• yarn serve: 启动开发服务器，通常在本地开发环境中使用。
• yarn build: 构建生产环境下的静态文件。

启动开发服务器的具体操作如下：

yarn
yarn serve

执行以上命令后，项目将在本地运行，默认情况下可通过 http://localhost:8080 访问。

3. 项目的配置文件介绍

项目的配置主要通过 .env 文件以及其生产环境 .env.production 和预发布环境 .env.staging 的变体来进行。以下是一些主要的环境变量：

• VUE_APP_MANAGER_API_URL: 用于定义 umbrel-manager API 的 URL。

如果需要在不同环境下使用不同的配置，可以创建对应的 .env 文件，例如：

# .env.development
VUE_APP_MANAGER_API_URL=http://umbrel.local/manager-api

确保在更改环境变量后重新启动项目，以便配置生效。

umbrel-dashboard [Deprecated] Moved to https://github.com/getumbrel/umbrel/tree/master/packages/dashboard. Web-based dashboard to interact with your Umbrel. 项目地址: https://gitcode.com/gh_mirrors/um/umbrel-dashboard