Analitis Umami Pengehosan Sendiri: Panduan Lengkap untuk Menggunakan Vercel dan Supabase secara Percuma

Apa itu Analitis

Analitik ialah proses mengumpul dan menganalisis data tentang cara pelawat berinteraksi dengan tapak web anda. Maklumat ini penting kerana ia membolehkan anda membuat keputusan termaklum untuk menambah baik tapak web anda.

Google Analitis ialah pilihan yang bagus tetapi mungkin terdapat privasi data serta kebimbangan pematuhan GDPR.

Apabila memilih alat analitis, adalah penting:

• adalah percuma (sumber terbuka)
• membenarkan pengehosan sendiri (tiada vendor terkunci masuk)
• mematuhi GDPR
• ringan & pantas

Analitis Umami menyemak semua kotak ini.

Umami Analytics : Penyelesaian analitik sumber terbuka

Analitis Umami ialah alat yang ringkas, pantas dan memfokuskan privasi yang membolehkan anda menjejaki penggunaan tapak web tanpa menjejaskan privasi pengguna. Ia adalah alternatif sumber terbuka kepada Google Analitis. Kelebihan besar ialah analitis Umami mematuhi GDPR (Peraturan Perlindungan Data Umum).

Terdapat dua pilihan untuk menggunakan analitik UMAMI

• gunakan penyelesaian awan UMAMI (dibayar dengan pelan peringkat percuma)
• Hos sendiri pada pelayan anda

Dalam artikel ini kita akan meneroka pilihan pengehosan sendiri. Kami akan menggunakan Supabase (pelan peringkat percuma) untuk pangkalan data (postgres) dan Vercel (pelan peringkat/hobi percuma) untuk mengehos Umami.

Mari kita mendalami cara mengehos sendiri analitik Umami menggunakan Vercel + Supabase secara percuma

1. Buat projek baharu dalam Supabase

• Buat akaun baharu (jika anda belum memilikinya) dengan Supabase dan buat projek baharu dengan menekan + Projek Baharu
• Berikan nama projek mengikut kesukaan anda (cth. your_app_name-analytics)
• Jangan lupa simpan kata laluan di suatu tempat, ia akan diperlukan kemudian.
• Pilih kawasan yang paling hampir dengan lokasi pelayan pengehosan.

2. Konfigurasi Awal untuk Supabase

• Pilih projek, navigasi ke editor SQL
• Salin skrip SQL yang disediakan dalam repo github

• Tampalkannya pada editor SQL dan klik pada run

• Anda akan dapat melihat jadual yang baru dibuat pada pilihan Editor Jadual

• Navigasi ke Tetapan Projek → Pangkalan Data → Rentetan Sambungan → Salin URL Sambungan

3. Garpu UMAMI pada github

• Gancang projek https://github.com/umami-software/umami ke akaun GitHub anda.

• Edit fail db/postgresql/schema.prisma (tambah directUrl)
  

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

4. Sebarkan pada Vercel

• Pergi ke Papan Pemuka pada Vercel dan buat projek baharu
• Dari halaman papan pemuka, klik Import Projek kemudian tentukan URL pada garpu projek anda pada GitHub.
• Sebelum mengklik pada Deploy tambahkan pembolehubah persekitaran berikut

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

Penting!!

? DATABASE_URL adalah sama dengan Url Sambungan yang disalin daripada supabase (dalam langkah 2) tetapi anda perlu menambah ?pgbouncer=true&connect_timeout=1 di penghujung Url

? DATABASE_URL adalah sama seperti Url Sambungan yang disalin daripada supabase (dalam langkah 2) tetapi anda perlu menggantikan port dari 6543 kepada 5432

• Selepas itu klik pada deploy

5. Menyelesaikan Ralat "Skema pangkalan data tidak kosong"

• Dalam langkah kedua kami menjalankan skrip sql dalam Supabase yang mencipta beberapa jadual dalam pangkalan data. Sekarang apabila skrip dijalankan semasa penggunaan ia melemparkan ralat dengan kod ralat P3005 yang mengatakan Skema pangkalan data tidak kosong
• Untuk menyelesaikan masalah ini, klon repositori bercabang anda dalam setempat anda dan tambahkan pembolehubah persekitaran yang sama seperti yang dinyatakan di atas (dalam langkah 4)

• Sekarang jalankan arahan berikut (untuk memasang kebergantungan dan menyediakan sambungan db)
  

  yarn install
  yarn build-db
  

• Kemudian kami akan membuat migrasi garis dasar dengan mengikuti langkah di bawah

1. Jika anda mempunyai folder prisma/migrasi, padamkan, alihkan, namakan semula atau arkibkan folder ini.

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 (
        <html lang="en" className="dark">
      <body className={cn(`${inter.className} antialiased`)}>
          <Navbar />
        {children}
        <Footer />
      </body>
      <Script 
          defer 
          src="https://[your-analytics-app].vercel.app/script.js" 
          data-website-id="xxxx-xxx-xxxx-xxxx-xxxxx" 
        />
    </>
  )
}

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

Atas ialah kandungan terperinci Analitis Umami Pengehosan Sendiri: Panduan Lengkap untuk Menggunakan Vercel dan Supabase secara Percuma. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!