셀프 호스팅 Umami Analytics: Vercel 및 Supabase를 무료로 배포하기 위한 완벽한 가이드

분석이란 무엇입니까?

분석은 방문자가 웹사이트와 상호 작용하는 방식에 대한 데이터를 수집하고 분석하는 프로세스입니다. 이 정보를 통해 웹사이트 개선을 위한 현명한 결정을 내릴 수 있으므로 매우 중요합니다.

Google Analytics는 훌륭한 선택이지만 데이터 개인정보 보호와 GDPR 준수 문제가 있을 수 있습니다.

분석 도구를 선택할 때 다음 사항이 중요합니다.

• 무료입니다(오픈 소스)
• 자체 호스팅 허용(공급업체에 종속되지 않음)
• GDPR을 준수합니다
• 가벼우며 빠릅니다

Umami Analytics는 이 모든 항목을 확인합니다.

Umami Analytics : 오픈 소스 분석 솔루션

Umami Analytics는 사용자 개인정보를 침해하지 않으면서 웹사이트 사용을 추적할 수 있는 간단하고 빠르며 개인정보 보호에 중점을 둔 도구입니다. Google Analytics에 대한 오픈 소스 대안입니다. 큰 장점은 Umami 분석이 GDPR(일반 데이터 보호 규정)을 준수한다는 것입니다.

UMAMI 분석을 사용하는 두 가지 옵션이 있습니다

• UMAMI 클라우드 솔루션 사용(무료 요금제로 유료)
• 귀하의 서버에서 자체 호스트

이 기사에서는 자체 호스팅 옵션을 살펴보겠습니다. 데이터베이스(postgres)에는 Supabase(무료 계층 계획)를 사용하고 Umami 호스팅에는 Vercel(무료 계층/취미 계획)을 사용할 예정입니다.

Vercel + Supabase를 사용하여 Umami 분석을 무료로 자체 호스팅하는 방법을 살펴보겠습니다

1. Supabase에서 새 프로젝트 만들기

• Supabase로 새 계정을 만들고(아직 계정이 없는 경우) + 새 프로젝트를 눌러 새 프로젝트를 만듭니다.
• 원하는 대로 프로젝트 이름을 제공하세요(예: your_app_name-analytics)
• 나중에 필요할 수 있으므로 비밀번호를 어딘가에 저장하는 것을 잊지 마세요.
• 호스팅 서버 위치와 가장 가까운 지역을 선택하세요.

2. Supabase의 초기 구성

• 프로젝트를 선택하고 SQL 편집기로 이동
• github 저장소에 제공된 SQL 스크립트를 복사하세요

• SQL 편집기에 붙여넣고 실행을 클릭하세요

• 테이블 편집기 옵션에서 새로 생성된 테이블을 볼 수 있습니다

• 프로젝트 설정 → 데이터베이스 → 연결 문자열 → 연결 URL 복사로 이동

3. github에서 UMAMI 포크

• https://github.com/umami-software/umami 프로젝트를 GitHub 계정으로 포크하세요.

• db/postgresql/schema.prisma 파일 편집(directUrl 추가)
  

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

4. Vercel에 배포

• Vercel의 대시보드로 이동하여 새 프로젝트를 생성하세요
• 대시보드 페이지에서 프로젝트 가져오기를 클릭한 다음 GitHub 프로젝트 포크에 대한 URL을 지정하세요.
• 배포를 클릭하기 전에 다음 환경 변수를 추가하세요.

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

중요한!!

? DATABASE_URL은 supabase에서 복사한 연결 URL(2단계)과 동일하지만 Url 끝에 ?pgbouncer=true&connect_timeout=1

을 추가해야 합니다.

? DATABASE_URL은 supabase에서 복사한 연결 URL(2단계)과 동일하지만 포트를 6543에서 5432로 바꿔야 합니다

• 그 후 배포를 클릭하세요

5. "데이터베이스 스키마가 비어 있지 않습니다" 오류 해결

• 2단계에서는 데이터베이스에 몇 개의 테이블을 생성하는 Supabase에서 SQL 스크립트를 실행했습니다. 이제 배포 중에 스크립트가 실행되면 데이터베이스 스키마가 비어 있지 않다는 오류 코드 P3005와 함께 오류가 발생합니다.
• 이 문제를 해결하려면 포크된 저장소를 로컬에 복제하고 위에서 언급한 것과 동일한 환경 변수를 추가하세요(4단계)

• 이제 다음 명령을 실행하세요(종속성을 설치하고 DB 연결을 설정하려면)
  

  yarn install
  yarn build-db
  

• 그런 다음 아래 단계에 따라 기본 마이그레이션을 생성합니다

1. prisma/migrations 폴더가 있는 경우 이 폴더를 삭제, 이동, 이름 변경 또는 보관하세요.

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

위 내용은 셀프 호스팅 Umami Analytics: Vercel 및 Supabase를 무료로 배포하기 위한 완벽한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!