Sådan oprettes en simpel billedupload med Node og AWS S3

En trinvis vejledning, der forklarer, hvordan man uploader et billede eller en fil til Amazon S3-tjenesten.

Dette er den første del af en tutorial, hvor vi håndterer serveren (Node.js) del af koden.

Jeg forberedte også en video tutorial på YouTube. Du kan finde et link i ressourcerne nederst i denne artikel.

1. Hvad vi har brug for at installere & en kort beskrivelse.

multer: middleware til håndtering af datafiler. Bruges primært til upload af filer. Mere info: Npm Link

multer-s3: multer-udvidelse til en nem filupload til Amazon S3-tjeneste. Mere info: Npm Link

aws-sdk: nødvendig pakke til at arbejde med AWS (Amazon Web Services). I vores tilfælde S3-service. Mere info: Npm Link

Gå til dine projekter, og lad os installere pakker:

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

2. Tilmelding til AWS

Lad os først oprette en konto på //aws.amazon.com. Amazon tilbyder et fantastisk gratis niveau, du kan bruge til det første år. Søg efter S3-tjenesten efter login.

Simpelthen sagt, S3 er en skytjeneste til lagring af filer.

Vi er nødt til at oprette en spand . Du kan forestille dig en spand som en mappe til dine filer. Vælg et skovnavn og Region . Da dette er en simpel opsætning, er vi ikke interesseret i andre konfigurationer. (Standardopsætningen er ok - hvis noget ikke er klart, spørg i kommentarerne). Klik på " næste ", indtil du er på anmeldelse, og opret din spand.

Naviger til din oprettede spand, og tjek din URL-bar . Husk dit skovnavn (for mig "medium-test") og region (for mig "us-øst").

Nu er vi nødt til at få vores sikre legitimationsoplysninger . Naviger gennem dit kontonavn til " mine sikkerhedsoplysninger ". Derefter “ Adgangstaster ” og Opret ny adgangsnøgle .

Del aldrig dine nøgler med nogen! Gem disse nøgler midlertidigt i en eller anden fil, eller download nøglefilen, fordi vi har brug for nøgler for at oprette en filupload.

Okay. Amazon-opsætning udført!

3. Gå til din kodningseditor

Jeg vil ikke forklare det grundlæggende i Node eller Express her. Denne tutorial er kun fokuseret på filupload. Hvis du er interesseret i hele projektimplementeringen, skal du tjekke mit GitHub-arkiv eller se den fulde tutorial. (Du kan finde links i slutningen af ​​dette blogindlæg).

  1. Opret din fil-upload-tjeneste med følgende implementering (første del):

Vigtig note: Udsæt aldrig dine hemmelige legitimationsoplysninger direkte i filen! Del aldrig dine hemmelige legitimationsoplysninger! Overvej at konfigurere miljøvariabler i dit lokale miljø eller i tilfælde af implementerede projekter variabler i din skyudbyder. Bedste løsning ville være at bruge aws-profiler : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

For det første importerer vi alle vores installerede pakker. Den anden del er at konfigurere vores AWS . Vi er nødt til at give vores hemmelige nøgler og region fra URL-linjen, som jeg viste dig før.

Efter AWS-konfiguration kan vi oprette en forekomst af vores Amazon S3. Vi er stadig ikke helt færdige endnu. Lad os nu se den anden del af denne implementering.

Nu kan vi oprette en løsning til en multer-upload. Vi er nødt til at give funktion til multerobjektet med følgende egenskaber.

  1. s3 : forekomst af Amazon S3, vi oprettede før.
  2. spand : navnet på vores spand (i mit tilfælde: "medium-test")
  3. acl : adgangskontrol til filen ('offentlig læsning' betyder, at alle kan se filer), du kan kontrollere alle de tilgængelige typer her: amazon link
  4. metada : tilbagekaldsfunktion for at indstille metadata for uploadede filer. Her indstiller jeg yderligere metadata til et feltnavn . Du kan se disse data på billedet nedenfor.

5. tast: tilbagekaldsfunktion for at indstille nøgleegenskaben (under hvilken nøgle din fil gemmes i din bucket). I vores tilfælde laver vi en tidsstempel på det aktuelle tidspunkt og gemmer denne fil under dette navn. På denne måde vil vores filnavn altid være unikt, men du kan vælge hvilket navn du vil have.

Efter alt opsætningen eksporterer vi uploadobjektet for at kunne bruge det i andre filer.

4. Konfigurer en rute til upload af billede

Vi er næsten færdige, men brugere af vores app har stadig ikke adgang til upload af billedet. Vi er nødt til at udsætte denne funktionalitet for dem. Lad os oprette et slutpunkt for at gemme en fil.

Vi eksporterer vores uploadobjekt, som vi har oprettet før, og opretter et nyt ud fra det. Den nye er mere specifik med yderligere konfiguration til en enkelt upload af billeder . Vi leverer en ' image ' værdi til den. Denne værdi er meget vigtig, fordi vi sender vores fil til en server under denne nøgle.

Anden del er selve ruten. POST- slutpunkt til ' / image-upload '. Inde kalder vi singleUpload . Glem ikke at videresende req og res, fordi multer får den fil, vi sender til serveren fra req-objektet.

Vi kontrollerer for en fejl. Hvis der ikke er nogen, sender vi JSON tilbage med værdien af ​​vores filplacering, som kun er en URL til filen på Amazon .

Aaaaand det er det! Vi kan uploade filer til Amazon S3 Now. Ret simpelt, hvad synes du?

5. Lad os teste det i Postbrevet.

For at se resultaterne af vores hårde arbejde er vi nødt til at sende en anmodning til serveren med et billede, vi vil uploade. I denne del vil vi teste det via Postman. I den næste del af vejledningen opretter vi en implementering i en Angular-applikation.

Hvis du ikke har Postmand, kan du bare downloade det som en Google Chrome-udvidelse. Bare søg efter ' postman google chrome extension '. Postbrevet er et program til at initialisere, sende og teste anmodninger til serveren i en simpel sag.

  1. Send en postanmodning til et slutpunkt, vi oprettede før. I mit tilfælde specificerede jeg i node-stien til / image-upload .
  2. Vælg Krop af formen-data .
  3. Angiv nøglen til et billede. Du vil bemærke, at dette er en nøgle, vi tidligere har oprettet i vores kode. Tjek en fil, og vælg en fil fra din computer.
  4. Send anmodningen .

Du skal komme tilbage til JSON med URL'en til din uploadede fil.

Voilà! Det er det fyre. Dette er en simpel filupload til Node. I den næste artikel vil jeg fortsætte med en frontend implementering af Angular.

Hvis du kan lide denne tutorial, er du velkommen til at tjekke mit fulde kursus om Udemy - Den komplette vinkel-, reagerings- og nodevejledning | App til Airbnb-stil.

Videoforelæsning: Youtube-video

Afsluttet projekt: Mit github-lager

Skål,

Filip