Skip to main content

Proxy Static Files

Notes:

Sebagai permulaan, perlu diingat di dokumentasi ini saya kebetulan memakai Laravel. Jadi mungkin perlu ada penyesuaian pada project lainnya (apabila memakai selain Laravel).

Step 1 (Konfigurasi)

Yang pertama harus dilakukan adalah memperbarui file config/service.php. Di sini kita mendefinisikan URL dari proxy untuk mengunggah dan juga memuat file, yang dapat diatur pada file .env.

'proxy_cdn' => [
'url_upload' => env('PROXY_URL_UPLOAD', null), // URL proxy untuk mengunggah file
'url_load' => env('PROXY_URL_LOAD', null) // URL proxy untuk memuat file
]

Setelah menambahkan kode di atas pada file config/service.php, selanjutnya Anda perlu menambahkan kode berikut pada file .env.

PROXY_URL_UPLOAD=https://54.254.240.41
PROXY_URL_LOAD=https://proxy.impstudio.id

Notes:

Pada saat dokumentasi ini dibuat, URL pada env di atas adalah seperti itu. Jika ada perubahan pada waktu mendatang, maka perlu disesuaikan.

Step 2 (Setting Helpers)

Di sini karena saya menggunakan helpers untuk mengunggah dan memuat file, maka yang akan saya update adalah helpers yang saya gunakan untuk mengunggah dan juga memuat file tersebut. Saya akan mengupdate pada file app/Http/helpers.php.

Yang pertama pada fungsi upload:

function upload_file($directory, $file, $filename = null)
{
if (is_null($filename) || strlen(pathinfo($filename, PATHINFO_EXTENSION)) < 3) {
$extensi = $file->getClientOriginalExtension();
$filename = "{$directory}_" . date('Ymdhis') . randomKey() . ".{$extensi}";
}

$mime = $file->getMimeType();
$dir = "public/uploads/$directory/";

// Setting credentials digitalocean
$credentials = new Credentials(config('do.credentials.key'), config('do.credentials.secret'));

// Setting S3 client for upload file
$s3 = new S3Client([
'version' => 'latest',
'region' => config('do.region'),
'credentials' => $credentials,
'endpoint' => config('services.proxy_cdn.url_upload') !== null
? config('services.proxy_cdn.url_upload') . "/upload/" . config('do.endpoint')
: config('do.endpoint'),
'http' => [
'verify' => config('services.proxy_cdn.url_upload') === null // Nonaktifkan verifikasi SSL jika tidak ada proxy
]
]);

// Unggah file
$s3->putObject([
'Bucket' => config('do.bucket'),
'Key' => 'lpdp-500doktor/' . $dir . $filename,
'SourceFile' => $file,
'ContentType' => $mime,
]);

return $dir . $filename; // Kembalikan jalur file
}

Notes:

  • Untuk penamaan pada key bisa disesuaikan lagi dengan masing-masing project yang dipakai. Tidak perlu diikuti 100% persis seperti yang ada pada contoh di atas.
  • Yang bisa diperhatikan adalah pada bagian setting S3Client karena di situ lah setting yang paling krusial.

Selanjutnya pada fungsi load:

function load_file($filepath)
{
if (filter_var($filepath, FILTER_VALIDATE_URL)) {
return $filepath;
}

// Setting credentials digitalocean
$credentials = new Credentials(config('do.credentials.key'), config('do.credentials.secret'));

// Setting S3 client for upload file
$s3 = new S3Client([
'version' => 'latest',
'region' => config('do.region'),
'credentials' => $credentials,
'endpoint' => config('do.endpoint'),
]);

// Set for the request that valid for 10 hours
$cmd_file = $s3->getCommand('GetObject', [
'Bucket' => config('do.bucket'),
'Key' => 'lpdp-500doktor/' . $filepath
]);

$request = $s3->createPresignedRequest($cmd_file, '+600 minutes');

// Return the url with cdn if the url is configured
return (string) config('services.proxy_cdn.url_load') !== null
? config('services.proxy_cdn.url_load') . "/serve/" . $request->getUri()
: $request->getUri();
}

Notes:

  • Semua konfigurasi di atas bisa sesuai pada masing-masing project (tidak perlu diikuti 100%). Yang perlu diperhatikan adalah pada return dari function tersebut di mana return itulah yang paling krusial.

Dan selanjutnya adalah pada fungsi delete (jika kamu memakainya):

function delete_file_do($filepath)
{
// Hanya lanjutkan jika tidak ada proxy CDN yang dikonfigurasi
if (config('services.proxy_cdn.url_upload') === null) {
$credentials = new Credentials(config('do.credentials.key'), config('do.credentials.secret'));

$s3 = new S3Client([
'version' => 'latest',
'region' => config('do.region'),
'credentials' => $credentials,
'endpoint' => config('do.endpoint'),
]);

// Hapus file
$s3->deleteObject([
'Bucket' => config('do.bucket'),
'Key' => 'lpdp-500doktor/' . $filepath
]);
}
}

Notes:

  • Fungsi delete ini hanya bekerja jika URL proxy upload tidak disetting atau null. Hal ini dilakukan karena proxy belum bisa mengakomodir penghapusan file.
  • Selain itu juga pada fungsi upload yang digunakan adalah PUT, jadi setiap file harusnya akan terganti jika kita mengupload file dengan nama yang sama.

FAQ

Mengapa URL proxy-nya dipisah menjadi dua dan tidak dijadikan satu?
Karena pada package S3Client oleh AWS (khususnya pada project Laravel), jika kita menggunakan URL https://proxy.impstudio.id maka dia akan menambahkan prefix bucket di depan URL-nya tersebut di mana akan menjadi https://bucket_name.proxy.impstudio.id/upload/blabla. URL tersebut tidak valid. Maka yang digunakan adalah IP, karena jika kita menggunakan IP maka URL endpoint untuk upload sudah sesuai. (Bisa dilihat pada https://github.com/glendmaatita/static-cdn untuk dokumentasi lebih lanjut).
Apakah setting proxy ini hanya bisa digunakan di Laravel?
Tidak, setting proxy ini bisa digunakan di berbagai macam project. Hanya perlu penyesuaian untuk dapat menggunakan proxy-nya.
Mengapa perlu setting proxy ini jika kita menggunakan DigitalOcean Spaces?
Hal ini menjadi penting karena Komdigi memblokir semua akses ke DigitalOcean Spaces URL yang membuat kita tidak dapat melakukan upload ataupun load file ke DigitalOcean Spaces. Namun, hal ini berlaku jika region DigitalOcean Spaces Anda berada pada luar region Jakarta.