Preview Environment dengan Database Isolated: Setup Neon + Helipod

Tim Helipod

2026年6月17日5 分钟阅读

本文以印尼语撰写。

Preview environment adalah fitur yang memungkinkan kamu preview perubahan kode sebelum di-merge ke production. Tapi masalahnya: preview environment butuh database sendiri, dan setup database manual untuk setiap preview itu ribet.

Sekarang ada solusinya.

Dengan Neon database branching + Helipod, setiap preview environment otomatis punya database branch sendiri, tanpa setup manual, tanpa tunggu menit, tanpa takut ngotorin data production.

Apa Itu Preview Environment?#

Preview environment adalah copy dari production environment yang dibuat secara otomatis untuk setiap:

Pull request di GitHub/GitLab
Branch yang di-push
Commit tertentu

Production: https://app.helipod.io
    ↓
Preview PR #123: https://pr-123.helipod.io
Preview PR #124: https://pr-124.helipod.io
Preview PR #125: https://pr-125.helipod.io

Masalah: Setiap preview butuh database sendiri. Kalau manual, ribet.

Solusi: Neon database branching + Helipod = otomatis.

Kenapa Database Isolated Penting?#

Tanpa Database Isolated#

PR #123: Add payment feature → Testing di staging → Data production kotor!
PR #124: Fix login bug → Testing di staging → Data campur aduk!

Akhirnya:

QA harus hati-hati banget waktu testing
Sering ada data "sampah" di staging
Production data terancam kena dampak

Dengan Database Isolated#

PR #123: Add payment feature → Database branch pr-123 → Isolated!
PR #124: Fix login bug → Database branch pr-124 → Isolated!

Hasilnya:

QA bisa testing bebas tanpa takut
Data production tetap bersih
Setiap PR punya data sendiri

Cara Kerja Neon Branching untuk Preview#

Production Database (main branch)
│
├── Preview PR #123 (branch: pr-123)
│   ├── Data: Copy dari production saat branching
│   ├── Schema: Bisa di-migrate tanpa ngaruh production
│   └── URL: pr-123.helipod.io
│
├── Preview PR #124 (branch: pr-124)
│   ├── Data: Copy dari production saat branching
│   ├── Schema: Bisa di-migrate tanpa ngaruh production
│   └── URL: pr-124.helipod.io
│
└── Staging (branch: staging)
    ├── Data: Copy dari production
    ├── Schema: Selalu update
    └── URL: staging.helipod.io

Setup Preview Environment dengan Helipod#

Langkah 1: Setup Neon + Helipod#

Connect Neon ke Helipod (lihat tutorial integrasi)
Aktifkan Branch per environment
Set naming pattern: pr-{number}

Langkah 2: Konfigurasi Auto-Deploy#

Konfigurasi preview environment melalui dashboard Helipod:

Buka Settings → Integrations → Neon
Aktifkan Preview Environment
Set naming pattern: pr-{number}
Aktifkan Auto Cleanup untuk cleanup otomatis

Langkah 3: Deploy Preview#

# Push kode ke branch
git push origin feature/new-feature

# Helipod otomatis:
# 1. Buat database branch baru
# 2. Deploy preview environment
# 3. Generate preview URL

Hasil:

Preview deployed!
├── URL: https://pr-123.helipod.io
├── Database: pr-123 branch (isolated)
└── Status: Ready for testing

Real Use Cases#

Use Case 1: E-commerce Feature#

Situasi: Developer buat fitur checkout baru yang butuh schema changes

# 1. Push feature branch
git push origin feature/new-checkout

# 2. Helipod buat preview
Preview URL: https://pr-456.helipod.io
Database: pr-456 (isolated)

# 3. Developer test fitur baru
# - Buat test orders
# - Test payment flow
# - Ga ngaruh production data

# 4. PR di-merge → Preview cleanup otomatis

Use Case 2: Schema Migration Testing#

Situasi: Butu test migration sebelum apply ke production

# 1. Buat branch untuk testing migration
git checkout -b feature/db-migration

# 2. Database branch otomatis dibuat
# Data: Copy dari production

# 3. Jalankan migration
npx prisma migrate dev --name add-payment-table

# 4. Test migration
# - Cek apakah migration jalan
# - Cek apakah ada data loss
# - Cek performance

# 5. Kalau aman → merge ke main

Use Case 3: Client Demo#

Situasi: Perlu demo fitur baru ke client tanpa install lokal

# 1. Push kode ke branch
git push origin feature/client-demo

# 2. Preview otomatis deployed
Preview URL: https://pr-789.helipod.io

# 3. Kirim link ke client
Client bisa langsung test tanpa install apapun!

# 4. Setelah demo → cleanup otomatis

Best Practices#

1. Naming Pattern yang Jelas#

# Untuk pull requests
pr-{number}

# Untuk feature branches
feature-{name}

# Untuk staging
staging

2. Auto-Cleanup#

{
  "preview": {
    "auto_cleanup": true,
    "cleanup_on_merge": true,
    "cleanup_on_close": true
  }
}

3. Data Seeding#

# Seed preview database dengan test data
helipod seed --branch pr-123 --data test-data.json

4. Environment Variables#

# Preview environment punya env vars sendiri
DATABASE_URL=postgresql://...@ep-xxx-pr-123.neon.tech/dbname
NEXT_PUBLIC_API_URL=https://pr-123.helipod.io/api

FAQ#

Berapa biaya preview environment dengan Neon?#

Neon free tier mendukung 10 branches gratis. Untuk project yang lebih besar, Neon Pro tersedia mulai $19/bulan dengan 100 branches.

Apakah preview environment otomatis cleanup?#

Ya! Di Helipod, kamu bisa setup cleanup otomatis saat PR di-merge atau ditutup. Branch database juga otomatis dihapus.

Bagaimana jika butuh production data di preview?#

Kamu bisa clone production branch ke preview branch. Data akan di-copy secara instan tanpa downtime.

Bisakah saya test migration di preview?#

Ya! Preview environment punya database branch sendiri, jadi kamu bisa test migration tanpa takut ngaruh production.

Checklist Setup Preview#

Kesimpulan#

Preview environment dengan database isolated adalah game changer untuk tim development. Dengan Neon + Helipod, kamu bisa:

✅ Preview environment otomatis untuk setiap PR
✅ Database branch isolated tanpa setup manual
✅ Cleanup otomatis saat PR di-merge
✅ Testing tanpa takut ngotorin production

Butuh bantuan setup? Hubungi support@helipod.io

Baca juga: