Thursday

19-06-2025 Vol 19

How I built a cost-effective serverless landing page for my businesses

Tech News May 21, 2025

Cara Saya Membuat Halaman Arahan Serverless yang Hemat Biaya untuk Bisnis Saya

Di era digital yang serba cepat ini, memiliki kehadiran online yang kuat sangat penting bagi bisnis apa pun. Dan apa cara yang lebih baik untuk menarik calon pelanggan selain dengan halaman arahan yang dirancang dengan baik? Namun, membangun dan memelihara halaman arahan tradisional dapat menjadi mahal dan memakan waktu, terutama bagi bisnis kecil dengan sumber daya terbatas. Di situlah arsitektur serverless masuk.

Dalam posting blog ini, saya akan berbagi perjalanan saya membangun halaman arahan serverless yang hemat biaya untuk bisnis saya. Saya akan membahas manfaat menggunakan arsitektur serverless, alat dan teknologi yang saya gunakan, dan langkah-langkah langkah demi langkah yang saya ambil untuk membuat dan menerapkan halaman arahan saya.

Mengapa Memilih Arsitektur Serverless?

Sebelum kita masuk ke detail teknis, mari kita bahas mengapa saya memilih arsitektur serverless untuk halaman arahan saya. Berikut adalah beberapa keuntungan utama:

  1. Hemat Biaya: Salah satu keuntungan terbesar dari serverless adalah model pembayarannya sesuai pemakaian. Anda hanya membayar sumber daya komputasi yang Anda gunakan, yang berarti tidak ada biaya overhead untuk server yang menganggur. Ini dapat menghemat banyak uang, terutama untuk bisnis dengan lalu lintas rendah atau yang bervariasi.
  2. Skalabilitas: Arsitektur serverless secara otomatis menskalakan sumber daya Anda berdasarkan permintaan. Ini berarti halaman arahan Anda dapat menangani lonjakan lalu lintas tanpa masalah, tanpa Anda perlu khawatir tentang penyediaan server secara manual.
  3. Kemudahan Pengelolaan: Dengan serverless, Anda tidak perlu khawatir tentang mengelola server, menerapkan patch keamanan, atau melakukan tugas pemeliharaan lainnya. Penyedia cloud menangani semua ini untuk Anda, memungkinkan Anda untuk fokus membangun dan meningkatkan halaman arahan Anda.
  4. Waktu Pengembangan Lebih Cepat: Arsitektur serverless memungkinkan Anda untuk membangun dan menerapkan aplikasi dengan cepat. Anda dapat menggunakan fungsi sebagai layanan (FaaS) untuk membuat komponen individual dari halaman arahan Anda dan menerapkannya secara independen. Ini dapat mempercepat siklus pengembangan Anda secara signifikan.

Alat dan Teknologi yang Saya Gunakan

Untuk membangun halaman arahan serverless saya, saya menggunakan alat dan teknologi berikut:

  1. Penyedia Cloud: AWS (Amazon Web Services). Meskipun ada penyedia cloud lain, saya memilih AWS karena serangkaian layanan serverless yang komprehensif dan komunitas pengembang yang besar.
  2. Framework: Serverless Framework. Kerangka kerja ini menyederhanakan proses penerapan dan pengelolaan aplikasi serverless. Ini memungkinkan Anda untuk mendefinisikan infrastruktur Anda sebagai kode menggunakan file YAML dan menerapkan aplikasi Anda ke AWS dengan satu perintah.
  3. Bahasa Pemrograman: JavaScript (Node.js). Saya memilih JavaScript karena popularitasnya dan ekosistem yang luas dari perpustakaan dan kerangka kerja.
  4. Framework Frontend: React. React adalah perpustakaan JavaScript yang populer untuk membangun antarmuka pengguna. Ini memungkinkan saya untuk membuat halaman arahan yang dinamis dan interaktif.
  5. Hosting Statis: AWS S3. AWS S3 (Simple Storage Service) adalah layanan penyimpanan objek yang sangat andal dan hemat biaya. Saya menggunakan S3 untuk menghosting file statis halaman arahan saya (HTML, CSS, JavaScript, dan gambar).
  6. Jaringan Pengiriman Konten (CDN): AWS CloudFront. CloudFront adalah layanan CDN yang mendistribusikan konten Anda ke server di seluruh dunia, memastikan bahwa pengguna dapat mengakses halaman arahan Anda dengan cepat dan andal, terlepas dari lokasi mereka.
  7. Fungsi Serverless (FaaS): AWS Lambda. AWS Lambda memungkinkan Anda untuk menjalankan kode tanpa menyediakan atau mengelola server. Saya menggunakan Lambda untuk menangani pengiriman formulir, mengirim email, dan melakukan fungsi backend lainnya.
  8. Database: AWS DynamoDB. DynamoDB adalah database NoSQL yang dikelola sepenuhnya. Saya menggunakan DynamoDB untuk menyimpan data formulir pengiriman.
  9. Layanan Email: AWS SES (Simple Email Service). AWS SES adalah layanan email yang hemat biaya dan dapat diskalakan. Saya menggunakan SES untuk mengirim email konfirmasi dan email tindak lanjut.

Langkah-Langkah untuk Membuat Halaman Arahan Serverless

Sekarang, mari kita masuk ke langkah-langkah yang saya ambil untuk membangun halaman arahan serverless saya.

Langkah 1: Merencanakan Arsitektur

Sebelum saya mulai menulis kode apa pun, saya meluangkan waktu untuk merencanakan arsitektur halaman arahan saya. Saya mempertimbangkan kebutuhan spesifik bisnis saya dan fitur yang saya inginkan agar disertakan dalam halaman arahan.

Berikut adalah diagram sederhana dari arsitektur halaman arahan saya:

  • Pengguna: Pengguna mengunjungi halaman arahan melalui browser web mereka.
  • CloudFront: CloudFront mendistribusikan konten halaman arahan dari S3 ke pengguna.
  • S3: S3 menyimpan file statis halaman arahan (HTML, CSS, JavaScript, dan gambar).
  • Lambda: Lambda menangani pengiriman formulir dan mengirim email.
  • DynamoDB: DynamoDB menyimpan data formulir pengiriman.
  • SES: SES mengirim email konfirmasi dan email tindak lanjut.

Halaman arahan saya akan memiliki formulir kontak sederhana di mana pengguna dapat memasukkan nama, email, dan pesan mereka. Saat pengguna mengirimkan formulir, JavaScript di sisi klien akan mengirim permintaan ke fungsi Lambda. Fungsi Lambda akan memvalidasi data, menyimpannya ke DynamoDB, dan mengirim email konfirmasi ke pengguna menggunakan SES.

Langkah 2: Menyiapkan AWS Account dan Menginstal Serverless Framework

Jika Anda belum memiliki akun AWS, Anda perlu membuatnya. Setelah Anda memiliki akun AWS, Anda perlu menginstal Serverless Framework.

Anda dapat menginstal Serverless Framework menggunakan Node Package Manager (npm):

npm install -g serverless

Setelah Serverless Framework diinstal, Anda perlu mengonfigurasinya dengan kredensial AWS Anda. Anda dapat melakukan ini dengan menjalankan perintah berikut:

serverless config credentials --provider aws --key  --secret

Pastikan untuk mengganti <YOUR_AWS_ACCESS_KEY_ID> dan <YOUR_AWS_SECRET_ACCESS_KEY> dengan kredensial AWS Anda yang sebenarnya.

Langkah 3: Membuat Proyek Serverless

Selanjutnya, Anda perlu membuat proyek Serverless. Anda dapat melakukan ini dengan menjalankan perintah berikut:

serverless create --template aws-nodejs --path my-landing-page

Ini akan membuat direktori baru bernama `my-landing-page` dengan template proyek Node.js default. Anda dapat mengubah `aws-nodejs` ke template lain jika Anda ingin menggunakan bahasa pemrograman yang berbeda.

Kemudian navigasikan ke direktori proyek baru Anda:

cd my-landing-page

Langkah 4: Mendefinisikan Infrastruktur dengan serverless.yml

File `serverless.yml` adalah tempat Anda mendefinisikan infrastruktur aplikasi serverless Anda. Ini termasuk fungsi, pemicu, sumber daya, dan izin Anda.

Berikut adalah contoh `serverless.yml` untuk halaman arahan saya:


service: my-landing-page

provider:
  name: aws
  runtime: nodejs18.x
  region: us-east-1
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "dynamodb:PutItem"
      Resource: "arn:aws:dynamodb:us-east-1:ACCOUNT_ID:table/contact-form-submissions"
    - Effect: "Allow"
      Action:
        - "ses:SendEmail"
      Resource: "*"

functions:
  submitForm:
    handler: handler.submitForm
    events:
      - http:
          path: submit
          method: post
          cors: true

resources:
  Resources:
    ContactFormTable:
      Type: AWS::DynamoDB::Table
      Properties:
        TableName: contact-form-submissions
        AttributeDefinitions:
          - AttributeName: id
            AttributeType: S
        KeySchema:
          - AttributeName: id
            KeyType: HASH
        ProvisionedThroughput:
          ReadCapacityUnits: 5
          WriteCapacityUnits: 5

Mari kita pecah apa yang dilakukan setiap bagian:

  • `service`: Nama layanan Anda.
  • `provider`: Konfigurasi penyedia cloud Anda. Dalam hal ini, kami menggunakan AWS dengan runtime Node.js 18.x dan wilayah us-east-1.
  • `iamRoleStatements`: Ini mendefinisikan izin IAM yang diperlukan fungsi Lambda Anda untuk mengakses sumber daya AWS lainnya. Dalam hal ini, kami memberikan izin untuk memasukkan item ke dalam tabel DynamoDB dan mengirim email menggunakan SES. Pastikan untuk mengganti `ACCOUNT_ID` dengan ID akun AWS Anda.
  • `functions`: Ini mendefinisikan fungsi Lambda Anda. Dalam hal ini, kami memiliki satu fungsi bernama `submitForm` yang menangani pengiriman formulir.
  • `handler`: Ini menentukan file dan fungsi yang akan dieksekusi ketika fungsi Lambda dipanggil. Dalam hal ini, kami menggunakan file `handler.js` dan fungsi `submitForm`.
  • `events`: Ini mendefinisikan pemicu yang memicu fungsi Lambda. Dalam hal ini, kami menggunakan pemicu HTTP yang dipicu saat permintaan POST dibuat ke titik akhir `/submit`. Kami juga mengaktifkan CORS (Cross-Origin Resource Sharing) untuk memungkinkan permintaan dari domain yang berbeda.
  • `resources`: Ini mendefinisikan sumber daya AWS yang akan dibuat oleh Serverless Framework. Dalam hal ini, kami membuat tabel DynamoDB bernama `contact-form-submissions` dengan atribut `id` sebagai kunci utama.

Langkah 5: Membuat Fungsi Lambda

Selanjutnya, Anda perlu membuat fungsi Lambda yang akan menangani pengiriman formulir. Buat file bernama `handler.js` dalam direktori proyek Anda dan tambahkan kode berikut:


const AWS = require('aws-sdk');
const dynamoDb = new AWS.DynamoDB.DocumentClient();
const ses = new AWS.SES();
const { v4: uuidv4 } = require('uuid');

module.exports.submitForm = async (event) => {
  try {
    const body = JSON.parse(event.body);
    const { name, email, message } = body;

    if (!name || !email || !message) {
      return {
        statusCode: 400,
        body: JSON.stringify({ message: 'Semua bidang wajib diisi' }),
      };
    }

    const id = uuidv4();
    const params = {
      TableName: 'contact-form-submissions',
      Item: {
        id: id,
        name: name,
        email: email,
        message: message,
        createdAt: new Date().toISOString(),
      },
    };

    await dynamoDb.put(params).promise();

    const emailParams = {
      Destination: {
        ToAddresses: ['YOUR_EMAIL@EXAMPLE.COM'], // Ganti dengan email Anda
      },
      Message: {
        Body: {
          Text: {
            Data: `Nama: ${name}\nEmail: ${email}\nPesan: ${message}`,
          },
        },
        Subject: {
          Data: 'Pengiriman Formulir Kontak Baru',
        },
      },
      Source: 'YOUR_EMAIL@EXAMPLE.COM', // Ganti dengan email terverifikasi SES Anda
    };

    await ses.sendEmail(emailParams).promise();

    return {
      statusCode: 200,
      body: JSON.stringify({ message: 'Pesan Anda telah berhasil dikirim!' }),
    };
  } catch (error) {
    console.error('Error:', error);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Terjadi kesalahan saat mengirimkan pesan Anda.' }),
    };
  }
};

Mari kita bahas kode ini:

  • Pertama, kita memerlukan modul yang diperlukan: `aws-sdk`, `uuid`, dan modul DynamoDB dan SES dari AWS SDK.
  • Fungsi `submitForm` adalah fungsi handler yang dieksekusi ketika fungsi Lambda dipicu.
  • Fungsi ini mengurai isi permintaan, yang diasumsikan sebagai JSON, dan mengekstrak bidang `name`, `email`, dan `message`.
  • Fungsi ini memvalidasi bahwa semua bidang yang diperlukan ada. Jika tidak, fungsi tersebut mengembalikan respons kesalahan 400.
  • Fungsi ini menghasilkan ID unik menggunakan `uuidv4`.
  • Fungsi ini membuat parameter untuk memasukkan item ke dalam tabel DynamoDB.
  • Fungsi ini menggunakan metode `put` dari objek `dynamoDb` untuk memasukkan item ke dalam tabel DynamoDB.
  • Fungsi ini membuat parameter untuk mengirim email menggunakan SES. Pastikan untuk mengganti `YOUR_EMAIL@EXAMPLE.COM` dengan alamat email Anda yang sebenarnya (baik untuk penerima maupun pengirim). Alamat email pengirim harus diverifikasi dengan SES sebelum Anda dapat mengirim email.
  • Fungsi ini menggunakan metode `sendEmail` dari objek `ses` untuk mengirim email.
  • Jika semuanya berhasil, fungsi ini mengembalikan respons sukses 200.
  • Jika ada kesalahan, fungsi ini mencatat kesalahan ke konsol dan mengembalikan respons kesalahan 500.

Langkah 6: Membuat Halaman Depan

Sekarang, Anda perlu membuat halaman depan. Anda dapat menggunakan kerangka kerja frontend apa pun yang Anda suka, seperti React, Angular, atau Vue.js. Untuk contoh ini, saya akan menggunakan React.

Buat direktori baru bernama `frontend` dalam direktori proyek Anda dan inisialisasi proyek React baru:

cd frontend
npx create-react-app .

Setelah proyek React dibuat, Anda dapat mulai membangun halaman depan Anda. Berikut adalah contoh halaman depan sederhana:

Pertama, instal axios untuk melakukan permintaan HTTP :

npm install axios

Kemudian, ganti isi file `src/App.js` dengan kode berikut:


import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('Mengirim...');
    try {
      const response = await axios.post('YOUR_API_ENDPOINT/submit', { // Ganti dengan endpoint API Anda
        name,
        email,
        message,
      });

      if (response.status === 200) {
        setStatus('Pesan Anda telah berhasil dikirim!');
        setName('');
        setEmail('');
        setMessage('');
      } else {
        setStatus('Terjadi kesalahan saat mengirimkan pesan Anda.');
      }
    } catch (error) {
      console.error('Error:', error);
      setStatus('Terjadi kesalahan saat mengirimkan pesan Anda.');
    }
  };

  return (
    

      
Hubungi Kami

      

        

          
           setName(e.target.value)}
            required
          />
        

        

          
           setEmail(e.target.value)}
            required
          />