AWS - Fasting your S3 file with cloudfront

Tahukah anda jika konten terberat pada sebuah website kebanyakan adalah gambar? Ada banyak cara untuk mengoptimize kecepatan rendering data pada sebuah website salah satu cara yang harus dilakukan yaitu dengan mempercepat rendering file gambar.

Dalam hal ini AWS sudah menyediakan sebuah layanan yang bisa membantu menangani masalah tersebut yaitu dengan menggunakan cloudfront. Apa itu cloudfront?

Cloudfront merupakan sebuah layanan web yang digunakan untuk mempercepat distribusi konten web baik itu berupa konten statis maupun dinamis seperti file html, css, js, dan image kepada user client. Cloudfront mengirimkan konten melalui jaringan pusat yang disebut lokasi tepi (edge location) yang menyediakan layanan jeda waktu terendah sehingga konten dikirimkan dengan kinerja sebaik mungkin.

Berikut cara kerja dari cloudfront sendiri:

• Jika konten sudah berada di lokasi tepi dengan jeda waktu terendah, maka cloudfront segera mengirimkannya.
• Jika konten tidak berada di lokasi tepi tersebut, maka cloudfront mengambilnya dari tempat asal yang telah ditetapkan seperti bucket Amazon S3.

Pada dasarnya user client dapat dengan mudah menavigasi ke sebuah url dan melihat gambar dari url tersebut. Tetapi mereka mungkin tidak tahu bahwa request mereka dialihkan dari satu jaringan ke jaringan lain melalui kumpulan jaringan interkoneksi kompleks sampai akhirnya gambar itu ditemukan.

Cloudfront mempercepat distribusi konten dengan cara merutekan setiap request user client melalui jaringan backbone AWS ke lokasi tepi yang dapat melayani konten anda dengan sangat baik. Menggunakan jaringan AWS secara dramatis mengurangi jumlah jaringan yang harus dilalui oleh pengguna anda dan meningkatkan kinerja. User client mendapatkan jeda waktu lebih rendah untuk memuat byte pertama file dan kecepatan transfer data yang lebih tinggi.

Oke sekarang sudah tau kan betapa pentingnya layanan cloudfront ini untuk memaksimalkan kinerja distribusi file S3? Sekarang kita mulai saja cara setup cloudfront untuk storage S3 kita.

Jika anda belum punya bucket S3 pada AWS bisa baca disini cara setupnya.

Pertama, pada halaman home AWS kita bisa cari pada kolom pencarian ketikan saja cloudfront dan klik untuk membukanya,

Selanjutnya, akan muncul seperti gambar dibawah,

Klik tombol "Create Distribution", dan akan muncul tampilan seperti gambar dibawah,

Klik tombol "Get Started",  dan akan muncul tampilan seperti gambar dibawah,

Isi kolom pertama dengan Amazon S3 Buckets anda, kemudian biarkan field-field yang lain secara default (jika tidak mau pusing),

Klik tombol "Create Distribution" untuk segera membuat cloudfront url nya, sehingga akan muncul seperti gambar dibawah,

Dari gambar diatas kita bisa lihat pada kolom "Domain" itu merupakan url cloudfront jadi jika status cloudfront sudah "Deployed" seperti diatas itu artinya url cloudfront sudah bisa digunakan, caranya mudah yaitu tinggal ganti url S3 lama anda dengan url cloudfront misal:
url s3               ->  https://s3.us-east-2.amazonaws.com/codedoct-bucket1/image-screen.png

ganti menjadi seperti ini:
url cloudfront  ->  http://d2fm70f5trvewh.cloudfront.net/image-screen.png

Sangat mudah bukan?

===DONE!===
  

Read More »

Project - Starter kit laravel

Pada artikel kali ini codedoct akan memberikan dokumentasi dari project laravel yang baru saja codedoct buat yaitu sebuah project starter kit bagi anda yang ingin membuat project backend (API) laravel dengan mudah.

Clone project disini, instalasi bisa baca langsung pada readme. Bagi yg belum familiar dengan bagaimana cara clone project bisa baca disini.

Oke sekarang codedoct akan jelaskan apa saja featurenya dan cara menggunakannya.

1. Auth with RBAC (Role Base Access Controll)

Project laravel starter kit tersebut sudah support RBAC yaitu access api route dengan role sebagai dasar hak akses, misal api route get users hanya bisa di akses oleh superadmin,

Route::get('', 'UserController@getUsers')->middleware('auth.privilage:qwe123');

Jika ingin menambah multiple akses maka code akan menjadi seperti ini,

Route::get('', 'UserController@getUsers')->middleware('auth.privilage:qwe123|zxc123');

pada project sudah terdapat 2 role superadmin dengan hash_id "qwe123" dan user dengan hash_id "zxc123", anda bisa menambah sendiri user role lainnya pada table role. Sehingga anda jika kita mengakses api yang dengan role yang tidak di setujui maka akan keluar error handling,

2. Error handling

Project ini sudah mendukung berbagai error handling yang dapat di lihat pada /app/Exceptions/Handler.php

3. Doctrine migration

Untuk memudahkan dalam manajemen table maka digunakan doctrine yang di padukan dengan eloquent laravel.

4. Support payment with midtrans

Project ini sudah didukung untuk pembayaran payment gateway dengan midtrans, dimana dari client apps (ios atau android) dapat mengakses api "charge" untuk generate token yang kemudian digunakan untuk mengakses midtrans payment.

5. Support notification with Firebase

Project ini sudah mendukung push notification menggunakan firebase ke semua client dengan cara daftarkan dulu device token setiap client menggunakan api,

kemudian anda bisa push notification ke semua user atau ke user tertentu yang sudah didaftarkan device tokennya,

6. Storage file with Server or S3(AWS)

Project ini sudah mendukung penyimpanan server  atau s3 yang dapat anda atur pada file .env dengan syntax yang sangat sederhana karena sudah di handle pada ImageServices.php

if ($request->file('image')) {
  // upload image
  $uploadImage = $imageService->uploadImage($request->file('image'), 'profile', $user, 800);

  $user->image = $uploadImage;
}

7. Indonesian geograph

Sudah terdapat 3 api yang dapat memudahkan anda mendapatkan data provinsi, kota, dan kecamatan.

8. Can access API with login or public

Anda dapat mengatur API mana saja yang bisa di akses secara public, wajib, login atau keduanya. dimana anda hanya tinggal menambahkan apinya pada routes general yang ada pada file /routes/General/general.php. Akses public ini sudah di handle pada file /app/Http/Middleware/AuthenticateUserSession.php

Semua api pada postmant bisa di download disini dan tinggal di import saja pada postman anda.

===DONE!===

Read More »