xObserve

  1. 开始使用
  2. 从源码部署

Installing xObserve

在本节中，我们将在不同的服务器上部署 UI 静态资源和 API server。

事实上 `https://play.xobserve.io` 就是分离部署的：UI 静态文件部署在 Github page 上，API server 部署在云服务器，其中 `play.xobserve.io` 指向 Github page, `api.xobserve.io` 指向 API server。 当用户从 `play.xobserve.io` 访问 UI 时，会先从 Github page 上下载静态资源文件，然后这些文件会请求 `api.xobserve.io` 获取数据。

首先，需要从 Github 上下载 xObserve 的源代码( source code)，注意，不是 zip 安装包。然后准备两台服务器用于部署 xObserve:

1. 10.7.10.10 上部署 xobserve server 也就是 api server

2. 10.7.10.11 上部署 UI 静态资源( 通过 nginx 提供)

  1. 配置 UI 要访问的 API server 地址

    由于现在 UI 和 API server 分离部署了，因此我们的 UI 文件必须要配置要访问的 API server 地址.

    由于我们的 API 服务器运行在 http://10.7.10.10 上，你可以配置 UI 访问的地址为该 IP ，也可以是一个指向该 IP 的域名，例如 `https://api.xobserve.io`

    在 `ui` 文件夹下找到 `.env` 文件，修改内容为:

    SourceCodeRoot/ui/.env
    VITE_API_SERVER_PROD=http://10.7.10.10

  2. 构建发布文件

    在修改完配置后，就可以调用 `release.sh` 构建我们需要的发布文件了，在源代码的根目录下调用：

    SourceCodeRoot
    ./release.sh

  3. 发布文件目录

    当构建发布完成后，你将在源代码根目录下，看到一个新出现的 `release` 文件夹。

    该文件夹下有三个 `.zip` 压缩文件，选择你需要的进行解压，下面我们以 linux 为例来进行解压，解压后你将看到如下文件:

    1. xobserve: Go语言编译出的二进制文件，用于启动 xObserve server( API server ).

    2. xobserve.yaml: xObserve server 需要的配置文件

    3. xobserve.sql: Mysql 数据库需要的 sql 文件

    4. ui directory: UI 静态资源文件，你可以将其部署在 Nginx 或 Github 上

    SourceCodeRoot/release/linux
    linux % lsxobserve		xobserve.sql	xobserve.yaml	ui

  4. 部署 xObserve api server

    拷贝 `xobserve` 二进制文件和 `xobserve.yaml` 到服务器 `10.7.10.10` 上, 按照右边的配置修改 `xobserve.yaml` 并启动服务: `./xobserve --config xobserve.yaml`

    10.7.10.10/xobserve.yaml
    server:    ## xobserve server address    addr: "10.7.10.10:80"

  5. 部署 UI

    现在，我们可以将`ui` 目录中的静态资源文件部署到位于 `http://10.7.10.11` 服务器上的 `Nginx` 中, 关于这方面的资料网上很多，这里就不再赘述。

    10.7.10.11/nginx
    Deploy static files in release/ui directory  to nginx

在浏览器中访问

相比之前的安装部署，本节的内容更加复杂，但是如果你熟悉 Web 开发，那其实这个过程也挺简单的，现在打开浏览器访问部署在 Nginx 上的网页 http://10.7.10.11 .

如果打开 Chrome 的检查器，可以看到 UI 在从 API 服务器 http://10.7.10.10 加载数据

下一步做什么

  • xObserve 入门教程

    学习如何使用 xObserve, 在此过程中迅速熟悉 xObserve 的核心概念和特性。

Copyright © 2023 xObserve.io Team.

GitHub