de Filip Jerga

Cum se configurează încărcarea simplă a imaginilor cu Node și AWS S3

Un ghid pas cu pas care explică cum să încărcați o imagine sau orice fișier în serviciul Amazon S3.

Cum se configureaza incarcarea simpla a imaginilor cu Node si

Aceasta este prima parte a unui tutorial în care vom gestiona partea serverului (Node.js) din cod.

Am pregătit un tutorial video și pe YouTube. Puteți găsi un link în resursele din partea de jos a acestui articol.

1. Ce trebuie să instalăm și o scurtă descriere.

multer: middleware pentru manipularea fișierelor de date. Utilizat în principal pentru încărcarea fișierelor. Mai multe informatii: Npm Link

multer-s3: extensie multer pentru o încărcare ușoară a fișierelor în serviciul Amazon S3. Mai multe informatii: Npm Link

aws-sdk: pachetul necesar pentru a lucra cu AWS (Amazon Web Services). În cazul nostru serviciul S3. Mai multe informatii: Npm Link

Mergeți la proiectele dvs. și să instalăm pachete:

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

2. Înscrieți-vă pentru AWS

Mai întâi, să creăm un cont pe https://aws.amazon.com. Amazon oferă un nivel uimitor gratuit pe care îl puteți folosi pentru primul an. După autentificare, căutați serviciul S3.

Pur și simplu spus, S3 este un serviciu cloud pentru stocarea fișierelor.

Cum se configureaza incarcarea simpla a imaginilor cu Node si
Selectați S3

Avem nevoie să creați o găleată. Vă puteți imagina o găleată ca un dosar pentru fișierele dvs. Alege un numele cupei si Regiune. Deoarece aceasta este o configurare simplă, nu ne interesează alte configurații. (Configurarea implicită este ok – dacă ceva nu este clar întrebați în comentarii). Faceți clic pe „Următor →”Până când sunteți pe Revizuire și creați găleată.

1611009906 968 Cum se configureaza incarcarea simpla a imaginilor cu Node si
Crearea cupei

Navigați la cupa creată și verificați-vă Bara URL. Amintiți-vă numele cupei (pentru mine „test mediu”) și regiune (pentru mine „noi-est”).

1611009906 151 Cum se configureaza incarcarea simpla a imaginilor cu Node si
Verificați bara URL.

Acum, trebuie să obținem al nostru acreditări sigure. Navigați prin numele contului dvs. la „acreditările mele de securitate”. Atunci “Taste de acces” și Creați o nouă cheie de acces.

1611009907 811 Cum se configureaza incarcarea simpla a imaginilor cu Node si
1611009907 21 Cum se configureaza incarcarea simpla a imaginilor cu Node si
Acreditările mele de securitate și cheile de acces
1611009907 532 Cum se configureaza incarcarea simpla a imaginilor cu Node si
Creați cheia de acces

Nu împărtășiți niciodată cheile dvs. cu nimeni! Salvați temporar aceste chei într-un fișier sau descărcați fișierul cheie, deoarece avem nevoie de chei pentru a configura încărcarea fișierului.

In regula. Configurare Amazon terminată!

3. Accesați Editorul dvs. de codificare

Nu voi explica aici elementele de bază ale Node sau Express. Acest tutorial este axat doar pe încărcarea fișierului. Dacă sunteți interesat de implementarea întregului proiect, verificați depozitul meu GitHub sau urmăriți tutorialul complet. (Puteți găsi link-uri la sfârșitul acestei postări pe blog).

  1. Creați-vă serviciul de încărcare a fișierelor cu următoarea implementare (prima parte):

Notă importantă: Nu expuneți niciodată acreditările dvs. secrete direct în fișier! Nu împărtășiți niciodată acreditările dvs. secrete! Luați în considerare configurarea variabilelor de mediu în mediul dvs. local sau în cazul proiectelor implementate, variabile în furnizorul dvs. de cloud. Cea mai bună soluție ar fi utilizarea aws-profile: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

Primul, importăm toate pachetele noastre instalate. al doilea parte este de a configurați AWS-ul nostru. Trebuie să le oferim chei secrete și regiune din bara URL pe care v-am arătat-o ​​mai înainte.

După configurarea AWS, putem crea o instanță a Amazon S3. Încă nu am terminat. Acum, să vedem a doua parte a acestei implementări.

Acum, putem seta o soluție pentru încărcarea multer. Trebuie să oferim funcția obiectului multer cu următoarele proprietăți.

  1. s3: exemplu de Amazon S3 pe care l-am creat anterior.
  2. găleată: numele cupei noastre (în cazul meu: „test mediu”)
  3. acl: control acces pentru fișier („citire publică” înseamnă că oricine poate vizualiza fișiere), puteți verifica toate tipurile disponibile aici: link amazon
  4. metada: funcție de apel invers pentru a seta metadatele fișierelor încărcate. Aici, stabilesc metadate suplimentare pentru un numele domeniului. Puteți vedea aceste date pe imaginea de mai jos.
1611009907 412 Cum se configureaza incarcarea simpla a imaginilor cu Node si
Metadate

5. cheie: funcția de apel invers pentru a seta cheie proprietate (sub care cheie fișierul dvs. va fi salvat în cupa dvs.). În cazul nostru, facem o marcă de timp a unui moment curent și salvarea acestui fișier sub acest nume. În acest fel, numele nostru de fișier va fi întotdeauna unic, dar puteți alege orice nume doriți.

1611009908 940 Cum se configureaza incarcarea simpla a imaginilor cu Node si
Fișier încărcat cu un nume de timp curent

După toate configurările, exportăm fișierul încărcați obiect pentru a-l utiliza în alte fișiere.

4. Configurați un traseu pentru încărcarea imaginii

Aproape am terminat, dar utilizatorii aplicației noastre încă nu au acces la încărcarea imaginii. Trebuie să le expunem această funcționalitate. Să creăm un punct final pentru a salva un fișier.

Exportăm obiectul de încărcare pe care l-am creat anterior și creăm unul nou din acesta. Noua este mai specifică, cu o configurație suplimentară pentru un încărcare de o singură imagine. Oferim un „imagine‘valoare pentru ea. Această valoare este foarte important, deoarece vom trimite fișierul nostru către un server sub această cheie.

A doua parte este ruta în sine. POST punctul final către ‘/ imagine-upload‘. Înăuntru sunăm singleUpload. Nu uita sa treceți în interiorul req și res, deoarece multer va primi fișierul pe care îl trimitem la server din obiectul req.

Verificăm dacă există o eroare. Dacă nu există, trimitem înapoi JSON cu valoarea locației fișierului nostru, care este doar un Adresa URL a fișierului de pe Amazon.

Aaaa și gata! Putem încărca fișiere pe Amazon S3 acum. Destul de simplu, ce crezi?

5. Să testăm în Postman.

Pentru a vedea rezultatele muncii noastre, trebuie să trimitem o cerere către server cu o imagine pe care dorim să o încărcăm. În această parte o vom testa prin Postman. În următoarea parte a tutorialului, vom crea o implementare într-o aplicație Angular.

Dacă nu ai Poştaş, îl puteți descărca pur și simplu ca extensie Google Chrome. Doar căutați „extensie postman google chrome‘. Postman este o aplicație pentru inițializarea, trimiterea și testarea cererilor către server într-o chestiune simplă.

1611009908 495 Cum se configureaza incarcarea simpla a imaginilor cu Node si
Poştaş
  1. Trimiteți o cerere de postare la un punct final pe care l-am creat înainte. În cazul meu am specificat în calea nodului / imagine-upload.
  2. Selectați Corp de date-formular.
  3. Furnizați cheie a unui imagine. Veți observa că acesta este un cheie ne-am configurat înainte în codul nostru. Verificați un fișier și alegeți un fișier de pe computer.
  4. Trimiteți cererea.

Ar trebui să obțineți JSON înapoi cu adresa URL a fișierului încărcat.

Voilà! Asta e băieți. Acesta este un simplu încărcare de fișiere pentru Node. În articolul următor, voi continua cu o implementare frontend pentru Angular.

Dacă vă place acest tutorial, nu ezitați să verificați cursul meu complet despre Udemy – Ghidul complet unghiular, de reacție și nod | Aplicație în stil Airbnb.

Prelegere video: Video Youtube

Proiect finalizat: Depozitul meu github

Noroc,

Filip