PT Cloud Platform Indonesia (PT CPI)

Platform Engineering

May 28, 2026
12 menit baca

Membangun ptcpi.cloud—Pelajaran DevSecOps dari Website Partner GCP Kami Sendiri

PT CPI membangun ulang website publik dengan Astro dan Cloudflare Workers. Gambar rusak, gap Lighthouse, dan kejutan deploy menjadi studi kasus praktik DevSecOps yang sama seperti program GCP klien.

Ringkasan eksekutif: Kami membangun ulang ptcpi.cloud sebagai sistem produksi di Astro dan Cloudflare Workers—bukan microsite slide deck. Saat gambar rusak di prod dan Lighthouse Performance mentok di 72, kami memperbaikinya dengan loop DevSecOps yang sama seperti program GCP: reproduksi, root cause, otomasi guardrail, deploy ulang. Artikel ini adalah buktinya.

Kebanyakan konsultan cloud memperlakukan website sendiri sebagai hal sekunder. Kami melakukan sebaliknya. ptcpi.cloud hadir dengan dokumentasi Starlight, konten bilingual EN/ID, rute marketing prerender, dan deployment di Cloudflare Workers—dibangun dengan disiplin engineering yang sama seperti landing zone, pipeline FinTech, dan delivery terregulasi.

Untuk siapa artikel ini

Peran	Apa yang Anda dapat
CEO / COO	Bukti kami praktik dulu sebelum jual—skor Lighthouse publik, disiplin deploy, tanpa “exception marketing”
CTO / Head of Engineering	Perbaikan konkret: pipeline gambar, anggaran CSS, island nol-JS, audit reproducible
Platform / SRE / Engineer	Cuplikan config, workflow Taskfile, dan cara memisahkan error nyata dari noise analytics

Matriks masalah → solusi

Masalah	Gejala	Akar masalah	Solusi
Pipeline gambar	Gambar hero/layanan HTTP 500 setelah deploy pertama	Runtime `/_image` butuh binding Images Cloudflare; mismatch prerender	`imageService: 'compile'` + asset `wrangler` selaras
Anggaran performa	Lighthouse Performance 72, SEO sudah 100	CSS ~117 KB bloat, island Solid.js, tanpa preload LCP, `backdrop-blur` navbar	Buang CSS tidak perlu, toggle vanilla, preload hero, redeploy
Audit drift	Hijau lokal, merah di ptcpi.cloud	Preview server salah, Missing Sharp di dev, setup Chromium tidak konsisten	`task lighthouse:preview` ke output build Wrangler
Noise console	`beacon.min.js` ERR_BLOCKED_BY_CLIENT	Cloudflare Web Analytics diblokir ekstensi privasi—bukan defect app	Dokumentasi untuk auditor; skor tidak terpengaruh

Show me the code

Gambar compile-time di Cloudflare

Kami berhenti mengandalkan transform gambar runtime untuk halaman prerender:

cloudflare({ imageService: 'compile' })

Asset masuk dist/client sebagai WebP/AVIF teroptimasi saat build—URL prediktif di edge, tanpa kejutan 500 di produksi.

Preload LCP untuk gambar hero

export async function buildHeroLcpPreload(src: ImageMetadata) {
  const [w480, w720, w960] = await Promise.all([
    getImage({ src, width: 480, format: 'webp' }),
    getImage({ src, width: 720, format: 'webp' }),
    getImage({ src, width: 960, format: 'webp' }),
  ]);
  return {
    href: w720.src,
    srcset: `${w480.src} 480w, ${w720.src} 720w, ${w960.src} 960w`,
    sizes: '(max-width: 768px) 100vw, 45vw',
  };
}

Nol JavaScript klien di homepage

Kami menghapus island Solid.js untuk theme toggle dan menggantinya inline—0 KB hydration framework saat first paint:

<!-- Toggle tema: tanpa astro-island, tanpa bundle client:idle -->
<button id="theme-toggle" type="button" aria-pressed="false">…</button>
<script is:inline>/* baca localStorage, toggle .dark */</script>

Proof of concept: Lighthouse di produksi

Kami publikasikan angka, bukan janji. Chrome Lighthouse (mobile, URL produksi, Mei 2026):

Metrik	Homepage (sebelum pass)	Artikel ini (setelah pass)
Performance	72	99
Accessibility	96	91
Best Practices	92	96
SEO	100	100

Bundle CSS turun dari ~117 KB → ~88 KB. JS klien di homepage menjadi nol. Gap Performance adalah utang engineering nyata—bukan angka kosmetik.

Tentang baris merah di console

Beberapa auditor melihat:

GET static.cloudflareinsights.com/beacon.min.js net::ERR_BLOCKED_BY_CLIENT

Itu Cloudflare Web Analytics di-inject di edge, diblokir uBlock Origin, Brave, atau ekstensi privasi sejenis. Bukan defect di bundle Astro kami. Pengunjung tanpa blocker memuat beacon normal; skor Lighthouse tidak terpengaruh. Saat audit dengan ad blocker aktif, pisahkan noise analytics pihak ketiga dari error aplikasi.

Quality gate shift-left

Sepanjang build kami memperlakukan situs seperti repository produk:

TypeScript strict + astro check sebelum setiap build produksi
Vitest untuk utilitas bersama (slugify, locale, branding judul)
Kompresi Brotli via astro-compressor pada HTML statis
Rute marketing prerender untuk edge cepat
Structured data + hreflang untuk SEO bilingual
Slug berbasis judul menggantikan post-N.md
task lighthouse:preview di Taskfile agar perubahan berikutnya diukur sama

Delivery human + agent

Cursor, Hermes, dan MCP (ptcpi-tools) mempercepat refactor—pola judul brand, FAQ, cross-link docs—sementara manusia memegang keputusan arsitektur: batas adapter Cloudflare, routing i18n, dan apa yang masuk Starlight versus marketing.

Governed autonomy—agent mengusulkan diff, pipeline dan reviewer menerima atau menolak—model yang sama kami rekomendasikan saat klien mengadopsi SDLC berbantuan AI di GCP.

Kesimpulan dan langkah berikutnya

Kami tidak menjual DevSecOps sebagai PDF. Kami menjalankan cek ramah TDD, delivery aware security, anggaran performa, dan deploy reproducible di properti sendiri dulu.

Jika Anda CEO, COO, atau CTO yang menilai PT CPI: tanyakan pada partner mana pun apakah mereka menegakkan standar yang sama untuk situs publik dan produksi klien. Kami lakukan—dan studi kasusnya ada di situs yang sedang Anda baca.

Langkah berikutnya:

Jelajahi layanan DevSecOps dan platform engineering kami
Kunjungi situs live di ptcpi.cloud
Hubungi PT CPI untuk review delivery di estate GCP atau Cloudflare Anda