作者选择了 Mozilla 基金会作为写给捐款计划的一部分,以获得捐款。

介绍

部署一个网站后,你会想添加分析脚本到你的网站,了解哪些页面驱动最多的流量,跟踪访问者数量,目标转换和页面视图。 Umami是一个开源的Web分析软件,运行在 PostgreSQL和 Next.js API路线。

Umami 允许您跟踪事件、引用页面、会话时间、视图数和单一的访问者数。在一个 Umami 实例中,您可以跟踪无限数量的网站,并创建多个用户,以便不同的人能够从单个部署中跟踪他们的网站。

在本指南中,您将克隆 Umami 到本地计算机,创建 PostgreSQL 表,设置连接集成,并部署 Umami to App Platform。

前提条件

在您开始本指南之前,您将需要以下内容:

数字海洋账户。要创建新账户, 请向 [数字海洋签名页] (https://cloud.digitalocean.com/registrations/new) 导航。
一个GitHub账户。您可以从 [GitHub sign up page] (https://github.com/signup) 创建账户。
安装在您的本地机器上。您可以跟随 [Controduction to Open source: Git] (https://andsky.com/tech/tutorials/contributing-to-open-source-getting-started-with-git) 来安装和设置您的计算机上的 Git 。
管理中的PostgreSQL数据库集群。创建步骤在DigitalOcecan文档中的如何创建PostgreSQL数据库集群页面中被描述.
**PostgreSQL 命令行客户端psql',安装在您的本地机器上。您可以按照 ** 连接到管理下的 PostgreSQL** 部分中的步骤安装 psql ` 。 .

步骤1 - 铸造和克隆乌马米仓库

GitHub 的 Umami 存储库包含运行 Umami 所需的文件和脚本. 铸造此存储库允许您部署 Umami 到 App 平台,并使用其中包含的 SQL 脚本在 PostgreSQL 数据库中设置表。

在此步骤中,您将对存储库进行折叠,并将其克隆到您的本地计算机中使用git。

请点击 GitHub 上的 Umami repository并点击页面右上角的 Fork 按钮。您的 repository 副本将位于 https://github.com/your\_github\_username/umami。

在您的折叠存储库中,单击代码按钮,复制 HTTPS 链接,并用以下命令将折叠存储库克隆到本地计算机:

1git clone https://github.com/your_github_username/umami.git

git clone命令在您的计算机上创建一个存储库的副本. 运行命令后,您将看到类似于以下的输出:

1[secondary_label Output]
2Cloning into 'umami'...
3remote: Enumerating objects: 6352, done.
4remote: Counting objects: 100% (270/270), done.
5remote: Compressing objects: 100% (159/159), done.
6remote: Total 6352 (delta 131), reused 219 (delta 103), pack-reused 6082
7Receiving objects: 100% (6352/6352), 2.57 MiB | 519.00 KiB/s, done.
8Resolving deltas: 100% (4388/4388), done.
9Checking out files: 100% (355/355), done.

进入存储库的目录:

1cd umami

现在你已经将Umami存储库伪装并将其克隆到本地机器上,你将在PostgreSQL上设置umami数据库并创建其表。

第2步:创建umami数据库、设置表并启动连接池

在此步骤中,您将在您的集群中创建和初始化一个umami数据库。

要在您的集群中创建)并从侧面菜单中选择 DataBases 。从集群列表中选择您创建的数据库集群。导航到** 用户和数据库** 选项卡,然后转到** DataBases** 。在文本框中键入 umami,然后单击** Save** 来创建 `umami'数据库。

Creating a database in your DigitalOcean managed database

现在你已经创建了umami数据库,你可以构建 Umami 需要运行的表. 要完成这一点,你将需要连接链接连接到你的umami数据库。

在 Cloud 控制面板 中,切换到** 概览** 选项卡。在页面右侧的** 连接细节** 查找。在** 连接参数** 写下的下落中,选择** 连接字符串** .从写到** 数据库/池** 旁边的下落中选择 umami 数据库。

Locating the connection string of a DigitalOcean managed database

在「sql/schema.postgresql.sql」的 SQL 脚本创建了 Umami 需要的所有表,并在所有这些表中设置索引。

<$>[警告] 警告: Umami 上的管理员用户可以创建和删除帐户。强烈建议在部署后更改这些默认凭证,以防止未经授权的访问您的 Umami 实例。

从您输入的umami目录中运行下面的命令来创建表:

1psql 'your_connection_string' -f sql/schema.postgresql.sql

psql 使用连接字符串连接到您的数据库,而 -f 旗将对数据库运行 SQL 脚本在 `sql/schema.postgresql.sql。

当您成功运行该命令时,您将获得以下输出:

 1[secondary_label Output]
 2psql:sql/schema.postgresql.sql:1: NOTICE:  table "event" does not exist, skipping
 3DROP TABLE
 4psql:sql/schema.postgresql.sql:2: NOTICE:  table "pageview" does not exist, skipping
 5DROP TABLE
 6psql:sql/schema.postgresql.sql:3: NOTICE:  table "session" does not exist, skipping
 7DROP TABLE
 8psql:sql/schema.postgresql.sql:4: NOTICE:  table "website" does not exist, skipping
 9DROP TABLE
10psql:sql/schema.postgresql.sql:5: NOTICE:  table "account" does not exist, skipping
11DROP TABLE
12CREATE TABLE
13CREATE TABLE
14CREATE TABLE
15CREATE TABLE
16CREATE TABLE
17CREATE INDEX
18CREATE INDEX
19CREATE INDEX
20CREATE INDEX
21CREATE INDEX
22CREATE INDEX
23CREATE INDEX
24CREATE INDEX
25CREATE INDEX
26CREATE INDEX
27CREATE INDEX
28INSERT 0 1

您已经成功创建了umami数据库及其中的表,现在您将为umami数据库创建一个连接池。

PostgreSQL 是用来构建持久连接的。然而,Umami 所运行的 Next.js API 路径无法在请求中共享数据库连接。为了支持从 API 路径创建的短期连接并防止错误,您将为您的集群创建一个连接池。

连接池是一个应用程序,允许您在多个请求中重复使用数据库连接,通过向数据库创建多个持久连接并通过这些连接传输客户端请求。

要启用您管理的数据库的连接聚合,请前往您的 Cloud 控制面板 。在侧面菜单中单击** Databases** ,然后选择您创建的数据库。请前往** Connection Pools** 选项卡,然后单击** Create a Connection Pool** 。将打开模式。将池的名称设置为** umami-pool** ,选择** umami** 数据库,并将池的大小设置为 11。

您可以稍后更改连接池的大小以支持更多的流量。请参阅如何管理连接池了解有关何时调整和如何选择池尺寸的更多信息。

Umami的要求不会直接向数据库提出,而是向连接池提出。因此您需要连接池的连接字符串。此连接字符串是应用到App平台时需要的环境变量之一. 要获得连接字符串,请到 Connection Pools 标签并点击 ** Connection 详情** . 当模式打开时,点击** 接通参数** 下拉,选择** 接通字符串** ,并点击** Copy** 复制连接字符串.

连接池的连接字符串是部署到 App Platform 时所需的环境变量之一,因为数据库请求将向连接池进行。

现在,您已经在数据库中设置了连接集成,您将部署Umami到应用平台。

第3步:将Umami部署到应用平台

在此步骤中,您将部署 Umami 到 App Platform. Umami 运行在用 Next.js 编写的 Web 应用程序上,App Platform 将从您的 Umami 叉口部署它。请访问控制面板的 App Platform 部分并点击 Launch Your App 开始。

您将收到代码源的选项列表。选择 GitHub 作为源. 如果这是您第一次从 GitHub 存储库部署到 App Platform,您将被要求将 App Platform 连接到您的 GitHub 帐户。

选择您想要部署应用程序的存储库。从下载中选择 your_github_username/umami 作为源存储库. 将分支留为 master,保持 Autodeploy 代码更改 ,然后点击** Next** 。

Selecting a GitHub repository to deploy to App Platform from

App Platform 会自动在存储库中检测到 Dockerfile,并设置必要的设置,您现在将添加 Umami 所需的环境变量。

Umami 需要两个环境变量来工作:

DATABASE_URL:您的 PostgreSQL 数据库的连接字符串. * HASH_SALT:用于生成应用程序的唯一值的随机字符串。

点击环境变量旁边的编辑以添加这些环境变量。

为了让 Umami 与您的连接池顺利工作,您需要通过将 `&pgbouncer=true’ 附加到末尾来修改您从云控制面板中获得的连接池连接串。

1postgres://sammy:your_password@host-domain:25061/umami?sslmode=require&pgbouncer=true

点击HASH_SALT按钮,将环境变量设置为随机字符串。点击HASH_SALT旁边的Encrypt**检查框,以便在保存时加密HASH_SALT的值。

Setting environment variables while deploying Umami to App Platform

点击下一步继续设置应用程序。

选择您的 Umami 实例的名称,然后选择部署应用的区域. 最接近您的区域将自动选择以最大限度地减少连接延迟。

如果您需要较大的项目大小,请选择 Basic 计划或** Pro** 计划,然后单击** Launch Your App** 来完成部署。

应用程序的构建将开始.一旦构建完成,您的应用程序可访问的 URL 将显示在应用程序名称下。

打开URL访问您的分析仪表板。

Umami analytics dashboard

您可以使用默认凭证登录:

用户名: admin 密码:umami

通过点击标题上的设置来保护您的实例,在侧面栏上导航到配置文件并点击更改密码 输入以前的密码,即umami,然后选择一个新的密码来登录admin帐户。

要获取网站的跟踪脚本,请登录到您的 Umami 仪表板. 在屏幕顶部的导航栏中选择设置 . 点击** 添加网站** 按钮. 当模式打开时,选择网站的名称,然后输入网站所在的域。

Adding a website to Umami

添加网站后,您将在设置中的网站列表中找到它. 点击网站下面的第一个按钮以显示跟踪脚本。

Finding the tracking script for a website on Umami

当你点击按钮时,一个模式将打开跟踪脚本在一个<script>标签. 粘贴在你的网站页面的<head>标签中显示的代码片段,开始从网站中获取数据。

结论

您现在已经成功部署了 Umami Analytics 实例,您现在可以跟踪所有网站的页面视图、会话时间和其他指标。您可以参阅 Umami 的文档以了解如何跟踪事件。如果您想从自定义域获得 Umami,您可以参阅如何在 App Platform 中管理域以了解如何。

如何在DigitalOcean的应用平台上利用Umami部署自己的网络分析软件

介绍

前提条件

步骤1 - 铸造和克隆乌马米仓库

结论