de Abhishek Jakhar

Cum să implementați o aplicație React pentru Netlify

Cum sa implementati o aplicatie React pentru Netlify

Vă voi învăța cum să implementați și să găzduiți aplicația React cu Netlify.
Netlify este un serviciu care automatizează construcțiile, implementările și gestionează site-urile dvs. web. Este una dintre cele mai rapide și mai ușoare soluții de implementare în aceste zile.

Netlify oferă un plan gratuit. Deci, mai întâi, ne vom conecta la Netlify folosind oricare dintre opțiunile (Github, Gitlab, Bitbucket, Email) oferite pe pagina de autentificare.

Cum sa implementati o aplicatie React pentru Netlify
1611266706 776 Cum sa implementati o aplicatie React pentru Netlify
1611266706 562 Cum sa implementati o aplicatie React pentru Netlify
Stânga(Pagina de logare) Centru(Autorizare) Dreapta(Aplicație online Netlify)

Vom începe prin a crea o versiune a aplicației noastre executând această comandă:

npm run build

Deci, acum va fi generat folderul nostru de compilare care va conține toate fișierele pregătite pentru producție.

Acum, există doua feluri pentru a implementa aplicația noastră pe Netlify.

ad-banner

Trage si lasa

Netifly a făcut-o atât de ușor încât trebuie doar să facem acest lucru tragere și plasare al nostru creați folderul în lor aplicație online (Imaginea din dreapta de mai sus), iar aplicația noastră va fi implementată pe o adresă URL live.

Notă: Aplicația online Netlify este ecranul care apare după ce v-ați conectat la contul dvs. netlify.

1611266706 854 Cum sa implementati o aplicatie React pentru Netlify
Drag & Drop build dosar către Aplicație online Netlify a desfasura

Netlify CLI

Netifly oferă, de asemenea, o interfață de linie de comandă care vă permite să implementați aplicația direct din linia de comandă. Asta vom face acum.

Deci, mai întâi, vom instala CLI folosind următoarea comandă:

npm install netlify-cli -g

Acum suntem gata să-l implementăm. Pentru a implementa aplicația trebuie să ne asigurăm că suntem în folderul proiectului și apoi vom rula această comandă:

netlify deploy

S-ar putea să avem o fereastră pop-up care ne va cere să ne conectăm cu Netlify și să acordăm acces la Netlify CLI.

1611266706 582 Cum sa implementati o aplicatie React pentru Netlify
Fereastra pop-up care vă cere să vă conectați cu Netlify și să acordați acces la Netlify CLI

Acum, vom face clic pe Autorizare. Acum, că suntem autorizați, putem urma instrucțiunile din linia de comandă pentru a implementa aplicația.

Linii de comandă

  1. În consolă, scrie că „Acest dosar nu este încă conectat la un site. Ce ai vrea sa faci?” Vrea să știe dacă vrem să conectăm acest director la un site existent sau să creăm și să configurăm un site nou. Deoarece acesta este un site nou, îl vom selecta Creați și configurați un site nou.
1611266706 805 Cum sa implementati o aplicatie React pentru Netlify

2. Ne oferă opțiunea de a da un site site-ului nostru un nume. Voi scrie portofoliu pe netlify (Puteți introduce orice nume disponibil care vă place).

1611266706 384 Cum sa implementati o aplicatie React pentru Netlify

3. Acum va cere contul Netlify pe care doriți să îl utilizați, așa că voi selecta contul meu (Abhishek Jakhar), o puteți selecta pe a dvs.

1611266706 517 Cum sa implementati o aplicatie React pentru Netlify

4. Acum, ca cale de implementare, trebuie să specificăm directorul de construire al proiectului nostru care conține activele pentru implementare. Deci, vom tasta construi acolo și apăsați Enter.

1611266706 109 Cum sa implementati o aplicatie React pentru Netlify

5. Acum, site-ul nostru va fi creat și va fi implementat mai întâi într-o schiță URL, pe care o putem vizualiza copiind și lipind adresa URL în browser.

1611266707 740 Cum sa implementati o aplicatie React pentru Netlify

Acum, înapoi în consolă, scrie „Dacă totul arată bine în proiectul de adresă URL, duceți-l să trăiască cu steagul –prod”.

Deci, pentru ca aplicația noastră să fie live, vom rula comanda afișată pe linia de comandă

netlify deploy --prod

Ne va cere încă o dată să specificăm calea de implementare pentru construcția live, care este din nou folderul nostru de construire.

1611266707 395 Cum sa implementati o aplicatie React pentru Netlify

Acum, în ieșirea consolei, obținem două adrese URL. A Adresă URL de implementare unică, care reprezintă adresa URL unică pentru fiecare implementare individuală și a Adresa URL live care afișează întotdeauna cea mai recentă implementare.

Deci, de fiecare dată când vă actualizați site-ul și îl implementați, veți obține o adresă URL unică pentru implementarea respectivă. Practic, dacă vom implementa de mai multe ori vom avea mai multe adrese URL unice astfel încât să puteți îndrepta utilizatorii către un versiune specifică a cererii dvs. Cu exceptia URL live afișează întotdeauna ultimele modificări la aceeași adresă URL.

Notă: Netlify vă securizează automat site-ul HTTPS pentru gratuit.

Eroare pagina nu a fost găsită

1611266707 142 Cum sa implementati o aplicatie React pentru Netlify
Eroare 404 când reîmprospătăm aplicația după ce navigăm la un alt traseu

Dacă publicați o aplicație care utilizează un router precum React Router, va trebui să configurați redirecționările și să rescrieți regulile pentru adresele URL. Deoarece atunci când facem clic pe orice element de navigare pentru a schimba pagina (ruta) și a actualiza browserul, obținem o pagină de eroare 404.

Deci, Netlify face cu ușurință configurarea redirecționărilor și a regulilor de rescriere pentru adresele URL. Va trebui să adăugăm un fișier în dosarul de construire al aplicației noastre numit _redirects. În interiorul fișierului, trebuie să includem următoarea regulă de rescriere.

/*    /index.html  200

Această regulă de rescriere va servi fișierul index.html în loc să dea un 404, indiferent de adresa URL solicitată de browser.

1611266707 70 Cum sa implementati o aplicatie React pentru Netlify
_redirecții fișier din interiorul folderului de construire care conține regula de redirecționare

Așadar, acum, pentru a vedea cele mai recente modificări ale adresei URL live, trebuie să ne implementăm cu netlify deploy. Din nou, vom specifica construirea ca cale de implementare. Acum, când vom vedea adresa URL live și reîmprospătăm aplicația după ce am schimbat ruta, nu vom mai vedea pagina de eroare 404.

1611266707 202 Cum sa implementati o aplicatie React pentru Netlify

Cam despre asta e. Pe netlify.com puteți vedea setările site-ului dvs. Acolo puteți face lucruri precum configurarea unui domeniu personalizat sau conectarea site-ului la un depozit GitHub.

Netlify: platformă all-in-one pentru automatizarea proiectelor web moderne
Implementați site-uri web statice moderne cu Netlify. Obțineți CDN, implementare continuă, HTTPS cu un singur clic și toate serviciile pe care le …www.netlify.com

Sper că ați găsit această postare informativă și utilă. Mi-ar plăcea să vă aud feedbackul!

Mulțumesc că ai citit!