Cara Membuat Perangkat Lunak Untuk Upload Gambar – Di banyak startup yang pernah saya tangani, pengunggahan gambar adalah bagian dari alur kerja aplikasi web mereka.

Cara Membuat Perangkat Lunak Untuk Upload Gambar

mypicpals – Dari avatar pengguna hingga gambar inventaris yang dapat diunggah, itu adalah fitur yang cukup umum untuk hadir di hampir setiap sistem.

Tidak mengherankan, banyak dari solusi startup tersebut untuk pengunggahan mereka mengalami masalah yang sama. Logika untuk menangani unggahan gambar adalah ad-hoc. Pemrosesan file terjadi pada saat yang sama dengan permintaan, menyebabkan antrian permintaan server aplikasi untuk dicadangkan.

Singkatnya, itu tidak begitu m u ch sistem sebagai sekelompok alur kerja yang berbeda dirakit (khas dari sebagian besar startups). Hasil? Banyak bug dalam penanganan gambar, crash misterius yang tidak bisa dilacak, dan timeout acak. Saya di sini untuk menunjukkan cara yang lebih baik.

Dilansir dari jgefroh.medium, Memahami masalah teknis Pengunggahan gambar bisa jadi rumit, dan kasus penggunaan berbeda-beda bergantung pada sistemnya. Ada banyak kekhawatiran dengan gambar secara umum yang tidak terpikirkan oleh kebanyakan orang saat mereka mendalami untuk membangunnya. Gambar dalam aplikasi web dapat dengan mudah menyentuh masalah teknis berikut:

  • Menampilkan gambar di ujung depan
  • Memberi otorisasi kepada pengguna untuk mengunduh gambar
  • Memberi otorisasi kepada pengguna untuk mengunggah gambar
  • Mengunggah gambar ke server Anda dengan cara yang skalabel
  • Memvalidasi data gambar
  • Memproses gambar, melakukan pemotongan, pengoptimalan, dan tugas lainnya
  • Membuat varian gambar, seperti spanduk dan thumbnail
  • Menyimpan gambar
  • Mengaitkan gambar ke rekaman apa pun yang Anda unggah (seperti avatar pengguna atau spanduk kampanye).

Meskipun tidak semua ini akan hadir, sistem yang solid akan dapat melenturkan dan beradaptasi untuk mendukung kasus penggunaan ini dengan perubahan minimal.

Baca juga : Buat Film Slideshow Menggunakan “Foto” Windows 10

Pengorbanan, Saat memikirkan solusi yang dapat mengatasi masalah ini, dengan cepat menjadi jelas bahwa solusi akhir akan lebih kompleks daripada menambahkan kolom ke model pengguna Anda dan titik akhir untuk mengunggah gambar, dan menyebutnya sehari. Akan sangat membantu untuk menyelami pengorbanan untuk dipertimbangkan dalam sebuah solusi.

Penskalaan, Unggahan gambar terkenal merusak server atau menyebabkan waktu tunggu. Jika pengguna mencoba mengunggah gambar 10 megabyte, itu banyak penggunaan sumber daya:

10 megabyte memori server Anda terikat
Penangan permintaan diikat selama seluruh jumlah waktu yang dibutuhkan untuk mengunggah 10 megabyte
Penggunaan CPU untuk menangani unggahan gambar

Jika Anda berurusan dengan 1 atau 10 pengguna yang mengunggah gambar, itu bukan masalah besar. Namun, jika sistem Anda benar-benar digunakan oleh pengguna, itu akan cepat lepas kendali.

Akibatnya, arsitektur harus difokuskan pada pengurangan jumlah waktu server Anda benar-benar menangani permintaan pengunggahan gambar menjadi hampir tidak ada, dan memindahkan unggahan aktual ke layanan lain (seperti S3 atau layanan internal yang didedikasikan untuk unggahan). Anda tidak ingin pengunggahan gambar menghabiskan semua kapasitas server web Anda.
Keamanan

Unggahan dan pemrosesan gambar adalah sumber lubang keamanan yang sangat besar. Titik akhir apa pun yang memungkinkan Anda mengikat sejumlah besar sumber daya rentan terhadap serangan penolakan layanan (disengaja atau tidak).

Pada catatan yang lebih mengkhawatirkan, pemrosesan gambar adalah aspek rekayasa yang kurang dipahami yang telah menyebabkan beberapa kelemahan keamanan yang tragis , memberikan pengguna acak kemampuan untuk menjalankan perintah sewenang-wenang sebagai pengguna tingkat root.

Arsitektur sistem kami harus menangani gambar dengan cara yang aman yang meningkatkan ketersediaan, tetapi juga memberikan integritas data pengguna.

Otorisasi

Di sisi keamanan, ada juga logika bisnis yang dikhususkan untuk sistem kami. Tidak semua gambar harus tersedia untuk umum. Mungkin ada situasi di mana pengguna tidak boleh mengunduh gambar yang diunggah oleh pengguna lain. Mungkin ada aturan seputar siapa yang dapat mengunggah gambar.

Sistem kami harus dapat menangani kasus otorisasi khusus domain ini dengan mudah.
Konsistensi

Saya telah menulis tentang nilai konsistensi di masa lalu. Kami tidak ingin cara berbeda untuk mengunggah gambar untuk setiap jenis gambar yang ingin kami unggah. Kasus penggunaan unggahan gambar seperti avatar pengguna dan spanduk kampanye semuanya harus mengalir melalui alur kerja unggahan gambar yang sama dan harus memerlukan sedikit atau tanpa perubahan kode untuk mendukung.
Varian

Saat gambar diunggah, mungkin ada beberapa tempat dan cara penggunaannya. Tempat-tempat seperti thumbnail, latar belakang, dan gambar profil mungkin menggunakan gambar yang sama dengan cara yang berbeda. Kami mungkin menyajikan gambar dengan resolusi lebih rendah kepada pengguna seluler untuk menghemat bandwidth.

Apa pun masalahnya, kami harus mendukung pembuatan dan penggunaan varian dalam sistem unggahan kami. Membuat varian dapat menghabiskan banyak daya pemrosesan, dan itu bukanlah sesuatu yang kami ingin server web utama kami lakukan. Arsitektur harus memindahkannya ke layanan asinkron yang terpisah.
Pertumbuhan

Semua subsistem harus dapat tumbuh secara independen dari sistem lainnya. Anda tidak pernah tahu kapan Anda akan melihat peningkatan permintaan dalam penggunaan. Dengan menjaga batasan yang ditentukan dengan baik di sistem Anda, Anda dapat dengan mudah mengubahnya menjadi layanan mikro atau penerapan terpisah yang berskala horizontal.

Arsitektur, Dengan mempertimbangkan kompromi ini, sekarang mari kita lihat arsitektur untuk mengunggah gambar yang memenuhi kriteria.

Komponen, Untuk apa masing-masing bagian dari arsitektur itu? Berbagai nuansa kecil dan poin keputusan dalam arsitektur memberikan keuntungan signifikan pada skalabilitas, keamanan, dan fleksibilitas. Tapi, apa sih nuansa itu? Apa yang didapat atau hilang dari setiap titik keputusan? Mengapa kami memilih untuk menggunakan URL bertanda tangan atau elemen lain? Mari selami detailnya.

API Unggahan Gambar, API unggahan gambar menangani siklus hidup permintaan unggahan gambar. Ini akan melakukan otentikasi, otorisasi, audit, pembatasan tarif, dan item lainnya, tetapi itu akan menyerahkan pengelolaan sebenarnya dari data file ke layanan lain. Itu tidak pernah menyentuh data file. Saya serahkan kepada pembaca sebagai latihan untuk menemukan cara membuatnya tenang.

Layanan Unggah Gambar, Layanan Unggahan Gambar merangkum logika pemanggilan titik akhir di API Unggahan Gambar dengan data yang benar dalam urutan yang benar, menyembunyikannya di balik satu antarmuka metode. Penggabungan temporal ini bukanlah sesuatu yang ingin Anda sebarkan ke seluruh sistem Anda, jadi memiliki satu sumber kebenaran untuk algoritme ini sangatlah penting.

URL yang ditandatangani

URL bertanda tangan adalah URL yang memiliki parameter otorisasi di dalamnya. Kami dapat menggunakan URL bertanda tangan untuk mengunggah dan mengunduh guna memberikan perlindungan dan memastikan bahwa hanya pengguna yang berwenang yang melakukan tindakan ini.

Menandatangani Upload URL
Dalam kasus sederhana, /images/get_upload_urlbisa mengembalikan URL unsigned: /uploads.

Namun, ini berarti bahwa siapa pun dapat memanggil /uploadsdan mengisi penyimpanan data kami dengan file acak atau menggunakannya sebagai server file pribadi mereka. Ini jelas tidak diinginkan. /images/get_upload_urlbisa kembali URL ditandatangani: /uploads?write_token=a99Xioajksf23.

Artinya, kami memiliki kesempatan untuk mengautentikasi pengguna, memberi otorisasi kepada mereka, batas nilai, atau mengaudit siapa yang membuat URL yang ditandatangani. Jika seseorang menyalahgunakan layanan pengunggahan kami, kami memiliki sarana untuk menghentikan pengguna tersebut.

URL Unduhan yang Ditandatangani
Jika kami tidak memiliki URL unduhan yang ditandatangani, siapa pun dapat mengunduh gambar tersebut jika mereka tahu URL-nya:/images/joseph-gefroh.png

Ini mungkin diinginkan dalam banyak kasus, tetapi dalam beberapa kasus, seperti file pribadi, ini mungkin sangat tidak diinginkan. Dalam kasus ini, kami tidak ingin URL tersedia untuk umum. Kita dapat membuka akses di belakang titik akhir kita sendiri. images/get_download_url, Yang mengembalikan token seperti sementara sebagai: /downloads?read_token=a99Xioajksf23. Sama seperti unggahan, ini memberi kami kesempatan untuk mengautentikasi, mengotorisasi, membatasi, dan mengaudit akses pengguna ke gambar.

Penyimpanan File Cloud, Kami menggunakan layanan penyimpanan file terpisah (seperti S3) untuk mengurangi beban pada server web kami.

Unggah titik akhir, Unggahan file bisa memakan waktu lama dan bisa menghabiskan banyak sumber daya. Dengan memindahkan operasi semacam itu ke layanan yang didedikasikan untuk ini, kami dapat memastikan sistem kami yang lain terus beroperasi dengan lancar.

Download endpoint, Kami juga tidak pernah menyajikan file langsung dari server web kami karena alasan yang sama seperti yang tercantum di atas – kami mengirimkannya dari penyimpanan file eksternal. Setiap permintaan ke server kami malah mengembalikan URL lain atau mengalihkan ke layanan yang sesuai.

Pekerjaan Pemrosesan Gambar, Pemrosesan gambar dapat menghabiskan banyak memori dan CPU – ini bukan sesuatu yang ingin Anda lakukan pada aplikasi atau server web Anda, yang sibuk menangani permintaan lain.

Kami mengubahnya menjadi panggilan asinkron yang dipindahkan ke layanan lain sehingga kami dapat menjaga agar server web utama kami tidak diblokir dan berfungsi.
Rekaman Metadata Gambar

Kami menyimpan metadata dari rekaman gambar di database kami karena kami harus melacaknya. Tidak ada gunanya mengunggah gambar tanpa cara untuk mengambil atau mengelolanya nanti. Apa gunanya mengunggah foto yang dimaksudkan untuk digunakan sebagai avatar pengguna jika kami tidak memiliki cara untuk mengaitkannya dengan catatan pengguna yang dimaksud?

Penting untuk dicatat bahwa kami tidak menyimpan gambar sebenarnya itu sendiri di database kami, kami hanya menyimpan metadata, yang kemudian kami gunakan nanti untuk membuat berbagai URL ke sana.

Mengapa kami tidak menyimpan URL gambar? Menyimpan URL gambar itu rapuh, dan tautannya rentan rusak jika URL berubah karena alasan apa pun. Menyimpan metadata yang diperlukan untuk membuat URL jauh lebih kuat – kita dapat dengan mudah mengubah hal-hal seperti nama domain, dan membangun URL yang sesuai tanpa mengalami waktu henti.

Algoritma, Mari kita periksa bagaimana kita akan menggunakan komponen di sistem kita untuk benar-benar mengunggah gambar:

Langkah 1: Klien meminta URL unggahan dari server (PERMINTAAN)
Langkah 2: Klien mengunggah data gambar ke URL unggahan (UPLOAD)
Langkah 3: Klien memberi tahu server bahwa unggahan telah selesai (KONFIRMASI)
Langkah 4: Server memproses gambar di latar belakang (PROSES)
Langkah 5: Klien memeriksa status pemrosesan gambar (PERIKSA)
Langkah 6: Server selesai memproses gambar, memberi tahu klien (SELESAI)

Langkah 1: Klien meminta URL unggahan dari server (PERMINTAAN)

Mengapa langkah pertama bukan mengunggah gambar? Ingat – kami tidak ingin data gambar menyentuh server kami. Ini terlalu banyak babi sumber daya dan kerentanan penolakan layanan.

Sebagai gantinya, kami meminta server kami untuk menggunakan URL yang harus kami unggah. URL ini dapat mengarah ke penyimpanan cloud pihak ketiga, seperti S3, atau sistem lain yang secara khusus dibuat untuk menangani beban unggahan gambar.

Baca juga : Jenis-jenis Sistem Operasi Komputer Terbaru

Selama langkah ini, server dapat menghasilkan URL acak yaitu:

waktu terbatas
diaudit
diotorisasi

URL unggahan ini adalah URL yang telah ditandatangani sebelumnya. Artinya, URL yang dikembalikan server memiliki parameter kueri yang menunjukkan semua otorisasi di dalamnya yang diperlukan untuk mengunggah ke layanan pihak ketiga. Setelah melakukan pemeriksaan otorisasi, server juga membuat catatan di database untuk melacak unggahan gambar individu ini, dengan data tentang:

  • nama file
  • jenis file
  • URL dari file tersebut
  • status (misalnya. requested, uploaded, processed)
  • asosiasi gambar (misalnya user, campaign)
  • jenis asosiasi (mis. banner, avatar)
  • menulis token (token yang dihasilkan harus disediakan untuk memodifikasi gambar)
  • token baca (token yang dihasilkan harus disediakan untuk membaca gambar)
    data audit lainnya

Server mengembalikan data ini ke klien.

Langkah 2: Klien mengunggah data gambar ke URL unggahan (UPLOAD) Ini adalah langkah yang cukup mudah.

Klien, sekarang dipersenjatai dengan URL Unggah dari server, cukup melakukan permintaan POST ke URL itu. Layanan itu kemudian menerima data itu dan menyimpannya.

Langkah 3: Klien memberi tahu server bahwa unggahan telah selesai (KONFIRMASI)

Klien membuat permintaan ke server dengan token yang dikembalikan server sebelumnya, memberi tahu server bahwa unggahan telah selesai.

Langkah 4: Server memproses gambar di latar belakang (PROSES) Server memverifikasi token, lalu memeriksa permintaan unggahan itu.

Ini memulai pekerjaan yang akan memproses gambar – memverifikasi integritas file, membuat varian, dan melakukan pengoptimalan tanpa memblokir permintaan ke server web.
Langkah 5: Klien memeriksa status pemrosesan gambar (PERIKSA)

Pemrosesan gambar membutuhkan waktu, dan Anda tidak ingin klien memblokir permintaan. Klien harus memeriksa kembali sesekali untuk melihat apakah pemrosesan telah selesai.
Langkah 6: Server selesai memproses gambar, memberi tahu klien (SELESAI)

Akhirnya, pemeriksaan akan berlalu dan server akan mengembalikan URL gambar. Sekarang, klien bebas menggunakan gambar tersebut.

Keamanan di sini disediakan oleh URL gambar. Jika gambar dilindungi, URL untuk mengakses gambar akan mengarah ke server kami, dan setiap permintaan oleh klien harus memberikan token baca, yang dapat digunakan server untuk melakukan otorisasi sesuai kebutuhan dan menghasilkan URL bertanda tangan sementara untuk itu gambar.

Jika gambar dimaksudkan untuk publik, URL gambar bisa menjadi referensi langsung ke gambar, melewati server kami sama sekali.

Share this: