INFRASTRUCTURE-AS-CODE FRONTEND-DEVELOPMENT DEVOPS CLOUD-COMPUTING TERRAFORM PULUMI EDGE-COMPUTING SERVERLESS CDN DEPLOYMENT AUTOMATION DEVELOPER-EXPERIENCE

Infrastructure as Code untuk Frontend Developer: Mengelola Infrastruktur Edge dan Serverless dengan Terraform dan Pulumi

⏱️ 11 menit baca
👨‍💻

Infrastructure as Code untuk Frontend Developer: Mengelola Infrastruktur Edge dan Serverless dengan Terraform dan Pulumi

1. Pendahuluan

Di era pengembangan web modern, peran seorang frontend developer telah meluas jauh melampaui sekadar menulis kode JavaScript, CSS, dan HTML. Dengan adopsi arsitektur seperti Jamstack, Serverless, dan Edge Computing, frontend developer kini semakin sering berinteraksi langsung dengan infrastruktur cloud. Dari deployment aplikasi statis ke CDN, konfigurasi Edge Functions, hingga manajemen backend serverless, pemahaman tentang infrastruktur menjadi krusial.

Namun, mengelola infrastruktur secara manual melalui konsol cloud atau CLI bisa jadi repetitif, rawan kesalahan, dan sulit diskalakan. Di sinilah Infrastructure as Code (IaC) hadir sebagai solusi. IaC memungkinkan Anda mendefinisikan, menyediakan, dan mengelola infrastruktur Anda menggunakan kode, sama seperti Anda mengelola kode aplikasi. Artikel ini akan membahas mengapa IaC penting bagi frontend developer dan bagaimana Anda bisa mulai menggunakannya dengan tools populer seperti Terraform dan Pulumi.

2. Pergeseran Paradigma Frontend ke Infrastruktur

Dulu, frontend developer fokus pada “apa yang dilihat pengguna” dan menyerahkan urusan server serta database sepenuhnya kepada tim backend atau DevOps. Namun, lanskap web telah berubah drastis:

Pergeseran ini berarti frontend developer tidak hanya “mengonsumsi” API, tetapi juga “menyediakan” sebagian dari infrastruktur yang mendukung aplikasi mereka. Dengan IaC, proses ini bisa dilakukan dengan lebih efisien dan terkontrol.

3. Apa Itu Infrastructure as Code (IaC)?

📌 IaC adalah praktik mengelola dan menyediakan infrastruktur komputasi Anda (jaringan, virtual machine, load balancer, database, dsb.) menggunakan file konfigurasi yang dapat dibaca mesin dan dikelola dalam sistem versi (seperti Git).

Alih-alih mengklik di konsol cloud, Anda menulis kode yang mendeskripsikan kondisi infrastruktur yang Anda inginkan. Tools IaC kemudian akan membaca kode tersebut dan secara otomatis membuat atau memodifikasi infrastruktur Anda agar sesuai dengan deskripsi.

Karakteristik Utama IaC:

4. Mengapa Frontend Developer Membutuhkan IaC?

Bagi frontend developer yang kini juga mengelola sebagian infrastruktur, IaC menawarkan banyak keuntungan:

5. Memilih Tooling IaC: Terraform vs. Pulumi

Ada banyak tools IaC, namun Terraform dan Pulumi adalah dua yang paling populer dan serbaguna. Keduanya mendukung berbagai penyedia cloud (AWS, Azure, GCP, Cloudflare, Vercel, dll.) dan memiliki komunitas yang besar.

Terraform

Contoh Skenario Praktis dengan Terraform: Hosting Situs Statis di AWS S3 + CloudFront

Misalkan Anda memiliki aplikasi React atau Next.js statis yang ingin Anda deploy ke AWS.

# main.tf

# Konfigurasi AWS Provider
provider "aws" {
  region = "ap-southeast-1"
}

# 1. Membuat S3 Bucket untuk hosting situs statis
resource "aws_s3_bucket" "frontend_bucket" {
  bucket = "my-awesome-frontend-app-bucket-12345" # Ganti dengan nama unik
  acl    = "public-read" # Penting untuk situs statis
  website {
    index_document = "index.html"
    error_document = "index.html" # Untuk SPA routing
  }
  tags = {
    Project = "MyFrontendApp"
    ManagedBy = "Terraform"
  }
}

# 2. Membuat OAI (Origin Access Identity) untuk CloudFront
resource "aws_cloudfront_origin_access_identity" "oai" {
  comment = "OAI for my awesome frontend app"
}

# 3. Membuat S3 Bucket Policy untuk memberikan akses ke OAI
data "aws_iam_policy_document" "s3_policy" {
  statement {
    principals {
      type        = "AWS"
      identifiers = [aws_cloudfront_origin_access_identity.oai.iam_arn]
    }
    actions = [
      "s3:GetObject"
    ]
    resources = [
      "${aws_s3_bucket.frontend_bucket.arn}/*"
    ]
  }
}

resource "aws_s3_bucket_policy" "bucket_policy" {
  bucket = aws_s3_bucket.frontend_bucket.id
  policy = data.aws_iam_policy_document.s3_policy.json
}

# 4. Membuat CloudFront Distribution
resource "aws_cloudfront_distribution" "frontend_cdn" {
  enabled = true
  is_ipv6_enabled = true

  origin {
    domain_name = aws_s3_bucket.frontend_bucket.bucket_regional_domain_name
    origin_id   = "S3-my-frontend-app"
    s3_origin_config {
      origin_access_identity = aws_cloudfront_origin_access_identity.oai.cloudfront_access_identity_path
    }
  }

  default_cache_behavior {
    target_origin_id = "S3-my-frontend-app"
    viewer_protocol_policy = "redirect-to-https"
    allowed_methods        = ["GET", "HEAD", "OPTIONS"]
    cached_methods         = ["GET", "HEAD", "OPTIONS"]
    compress               = true
    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }

  viewer_certificate {
    cloudfront_default_certificate = true
  }

  # Output URL CloudFront setelah deployment
  output "cloudfront_domain_name" {
    value = aws_cloudfront_distribution.frontend_cdn.domain_name
    description = "Domain name of the CloudFront distribution"
  }
}

Cara Kerja:

  1. Anda menulis kode HCL ini.
  2. Jalankan terraform init untuk menginisialisasi proyek.
  3. Jalankan terraform plan untuk melihat perubahan yang akan dilakukan.
  4. Jalankan terraform apply untuk membuat atau memperbarui infrastruktur di AWS.

💡 Tips Terraform: Untuk mengunggah file statis ke S3, Anda bisa menggunakan aws s3 sync di CI/CD pipeline Anda setelah terraform apply selesai.

Pulumi

Contoh Skenario Praktis dengan Pulumi: Deploy Cloudflare Worker dengan TypeScript

Misalkan Anda ingin men-deploy Edge Function sederhana menggunakan Cloudflare Workers.

// index.ts (Pulumi project)

import * as cloudflare from "@pulumi/cloudflare";
import * as fs from "fs";

// Baca kode Worker dari file lokal
const workerScript = fs.readFileSync("./worker/index.js", "utf8");

// Membuat Cloudflare Worker script
const myWorker = new cloudflare.WorkerScript("my-frontend-worker", {
    name: "my-frontend-worker", // Nama unik untuk Worker
    content: workerScript,
    // Tambahkan route jika diperlukan, misalnya:
    // route: {
    //     pattern: "my-app.example.com/*",
    //     zoneId: "your-zone-id", // Ganti dengan ID zona Cloudflare Anda
    // },
    // Tambahkan environment variables atau binding jika ada
    kvNamespaceBindings: [
        {
            name: "MY_KV_NAMESPACE",
            namespaceId: "your-kv-namespace-id", // Ganti dengan ID KV Namespace Anda
        },
    ],
    // ... konfigurasi lain
});

// Export URL Worker jika ada route yang dikonfigurasi
export const workerUrl = myWorker.route.apply(route => route ? `https://${route.pattern.split('/')[0]}` : "No specific route configured, access via worker subdomain.");

// Isi file worker/index.js
/*
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Contoh sederhana: Mengakses KV Namespace
  const greeting = await MY_KV_NAMESPACE.get("greeting") || "Hello";
  return new Response(`${greeting} from Cloudflare Worker!`, {
    headers: { 'content-type': 'text/plain' },
  })
}
*/

Cara Kerja:

  1. Anda menulis kode TypeScript ini dan kode Worker Anda.
  2. Jalankan pulumi up untuk melihat perubahan dan men-deploy infrastruktur (Worker) ke Cloudflare.

💡 Tips Pulumi: Karena menggunakan bahasa pemrograman, Anda bisa menulis fungsi helper, menggunakan loop, atau bahkan mengintegrasikan dengan unit testing untuk kode infrastruktur Anda. Ini memberikan fleksibilitas yang lebih besar.

6. Best Practices IaC untuk Frontend

Mengadopsi IaC memerlukan beberapa praktik terbaik untuk memastikan keberhasilan dan maintainability:

Kesimpulan

Infrastructure as Code bukan lagi hanya domain tim DevOps. Bagi frontend developer modern yang terlibat dalam deployment aplikasi ke CDN, mengelola Edge Functions, atau berinteraksi dengan layanan serverless, IaC adalah keterampilan yang sangat berharga. Dengan tools seperti Terraform dan Pulumi, Anda dapat membawa prinsip-prinsip pengembangan software yang sudah Anda kenal – seperti version control, otomatisasi, dan kolaborasi – ke dalam manajemen infrastruktur Anda.

Mengadopsi IaC akan membuat deployment frontend Anda lebih cepat, lebih konsisten, dan jauh lebih andal. Ini adalah langkah maju untuk meningkatkan Developer Experience (DX) Anda dan tim, serta membangun aplikasi web yang lebih tangguh dan mudah di-maintain. Mulailah bereksperimen dengan Terraform atau Pulumi di proyek frontend Anda, dan rasakan sendiri perbedaannya!

🔗 Baca Juga