Membuat Aplikasi Web PHP Serverless di AWS dengan Bref HTTP API dan Serverless Framework

Published in

Serverless Indonesia

6 min readApr 30, 2020

Jalan berkabut di Kampung Cihalarang, Desa Mekar Saluyu, Kecamatan Cimenyan, Kabupaten Bandung, Jawa Barat, Indonesia

Pendahuluan

Di artikel sebelumnya, ”Memulai PHP Serverless di AWS dengan Bref dan Serverless Framework”, kita sudah melihat bagaimana sebuah Lambda Function dapat ditulis dengan menggunakan bahasa pemrograman PHP dengan bantuan Bref dan Serverless Framework.

Di artikel tersebut, kita hanya membuat sebuah Lambda Function yang tidak menerima event (input) dari service AWS lainnya. Namun sekarang kita akan mencoba template kedua yang dimiliki oleh Bref, yaitu HTTP API template.

Dengan template tersebut, kita dapat membangun sebuah web service dengan bantuan API Gateway yang akan menerima event dari client berupa HTTP Request. Kemudian meneruskannya kepada Lambda Function yang diintegrasikan ke API Gateway tersebut. Tentu saja karena menggunakan Bref, kita akan tetap menggunakan bahasa pemrograman PHP.

Oleh karena itu, mari kita maju ke bagian selanjutnya.

A. Persiapan

Di artikel ini ada beberapa tools yang harus disiapkan, diantaranya:

AWS Secret Key dan Access Key
AWS CLI
NPM
Serverless Framework
Composer
Bref

Untuk meng-install tools diatas, Anda dapat mengunjungi artikel ini Memulai PHP Serverless di AWS dengan Bref dan Serverless Framework. Anda dapat melihat beberapa langkah — langkah penggunaan tools diatas di artikel tersebut.

Sekarang mari kita mulai membuat proyek serverless HTTP API dengan Bref.

B. Membuat Proyek Aplikasi Web PHP Serverless dengan Bref HTTP API

Untuk memulainya, pastikan Anda sudah memasang semua tools yang sudah disebutkan di bagian sebelumnya. Kemudian bukalah console Anda untuk membuat projek baru berupa HTTP API:

vendor/bin/bref init

Kemudian nanti akan muncul tiga pilihan untuk membuat projek PHP Serverless dengan Bref. Pilihlah opsi kedua yang akan membuatkan projek HTTP API.

Setelah berhasil maka akan terbuat dua buah file yaitu index.php dan serverless.yml. Berikut adalah contoh source code dari file index.php yang telah diubah:

<?php// This is a PHP file example.
// Replace it with your application.// Below is a welcome page written in HTML.?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Welcome!</title>
    <link href="https://fonts.googleapis.com/css?family=Dosis:300&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex h-screen">
    <div class="rounded-full mx-auto self-center relative" style="height: 400px; width: 400px; background: linear-gradient(123.19deg, #266488 3.98%, #258ECB 94.36%)">
        <h1 class="font-light absolute w-full text-center text-blue-200" style="font-family: Dosis; font-size: 45px; top: 35%">Hello from Serverless Indonesia.</h1>
        <div class="w-full relative absolute" style="top: 60%; height: 50%">
            <div class="absolute inset-x-0 bg-white" style="bottom: 0; height: 55%"></div>
            <svg viewBox="0 0 1280 311" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1214 177L1110.5 215.5L943.295 108.5L807.5 168.5L666 66.5L581 116L517 49.5L288.5 184L163.5 148L-34.5 264.5V311H1317V258.5L1214 177Z" fill="white"/><path d="M1214 177L1110.5 215.5L943.295 108.5L807.5 168.5L666 66.5L581 116L517 49.5L288.5 184L163.5 148L-34.5 264.5L163.5 161L275 194L230.5 281.5L311 189L517 61L628 215.5L600 132.5L666 77L943.295 295L833 184L943.295 116L1172 275L1121 227L1214 189L1298 248L1317 258.5L1214 177Z" fill="#DCEFFA"/></g><defs><clipPath id="clip0"><rect width="1280" height="311" fill="white"/></clipPath></defs></svg>
        </div>
    </div>
</body>
</html>

Sedangkan berikut ini adalah isi dari file serverless.yml:

service: mywebprovider:
    name: aws
    region: us-east-1
    runtime: providedplugins:
    - ./vendor/bref/breffunctions:
    api:
        handler: index.php
        description: ''
        timeout: 28 # in seconds (API Gateway has a timeout of 29 seconds)
        layers:
            - ${bref:layer.php-73-fpm}
        events:
            -   http: 'ANY /'
            -   http: 'ANY /{proxy+}'# Exclude files from deployment
package:
    exclude:
        - 'node_modules/**'
        - 'tests/**'

Seperti pada file diatas, nama dari service kita kali ini adalah myweb. Sedangkan functions yang akan dibuat berupa HTTP API. Hal tersebut ditandai dengan api saat mendefinisikan Lambda Function yang kita buat.

Berbeda dengan artikel Memulai PHP Serverless di AWS dengan Bref dan Serverless Framework, dimana dibawah functions terdapat definisi function yang menandakan Lambda Function tersebut hanya akan di deploy sebagai Lambda Function tanpa menerima event dari API Gateway.

C. Deployment

Untuk deployment-nya sendiri cukup mudah untuk dilakukan, kita akan menggunakan perintah serverless untuk melakukan deployment. Berikut perintahnya:

$ serverless deploy

Bila berhasil akan muncul output seperti pada gambar berikut ini:

Contoh output di console ketika deployment aplikasi web dengan Bref HTTP API

Kemudian buka AWS Console Anda dan lihatlah halaman Lambda. Disana Anda akan melihat sebuah function yang bernama myweb-dev-api sesuai dengan nama service yang didefinisikan di dalam file serverless.yml. Lebih jelasnya, Anda dapat melihat function yang didefinisikan di dalam serverless.yml di gambar berikut ini:

myweb-dev-api sebagai HTTP API Function sudah berhasil dideploy di AWS Lambda

Kemudian, bila Anda klik function myweb-dev-api dan melihat halaman detail dari function tersebut, maka Anda akan dapat melihat bahwa Lambda Function yang sudah dibuat terhubung dengan service AWS lain yaitu API Gateway.

Bila Anda melihat Lambda Code Editor pun, file index.php sudah ditampilkan dan berisi kode yang sesuai saat kita melihatnya di lokal kita.

Kode index.php yang ditampilkan di Lambda Code Editor

Lalu kita pindah dulu ke halaman API Gateway. Disana Anda dapat melihat ada sebuah API baru yang bernama dev-myweb . Itulah API Gateway yang sudah dibuatkan oleh Bref dan Serverless Framework. API dev-myweb akan menerima event berupa HTTP Request yang akan diteruskan ke Lambda Function myweb-dev-api .

API Gateway untuk Bref HTTP API berhasil dibuat

Bila kita buka dev-myweb , Anda dapat melihat halaman detail dari API tersebut berupa konfigurasi dan menu — menu lainnya yang ada di halaman detail API Gateway. Saat ini HTTP Request yang digunakan adalah ANY agar myweb-dev-api dapat menerima segala bentuk HTTP Request (GET, POST, PUT, DELETE, OPTION, etc).

Root endpoint bersifat ANY yang dapat menerima request dari method apapun dari API Gateway yang dibuat.

Anda dapat melihat — lihat halaman API Gateway untuk melihat konfigurasi lainnya seperti routes dan stages.

D. Mencoba hasil deployment

Untuk mencobanya cukup mudah, ambil endpoints yang sudah dibuatkan oleh Serverless Framework di console lokal kita. Kemudian buka saja di web browser. Maka akan muncul tampilan seperti berikut ini:

Begitu API Gateway menerima HTTP Request, data dari event tersebut akan diteruskan ke Lambda Function. Dan secara otomatis Cloudwatch akan membuat log group baru untuk myweb-dev-api .

Detail log untuk setiap HTTP Request, dapat dilihat ketika Anda mengklik log group untuk myweb-dev-api seperti pada gambar berikut ini:

Kesimpulan

Dengan menggunakan Bref HTTP API, kita dapat mendeploy aplikasi web PHP di AWS Lambda. Selain itu secara ringkas sudah dibuatkan pula API Gateway yang terhubung ke Lambda Function dari aplikasi web PHP yang kita kembangkan. HTTP Method yang dapat diterima dapat dibuat spesifik dengan mendefinisikannya di dalam serverless.yml.

Terima kasih kepada Fajri Abdillah yang sudah meminjamkan akun AWS-nya untuk pembuatan artikel ini.