Integrate Umami on a Next.js site deployed to Vercel
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.
- 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.
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:
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
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
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
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
sudo nano /etc/postgresql/12/main/postgresql.conf > listen_addresses = 'YOUR-DROPLET-IP, localhost'
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).
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:
After your deployment to Vercel you can open your Umami Dashboard, login with user
admin and password
start adding websites you want to track.
Head component from
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> ...
Erhalte E-Mails von mir über Triathlon und Web Development.