Jonas Mosimann

While searching for a way to analyze my website traffic I found Umami, a simple, beautiful, open source way to own my website analyics data.

I gave it a shot and the installation and setup process was really simple - I just struggled a little bit to allow remote connections to my database, but as you will see in this post, there is nothing complicated to deal with.

Stack

My Website on Next.js deployed to Vercel.
Umami deployed to Vercel.
Database for Umami is hosted on a PostgreSQL Database on DigitalOcean

Database installation on DigitalOcean

I selected a small 1 GB Memory / 25 GB Disk - Ubuntu 20.04 (LTS) x64 droplet and noted the IP address which we will use in the following steps.

Setup Ubuntu

Connect to your server and create a new user:

ssh root@<YOUR-SERVER-IP>
adduser umami
usermod -aG sudo umami

Setup and enable the firewall:

ufw allow OpenSSH
ufw enable

(Optional but recommended if connected with SSH-Keys) Copy public ssh keys to home directory of the new user:

rsync --archive --chown=umami:umami ~/.ssh /home/umami

At this stage you should be able to connect to your server with the newly created user:

ssh umami@<YOUR-SERVER-IP>

Install PostgreSQL

Connect to your server with the user created above and install some packages:

ssh umami@<YOUR-SERVER-IP>
sudo apt update
sudo apt install postgresql postgresql-contrib

This has installed a new user user account postgres, but we will create our own user role. We temporary switch over to the Postgres Account and create a new user called umami (Answer the question 'Shall the new role be a a superuser?' with yes).

sudo -i -u postgres
createuser --interactive

While staying in the temporary terminal we will also create our new database umami and quit the postgres Account with exit:

createdb umami
exit

Now we can open the Postgres Prompt with the New Role and setup a password:

psql
> \password
> \quit # or simpy write exit

At this stage we setup our server, created a database user and a database. Let's get started now with our actual Umami Installation.

Setup and run Umami on Vercel

Import Schema

First we need to create the database tables so we will (still on our DigitalOcean droplet) download the schema and import it to our created database umami:

ssh umami@<YOUR-SERVER-IP>
curl -O https://raw.githubusercontent.com/mikecao/umami/master/sql/schema.postgresql.sql
psql -h localhost -U umami -d umami -f schema.postgresql.sql

Allow remote connections

Now the database is ready, but we are not yet finished. As we enabled the firewall on our droplet, at the moment no one will be able to access the database from the internet. But as we will install and deploy Umami to Vercel we will need to accept remote connections.

First we add the PostgreSQL Port as an allowed port to the firewall.

sudo ufw allow 5432/tcp

Then we will need configure PostgreSQL to listen to our ip. Open the postgresql.conf and change listen_addresses to your droplet IP (the same you are connected to) and append also localhost if you want keep the access to the database from localhost.:

sudo nano /etc/postgresql/12/main/postgresql.conf
> listen_addresses = 'YOUR-DROPLET-IP, localhost'

Save the postgresql.conf file and now we need to allow remote connections but want to limit the access only to our Vercel instance. I searched for the IP address of the deployed Umami instance on Vercel but according to their Knowledge Base we can't get a fixed IP address. Vercel is hosting on Amazon AWS so we can use amazonaws.com as the host we will accept connections from. This is not super secure, as theoretically everyone hosting an application on Amazon could access our database, but we sill got the authentication in form of user/password (and the attackers will need to know the IP Address of our DigitalOcean droplet).

Open the pg_hba.conf file and add the following line at the end and save the file:

sudo nano /etc/postgresql/12/main/pg_hba.conf
> host    umami    umami    .amazonaws.com    md5

To finish the setup we need to restart the postgres service:

sudo /etc/init.d/postgresql restart

Install and deploy Umami to Vercel

Now all the setup is complete and we can just fork the umami Repository from Github and deploy it to Vercel.

There is a one-click installation button on Running on Vercel docs on the Umami website.

You just need to add the two following environment variables:

DATABASE_URL=postgresql://umami:YOUR-DATABASE-PASSWORD@YOUR-DIGITALOCEAN-DROPLET-IP:5432/umami
HASH_SALT=some-hash-you-setup-for-this-application

That's it!

After your deployment to Vercel you can open your Umami Dashboard, login with user admin and password umami and start adding websites you want to track.

For my Next.js app that means I will have to add the Umami tracking JavaScript file in the Head component from next/head in my _app.tsx file:

import Head from 'next/head';
...
<Head>
    <script async defer
            data-website-id="WEBSITE-ID-GIVEN-FROM-UMAMI"
            src="https://your-umami-dashboard-site.app/umami.js"
            data-do-not-track="true"
            data-domains="your-domain.com"
    />
</Head>
...

Integrate Umami on a Next.js site deployed to Vercel