Selbsthostende Umami Analytics: Eine vollständige Anleitung zur kostenlosen Bereitstellung mit Vercel und Supabase

Was ist Analytics?

Analytics ist der Prozess der Erfassung und Analyse von Daten darüber, wie Besucher mit Ihrer Website interagieren. Diese Informationen sind von entscheidender Bedeutung, da sie es Ihnen ermöglichen, fundierte Entscheidungen zur Verbesserung Ihrer Website zu treffen.

Google Analytics ist eine gute Wahl, es könnten jedoch Bedenken hinsichtlich des Datenschutzes und der Einhaltung der DSGVO bestehen.

Bei der Auswahl eines Analysetools ist es wichtig, dass es:

• ist kostenlos (Open Source)
• ermöglicht Selbsthosting (keine Anbieterbindung)
• ist DSGVO-konform
• ist leicht und schnell

Umami Analytics überprüft alle diese Kästchen.

Umami Analytics: Eine Open-Source-Analyselösung

Umami Analytics ist ein einfaches, schnelles und datenschutzorientiertes Tool, mit dem Sie die Website-Nutzung verfolgen können, ohne die Privatsphäre der Benutzer zu gefährden. Es ist eine Open-Source-Alternative zu Google Analytics. Ein großes Plus ist, dass Umami Analytics der DSGVO (Datenschutz-Grundverordnung) entspricht.

Es gibt zwei Möglichkeiten, UMAMI Analytics zu verwenden

• Verwenden Sie UMAMI-Cloud-Lösungen (kostenpflichtig mit kostenlosem Tarif)
• Selbsthosting auf Ihrem Server

In diesem Artikel befassen wir uns mit der Selbsthosting-Option. Wir werden Supabase (kostenloser Tarif) für die Datenbank (Postgres) und Vercel (kostenloser Tarif/Hobby-Plan) für das Hosting von Umami verwenden.

Lassen Sie uns untersuchen, wie Sie Umami-Analysen mit Vercel + Supabase kostenlos selbst hosten können

1. Erstellen Sie ein neues Projekt in Supabase

• Erstellen Sie ein neues Konto (falls Sie noch keins haben) bei Supabase und erstellen Sie ein neues Projekt, indem Sie auf + Neues Projekt klicken
• Geben Sie den gewünschten Projektnamen an (z. B. Ihr_App-Name-Analyse)
• Vergessen Sie nicht, das Passwort irgendwo zu speichern, es wird später benötigt.
• Wählen Sie eine Region aus, die dem Standort des Hosting-Servers am nächsten liegt.

2. Erstkonfiguration für Supabase

• Wählen Sie das Projekt aus, navigieren Sie zum SQL-Editor
• Kopieren Sie die im Github-Repo bereitgestellten SQL-Skripte

• Fügen Sie es in den SQL-Editor ein und klicken Sie auf „Ausführen“

• Sie können neu erstellte Tabellen in der Option „Tabelleneditor“ sehen

• Navigieren Sie zu Projekteinstellungen → Datenbank → Verbindungszeichenfolge → Verbindungs-URL kopieren

3. Forken Sie UMAMI auf Github

• Verzweigen Sie das https://github.com/umami-software/umami-Projekt in Ihr GitHub-Konto.

• Datei db/postgresql/schema.prisma bearbeiten (directUrl hinzufügen)
  

  datasource db {
    provider     = "postgresql"
    url          = env("DATABASE_URL")
    directUrl    = env("DIRECT_DATABASE_URL")  //add this line
    relationMode = "prisma"
  }
  

4. Auf Vercel bereitstellen

• Gehen Sie zum Dashboard auf Vercel und erstellen Sie ein neues Projekt
• Klicken Sie auf der Dashboard-Seite auf Projekt importieren und geben Sie dann die URL zu Ihrem Fork des Projekts auf GitHub an.
• Bevor Sie auf „Bereitstellen“ klicken, fügen Sie die folgenden Umgebungsvariablen hinzu

DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?**pgbouncer=true&connection_limit=1**
DIRECT_DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:**5432**/postgres

Wichtig!!

? DATABASE_URL ist dieselbe wie die Verbindungs-URL, die von supabase kopiert wurde (in Schritt 2), aber Sie müssen ?pgbouncer=true&connect_timeout=1 am Ende der URL

hinzufügen

? DATABASE_URL ist dieselbe wie die von supabase kopierte Verbindungs-URL (in Schritt 2), aber Sie müssen den Port von 6543 durch 5432 ersetzen

• Danach klicken Sie auf „Bereitstellen“

5. Beheben des Fehlers „Das Datenbankschema ist nicht leer“

• Im zweiten Schritt haben wir ein SQL-Skript in Supabase ausgeführt, das einige Tabellen in der Datenbank erstellt hat. Wenn das Skript jetzt während der Bereitstellung ausgeführt wird, wird ein Fehler mit dem Fehlercode P3005 ausgegeben, der besagt, dass das Datenbankschema nicht leer ist
• Um dieses Problem zu beheben, klonen Sie Ihr gespaltenes Repository in Ihrem lokalen und fügen Sie dieselben Umgebungsvariablen wie oben (in Schritt 4) erwähnt hinzu

• Führen Sie nun die folgenden Befehle aus (um Abhängigkeiten zu installieren und die Datenbankverbindung einzurichten)
  

  yarn install
  yarn build-db
  

• Dann würden wir eine Basismigration erstellen, indem wir die folgenden Schritte befolgen

1. Wenn Sie einen Ordner „prisma/migrations“ haben, löschen, verschieben, benennen oder archivieren Sie diesen Ordner.

2. Run the following command to create a migrations directory inside with your preferred name. This example will use 01_init for the migration name:

   mkdir -p prisma/migrations/01_init
   

3. Generate a migration and save it to a file using prisma migrate diff

   npx prisma migrate diff \
   --from-empty \
   --to-schema-datamodel prisma/schema.prisma \
   --script > prisma/migrations/01_init/migration.sql
   

4. Run the prisma migrate resolve command for each migration that should be ignored:

   npx prisma migrate resolve --applied 01_init
   

   This command adds the target migration to the _prisma_migrations table and marks it as applied. When you run prisma migrate deploy to apply new migrations, Prisma Migrate:

   1. Skips all migrations marked as 'applied', including the baseline migration
   2. Applies any new migrations that come after the baseline migration

• You will be able to successfully deploy the app on Vercel server after this. The URL of your analytics app would be available under project tab of Vercel app.

6. Login to Umami

• The default credentials for login is

username : admin
password : umami

• To change the default credentials navigate to settings → users → admin → edit
• Enter your new password and click on save.

7. Configure your website for analytics tracking

• navigate to settings → websites → + Add website

Name : provide any name of your choice
Domain : your [website](https://www.invoizly.com) domain (eg. invoizly.com) 

• Once website is added navigate to settings → website → your website name → edit → tracking code. Copy the tracking code.

8. Add tracking code to your project

In Next.JS projects to load a third-party script for multiple routes, import next/script and include the script directly in your layout component:

import Script from 'next/script'

export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
        81d89b5803f4382047d2a9a2fe845023
      39c7e4b4f64d9aef06707b4f0d0ccadf
          6ffb63ddaf21320e5768a9f5d82c36d7
        {children}
        a9af832cc08123ff4bbc99fefcd24cf5
      36cc49f0c466276486e50c850b7e4956
      2546ec4c319274fba24fabf75d291e1a
    5f557f62ae7ac7a14e0b1cb564790dfc
  )
}

After adding the Sript in your root layout, deploy your app and visit your web page. you will be able to track the visits on your analytics dashboard page.

Conclusion

Hope with help of this article you will be able to set up analytics for your application quickly and easily, without relying on third-party services. Since Vercel and Supabase both provides generous free tier, you can run your analytics for free in the initial days while being GDPR compliant.

About Invoizly

Invoizly is all about making invoicing easy and free. With Invoizly, you can quickly create high-quality, customizable invoices that look professional. It’s designed to be super user-friendly, so you can focus on your business instead of getting bogged down in paperwork.

Cover image by Marissa Grootes on Unsplash

Das obige ist der detaillierte Inhalt vonSelbsthostende Umami Analytics: Eine vollständige Anleitung zur kostenlosen Bereitstellung mit Vercel und Supabase. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!