de Will Abramson

Lecții învățate de la implementarea primei mele aplicații web full-stack

Am atins recent unul dintre obiectivele mele pe termen lung: implementarea primei mele aplicații web full-stack.

În această postare, voi împărtăși lecțiile pe care le-am învățat din perspectiva unui începător, împreună cu câteva tutoriale utile pe care le-am urmat, obstacole cheie pe care a trebuit să le depășesc și greșelile pe care le-am făcut pe parcurs. Vreau să ajut alți dezvoltatori să înțeleagă ce este implicat în implementarea unei aplicații web.

După ce am petrecut peste șase săptămâni la Google, am încercat, nu am reușit și am încercat din nou, am reușit în cele din urmă să îmi implementez aplicația web. Acesta era compus dintr-un backend Node.js împreună cu un frontend React la o mașină virtuală Amazon Web Services (AWS) EC2.

A fost o provocare destul de mare, dar a fost cu adevărat satisfăcătoare, deoarece în cele din urmă aplicația a fost implementată cu succes și este acum accesibilă printr-un nume de domeniu public.

Lectii invatate de la implementarea primei mele aplicatii web full stack
Saltul Victoriei! – După implementarea aplicației dvs. web

Cea mai mare dificultate pentru mine a fost să găsesc informațiile. Nu am înțeles ce a fost implicat în desfășurare. Așa că m-am străduit să găsesc răspunsuri eficiente pe web. Nu am reușit să găsesc un singur ghid pentru întregul proces.

Sperăm că pot simplifica curba de învățare a implementării pentru următoarea persoană, aducând toate informațiile pe care le-am învățat într-un singur loc.

Deci, iată …

Ce înseamnă să implementezi o aplicație?

O aplicație web este împărțită în două părți.

  • Cod partea clientului: Acesta este codul dvs. UI de frontend. Acestea sunt fișiere statice care nu se schimbă de-a lungul vieții aplicației. Fișierele statice trebuie să existe undeva astfel încât utilizatorii dvs. să le poată descărca și rula în browserul lor din partea clientului. Voi intra în mai multe detalii despre locul în care s-ar putea afla undeva mai târziu.
  • Cod lateral server: Aceasta tratează toată logica aplicației dvs. Ar trebui să fie rulat pe un server (mașină), de obicei unul virtual ca o instanță EC2, la fel cum îl rulați atunci când vă dezvoltați local.

Pentru a rula codul local, serverul trebuie să aibă o copie a acestuia. Tocmai am clonat repo Github pe server din interfața liniei de comandă a serverului.

De asemenea, trebuie să vă configurați serverul. Aceasta include:

  • configurarea aparatului pentru a putea accesa internetul și a vă rula codul
  • expunând corectul porturi
  • ascultarea cererilor HTTP (solicitări de Internet)
  • îndreptând un nume de domeniu personalizat către serverul de la care rulează aplicația dvs.

Veți ști că funcționează atunci când vă puteți accesa aplicația utilizând numele de domeniu personalizat de pe orice computer de pe Internet și toate funcționalitățile aplicației dvs. funcționează conform așteptărilor.

Deci, aceasta este o prezentare generală. Dar, cum o facem de fapt?

Noțiuni de bază

Ar trebui să împărțiți aplicația și să rezolvați problema. Implementați două lucruri diferite: fișiere statice de la client și cod de la server.

Prima mea greșeală a fost să mă gândesc la aplicația mea ca un întreg, mai degrabă decât la două aplicații separate care vorbesc între ele.

Acest lucru s-a adăugat complexității și a făcut inutilă căutarea de răspunsuri. M-a lăsat să mă simt copleșită.

Am descompus problema în acești pași. Deși fiecare problemă poate fi întotdeauna descompusă în continuare.

  • Configurarea VM și implementarea Backend-ului
  • Implementarea frontendului
  • Comunicarea celor două aplicații
  • Arătând numele dvs. de domeniu

În figura de mai jos, am încercat să pun procesul complet într-o diagramă.

Lectii invatate de la implementarea primei mele aplicatii web full stack
Procesul de implementare. Creat folosind draw.io – un instrument minunat de diagramă gratuită.

Configurarea VM și implementarea Backend-ului

În cazul meu, acesta a fost un server Express.js implementat pe o mașină virtuală amazon EC2. Aș fi explicat cum să o fac, dar tutorialul „Crearea și gestionarea unui server Node.js pe AWS – Partea 1”Face o treabă mult mai bună.

Este cel mai bun tutorial pe care l-am întâlnit în acest spațiu și acoperă:

  • Lansarea unei mașini virtuale AWS
  • Obținerea grupurilor de securitate corecte pentru porturi
  • Extragerea codului de la GitHub pe mașina virtuală
  • Rularea serverului dvs.
  • Folosind Nginx, un server HTTP, pentru a redirecționa cererile din portul 80
  • Utilizarea PM2 pentru a persista procesul care rulează serverul dvs.

A fost un salvator de viață și, fără el, aș mai fi probabil blocat. Deci, mulțumesc, Robert Tod.

Puteți testa cu ușurință dacă serverul dvs. rulează folosind Poştaş pentru a trimite o solicitare la unul dintre punctele dvs. de bază Backend.

Implementarea frontendului

Deci, acum că aveți un server cu backend-ul dvs. rulat (sper), trebuie să faceți frontendul să funcționeze. Acest lucru este foarte ușor atunci când înțelegeți procesul.

Din păcate, nu am făcut-o mult timp. De exemplu, la început am încercat să-mi rulez Frontend-ul folosind npm start.

Npm start creează un server de dezvoltare locală, care servește fișierele astfel încât acestea să fie accesibile numai folosind localhost ceea ce nu ne dorim.

Pentru a implementa codul Frontend, trebuie să stocați toate fișierele pe mașina dvs. virtuală într-o locație despre care știe serverul dvs. web. Serverul web permite unui client să descarce codul și să îl ruleze în browserul său.

Apache și Nginx sunt exemple de servere web.

Un server web ascultă anumite porturi, portul 80 sau mai frecvent portul 443 (securizat) și fie servește fișiere statice (codul dvs. Frontend), fie transmite solicitarea către un alt port. De exemplu, am văzut o solicitare către Backend în tutorialul Node.js de mai sus.

Deoarece codul Frontend este doar o colecție de fișiere stocate pe un server web, dorim să facem aceste fișiere cât mai mici și optimizate posibil. Acest lucru asigură că clientul le poate descărca și rula cât mai repede posibil.

Pagina mai rapidă încarcă utilizatori fericiți egali.

Toate fișierele dvs. JavaScript Frontend pot fi grupate într-un singur fișier JavaScript. Acest lucru se face, de obicei, executând npm run build, presupunând că aveți acest script definit în package.json.

Puteți citi mai multe despre codul de grupare Aici.

Practic, gruparea aplicației dvs. elimină tot ceea ce nu este esențial. Aceasta include scurtarea numelor și plasarea tuturor codurilor JavaScript într-un singur fișier. De asemenea, va compila codul dvs. în versiunea corectă de JavaScript. Aceasta este astfel încât toate browserele web să o poată înțelege și să o ruleze (de exemplu, convertind TypeScript în JavaScript).

Când codul dvs. este grupat, trebuie doar să copiați fișierele pe serverul dvs. web. Apoi configurați serverul web pentru a servi fișierele stocate în acea locație.

Iată un bine articol la implementarea fișierelor statice pe un server web Nginx.
Sperăm că, dacă totul merge bine (ceea ce nu merge niciodată), codul dvs. Frontend funcționează acum.

Accesați DNS-ul public pentru mașina virtuală pentru a verifica dacă se încarcă informațiile statice de pe site.

Comunicarea celor două aplicații

Așa că am avut ambele aplicații rulând individual, dar ceva nu era în regulă. Nu am putut scăpa de o eroare de solicitare a rețelei.

Acesta a fost cel mai frustrant punct pentru mine. Eram atât de aproape, dar am întâmpinat câteva contracarări care au ajuns să rezolve câteva săptămâni.

Partajarea resurselor cross-origine (CORS) este un mecanism care permite comunicarea între diferite adrese IP sau porturi. Doriți ca Backend-ul dvs. să poată trimite date înapoi la Frontend.

Pentru a activa acest lucru, Frontend-ul dvs. trebuie să includă anteturile corecte atunci când solicitați resurse. Acest lucru se poate face în două moduri:

  • Anteturile pot fi adăugate în Nginx, deși necesită o anumită descriere. Tu poți să începi Aici.
  • Poti utilizați modulul cors npm pentru a include anteturile.

O modalitate excelentă de a testa acest lucru dacă funcționează este căutând în fila de rețea a instrumentelor de dezvoltator ale browserului dvs. Aceasta arată toate solicitările pe care le face aplicația dvs. Dacă selectați o cerere, puteți vedea unde a fost trimisă cererea și ce anteturi a inclus.

1612073410 156 Lectii invatate de la implementarea primei mele aplicatii web full stack

Odată ce aveți trimise anteturile de solicitare corecte împreună cu solicitarea dvs., trebuie să vă asigurați că solicitările vor merge la locul corect. Aceasta ar trebui să fie adresa și portul serverului dvs. EC2 Backend și nu adresa și portul local Serverul backend ca al meu era.

Frontend-ul dvs. comunică cu backend-ul dvs. utilizând cereri HTTP. Undeva în codul Frontend, îi veți spune unde se află Backend-ul.

const networkInterface = createNetworkInterface({
 uri: ‘http://0.0.0.0:5000/graphql',
});

Al meu arăta așa, ceea ce în mod clar nu va fi corect pentru serverul meu de producție.

În mod deranjant, acest lucru a făcut ca aplicația mea să pară că a funcționat atunci când am navigat pentru prima oară pe ea pe mașina mea locală, deoarece serverul meu local rulează și a putut să returneze informațiile solicitate.

Pentru a remedia acest lucru, puteți schimba pur și simplu URI-ul definit, dar asta înseamnă că trebuie să îl schimbați de fiecare dată când faceți o dezvoltare ulterioară, ceea ce este nu cea mai bună abordare (știu pentru că am făcut-o).

O soluție mai sofisticată este de a include atât URI-uri, cât și de a utiliza variabile de mediu pentru a o selecta pe cea potrivită.

const networkInterface = createNetworkInterface({   
   uri: process.env.NODE_ENV === 'production' ?      
                     'http://thecommunitymind.com/graphql' : 
                     'http://0.0.0.0:5000/graphql',
});

Simplu dar eficient. Asigurați-vă că setați NODE_ENV la producție atunci când îl utilizați pentru serverul de producție.

Suntem aproape acolo. De fapt, implementarea dvs. ar putea funcționa acum.

Dar am avut o ultimă problemă de depășit.

Chiar dacă configurarea mea CORS a fost corectă, anteturile necesare nu au fost incluse în mod constant și au fost adăugate doar uneori. Pentru unele solicitări POST, anteturile CORS nu au fost întotdeauna prezente. Foarte ciudat!

Această eroare m-a condus într-o goană frustrantă la gâscă, încercând să-mi repar setarea CORS în Nginx, când de fapt nu avea nicio legătură cu CORS.

De fapt, nici nu am avut nevoie să fac nimic cu CORS în Nginx, deoarece foloseam modulul CORS npm.

Eroarea s-a datorat altor două probleme:

  • Baza de date a fost inclusă ca fișier sqlite în Backend și
  • Managerul meu de proces, PM2, urmărea schimbările de fișiere

Deci, scrierea în fișierul bazei de date pe o cerere POST a determinat PM2 să repornească serverul. Acest lucru a dus la preluarea antetelor corecte, ceea ce a dus la erori înșelătoare.

Un sfat grozav și unul pe care mi-aș dori să-l știu mai devreme este să vă verific jurnalele de server pe instanța dvs. EC2. Fie că utilizați PM2 sau altceva, va exista întotdeauna o modalitate de a vă verifica jurnalele. Doar Google it!

Aceste jurnale au furnizat cheia pentru rezolvarea problemei mele.

Pur și simplu a trebuit să opresc capacitatea de ceas a PM2. Bingo. Și, în cele din urmă, a funcționat.

Arătând numele dvs. de domeniu

Aceasta este cireasa de pe tort. Doriți o adresă URL curată drăguță pentru aplicația dvs. recent implementată.

Mi-am cumpărat numele de domeniu prin Amazon și am folosit Route 53 pentru a-l îndrepta către instanța EC2 corectă. Aceasta a fost o experiență surprinzător de nedureroasă.

Amazonului tutorial a fost destul.

1612073410 845 Lectii invatate de la implementarea primei mele aplicatii web full stack
Diagramă excelentă – Sursa: WPBeginner

rezumat

Sper că această postare v-a ajutat să înțelegeți procesul de implementare a aplicațiilor web și, în cele din urmă, să obțineți proiectul dvs. uimitor online – orice ar fi acesta.

Cel puțin ar trebui să aveți o idee mai bună despre ce pentru Google!

Noroc.