Cara mengatur unggahan gambar sederhana dengan Node dan AWS S3

Panduan langkah demi langkah yang menjelaskan cara mengunggah gambar atau file apa pun ke layanan Amazon S3.

Ini adalah bagian pertama dari tutorial di mana kita akan menangani bagian kode server (Node.js).

Saya menyiapkan tutorial video di YouTube juga. Anda dapat menemukan tautan di sumber daya di bagian bawah artikel ini.

1. Apa yang perlu kita instal & deskripsi singkat.

multer: middleware untuk menangani file data. Terutama digunakan untuk mengupload file. Info lebih lanjut: Npm Link

multer-s3: ekstensi multer untuk mengunggah file dengan mudah ke layanan Amazon S3. Info lebih lanjut: Npm Link

aws-sdk: paket yang diperlukan untuk bekerja dengan AWS (Amazon Web Services). Dalam kasus kami layanan S3. Info lebih lanjut: Npm Link

Pergi ke proyek Anda dan mari instal paket:

npm install —-save multer multer-s3 aws-sdk

2. Mendaftar ke AWS

Pertama, mari buat akun di //aws.amazon.com. Amazon menawarkan tingkat gratis luar biasa yang dapat Anda gunakan untuk tahun pertama. Setelah login, cari layanan S3.

Sederhananya, S3 adalah layanan cloud untuk menyimpan file.

Kita perlu membuat Bucket . Anda dapat membayangkan keranjang sebagai folder untuk file Anda. Pilih nama keranjang dan Wilayah . Karena ini adalah pengaturan sederhana, kami tidak tertarik dengan konfigurasi lain. (Setup default ok - jika ada sesuatu yang tidak jelas, tanyakan di komentar). Klik " berikutnya " hingga Anda berada di Review dan buat keranjang Anda.

Arahkan ke keranjang yang Anda buat dan periksa bilah URL Anda . Ingat nama bucket Anda (untuk saya "medium-test") dan wilayah (untuk saya "us-east").

Sekarang, kita perlu mendapatkan kredensial aman kita . Arahkan melalui nama akun Anda ke " kredensial keamanan saya ". Kemudian " Access Keys " dan Buat Access Key Baru .

Jangan pernah membagikan kunci Anda dengan siapa pun! Simpan sementara kunci ini ke beberapa file atau unduh File Kunci, karena kita memerlukan kunci untuk mengatur unggahan file.

Baiklah. Penyiapan Amazon Selesai!

3. Buka Editor Coding Anda

Saya tidak akan menjelaskan dasar-dasar Node atau Express di sini. Tutorial ini hanya difokuskan pada unggahan file. Jika Anda tertarik dengan seluruh implementasi proyek, periksa repositori GitHub saya atau tonton tutorial lengkapnya. (Anda dapat menemukan tautan di akhir posting blog ini).

  1. Buat layanan unggah file Anda dengan penerapan berikut (bagian pertama):

Catatan penting: Jangan pernah mengekspos kredensial rahasia Anda langsung ke dalam file! Jangan pernah membagikan kredensial rahasia Anda! Pertimbangkan untuk menyiapkan variabel lingkungan di lingkungan lokal Anda atau dalam kasus proyek yang diterapkan, variabel di penyedia cloud Anda. Solusi terbaik adalah menggunakan aws-profiles : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

Pertama, kami mengimpor semua paket yang kami instal. Bagian kedua adalah mengkonfigurasi AWS kami . Kami perlu memberikan kunci rahasia dan wilayah kami dari bilah URL yang saya tunjukkan sebelumnya.

Setelah konfigurasi AWS, kami dapat membuat instans Amazon S3 kami. Kami masih belum selesai. Sekarang, mari kita lihat bagian kedua dari implementasi ini.

Sekarang, kami dapat menyiapkan solusi untuk unggahan multer. Kita perlu menyediakan fungsi ke objek multer dengan properti berikut.

  1. s3 : contoh Amazon S3 yang kami buat sebelumnya.
  2. bucket : nama bucket kami (dalam kasus saya: "medium-test")
  3. acl : kontrol akses untuk file ('baca publik' berarti siapa pun dapat melihat file), Anda dapat memeriksa semua jenis yang tersedia di sini: tautan amazon
  4. metada : fungsi callback untuk mengatur metadata dari file yang diupload. Di sini, saya mengatur metadata tambahan untuk fieldName . Anda dapat melihat data ini pada gambar di bawah.

5. key: fungsi callback untuk mengatur properti key (di mana kunci file Anda akan disimpan dalam bucket Anda). Dalam kasus kami, kami membuat stempel waktu dari waktu saat ini dan menyimpan file ini dengan nama ini. Dengan cara ini nama file kami akan selalu unik, tetapi Anda dapat memilih nama apa pun yang Anda inginkan.

Setelah semua penyiapan, kami mengekspor objek unggahan untuk menggunakannya di file lain.

4. Atur rute untuk mengunggah gambar

Kami hampir selesai, tetapi pengguna aplikasi kami masih belum memiliki akses ke unggahan gambar. Kami perlu mengungkapkan fungsi ini kepada mereka. Mari buat titik akhir untuk menyimpan file.

Kami mengekspor objek unggahan yang telah kami buat sebelumnya dan membuat yang baru darinya. Yang baru lebih spesifik dengan konfigurasi tambahan untuk satu unggahan gambar . Kami memberikan nilai ' gambar ' untuk itu. Nilai ini sangat penting, karena kami akan mengirimkan file kami ke server dengan kunci ini.

Bagian kedua adalah rute itu sendiri. POST titik akhir ke ' / image-upload '. Di dalamnya kami menyebutnya singleUpload . Jangan lupa pass inside req dan res, karena multer akan mendapatkan file yang kita kirim ke server dari req object.

Kami sedang memeriksa kesalahan. Jika tidak ada, kami mengirimkan kembali JSON dengan nilai lokasi file kami, yang hanya berupa URL ke file di Amazon .

Aaaa dan itu dia! Kami dapat mengunggah file ke Amazon S3 Sekarang. Cukup sederhana, bagaimana menurut Anda?

5. Mari kita uji di Postman.

Untuk melihat hasil kerja keras kita, kita perlu mengirimkan request ke server dengan gambar yang ingin kita upload. Di bagian ini kita akan mengujinya melalui Postman. Di bagian selanjutnya dari tutorial ini, kita akan membuat implementasi dalam aplikasi Angular.

Jika Anda tidak memiliki Postman, Anda dapat mengunduhnya sebagai ekstensi Google Chrome. Cukup cari ' ekstensi google chrome tukang pos '. Postman adalah aplikasi untuk menginisialisasi, mengirim, dan menguji permintaan ke server dalam masalah sederhana.

  1. Kirim permintaan posting ke titik akhir yang kita buat sebelumnya. Dalam kasus saya, saya tentukan di jalur node / image-upload .
  2. Pilih Tubuh dari form-data .
  3. Memberikan kunci dari suatu gambar. Anda akan melihat bahwa ini adalah kunci yang kami siapkan sebelumnya di kode kami. Periksa file dan pilih beberapa file dari komputer Anda.
  4. Kirimkan permintaan .

Anda harus mendapatkan kembali JSON dengan URL file yang Anda unggah.

Voilà! Itu dia. Ini adalah unggahan file sederhana untuk Node. Di artikel berikutnya, saya akan melanjutkan implementasi frontend untuk Angular.

Jika Anda menyukai tutorial ini, jangan ragu untuk memeriksa kursus lengkap saya di Udemy - Panduan Sudut, Bereaksi & Node Lengkap | Aplikasi gaya Airbnb.

Kuliah Video: Video Youtube

Proyek Selesai: Repositori github saya

Bersulang,

Filip