Jak wdrożyć aplikację frontendową do Netlify?

Wdrażanie aplikacji frontendowych nie jest dziś wielkim problemem. Dzięki nowoczesnym technologiom i platformom hostingowym możemy wdrożyć witrynę w ciągu kilku minut. Istnieje wiele platform hostingowych. Ale w tym artykule jesteśmy zainteresowani Netlify.

Wdróżmy naszą aplikację frontendową w Netlify .

Aplikacje frontendowe

Istnieją różne rodzaje bibliotek frontendowych i frameworków, takich jak React, Vue, Angular itp., a dobrą wiadomością jest to, że wszystkie używają tego samego programu do pakowania pakietów. Wdrożenie dla wszystkich aplikacji frontendowych zbudowanych z różnymi bibliotekami i frameworkami jest podobne. Dlatego dobrze jest wybrać dowolną z tych bibliotek i frameworków.

Możemy również tworzyć aplikacje frontendowe bez żadnych bibliotek czy frameworków. Jest to tradycyjny sposób budowania aplikacji frontendowych raz na jakiś czas. Ale teraz bardzo się to zmienia. Możemy więc budować aplikacje frontendowe na różne sposoby. Chociaż proces wdrażania jest taki sam dla wszystkich tych różnych rodzajów aplikacji frontendowych.

Zobaczymy wdrożenie jednej aplikacji front-endowej zbudowanej z biblioteką i drugiej bez żadnej biblioteki ani frameworka. Zbudujmy minimalne aplikacje frontendowe do wdrożenia za pomocą React i Plain JavaScript .

Ustawiać

Stworzymy proste aplikacje React i JavaScript do demonstracji wdrożenia. Ty również je tworzysz, aby podążać za nimi. Lub, jeśli masz już aplikacje frontendowe, przejdź do sekcji wdrażania.

Musimy pamiętać, że punktem wejścia każdej aplikacji frontendowej powinien być index.html podczas wdrażania do Netlify .

Jeśli stworzyliśmy aplikacje przy użyciu dowolnej biblioteki lub frameworka, nie musimy się tym martwić. Domyślnie biblioteki i frameworki tworzą dla nas plik index.html w procesie budowania . Ale kiedy mamy zwykłe aplikacje JavaScript, musimy utworzyć plik index.html jako wpis dla naszej aplikacji.

Aplikacja Reaguj

Uruchom następujące polecenie, aby utworzyć aplikację React.

 npx create-react-app demo

Możesz zaktualizować aplikację, jak chcesz, przed wdrożeniem. Właśnie zaktualizowałem wiersz tekstu na stronie głównej. Ale to nie ma znaczenia :).

Zwykła aplikacja JavaScript

Wykonaj poniższe czynności, aby utworzyć prostą aplikację JavaScript.

• Utwórz folder o nazwie demo .
• Utwórz trzy pliki o nazwach index.html , styles.css i script . js .
• Tutaj index.html jest punktem wejścia dla naszej aplikacji.

Wyzwól swoją kreatywność i zaktualizuj aplikację. Po prostu dodaję do aplikacji proste rzeczy.

Wdrażam

Jeśli chodzi o wdrażanie aplikacji frontendowych do Netlify, mamy dwie opcje. Możemy bezpośrednio wdrażać aplikacje z GitHub, GitLab, BitBucket itp. do Netlify. Albo możemy wdrożyć za pomocą Netlify CLI (interfejs wiersza poleceń) . Aby wdrożyć nasze aplikacje, nie musisz znać wszystkich. Ale to dobrze, jeśli chodzi o różne opcje, które mamy do wdrożenia.

Przyjrzyjmy się każdemu z nich po kolei.

GitHub

Używamy GitHub do hostowania naszego kodu. Nie musisz go używać, ponieważ nie jest to obowiązkowe. Możesz korzystać z innych platform, jak chcesz.

Mamy do wdrożenia dwa rodzaje aplikacji. Ale proces wygląda podobnie dla nich obu. Nawet jeśli pokażę ci oba. Są to głównie dwa kroki. Oni są

• Wypchnij kod do GitHub.
• Wdróż aplikację z GitHub za pomocą Netlify.

Pierwsza część jest wspólna dla aplikacji React i JavaScript . Zacznijmy proces wdrażania od pierwszego kroku.

Zakładamy, że nie masz kodu na GitHub. Jeśli masz swój kod na GitHub, możesz pominąć część dotyczącą pchania kodu. Potrzebujesz narzędzia git . Jeśli nie masz zainstalowanego git na swoim komputerze, powinieneś go zainstalować przed kontynuowaniem.

#1. Wysyłanie kodu do GitHub

• Przejdź do swojego konta GitHub i utwórz repozytorium o nazwie demo .

• Możesz zobaczyć repozytorium w następujący sposób po jego utworzeniu.

Teraz musimy wypchnąć nasz kod do repozytorium, które stworzyliśmy powyżej. Aby wypchnąć kod, możesz postępować zgodnie z poleceniami podanymi w repozytorium lub poniżej.

• Otwórz terminal lub cmd.
• Przejdź do katalogu swojego projektu.
• Zainicjuj git za pomocą git init
• Dodaj zmiany do lokalnego git git add .
• Zatwierdź zmiany za pomocą komunikatu git commit -m 'Completed application'
• Połącz zdalne repozytorium z naszym lokalnym repozytorium git remote add origin 'your_repo_path' . Zastąp your_repo_path swoim zdalnym repozytorium. Możesz go znaleźć w repozytorium podobnie w moim [email protected]:hafeezulkareem/demo.git
• Teraz wypchnij kod git push -u origin main
• Otóż ​​to; wypchnęliśmy nasz kod na GitHub.

Możesz zobaczyć kod w swoim repozytorium w następujący sposób.

Skończyliśmy z pierwszym krokiem wysłania naszego kodu do GitHub. Jeśli wdrażasz zwykłą aplikację JavaScript , Twój kod może wyglądać następująco.

Przejdźmy do następnego kroku i wdrożmy naszą aplikację do Netlify.

#2. Wdrażanie kodu GitHub w Netlify

Jeśli nie masz konta w Netlify, utwórz je.

• Wejdź na stronę Netlify.
• Zaloguj się na swoje konto.
• Możesz zobaczyć przycisk o nazwie Nowa witryna z Git, jak pokazano poniżej.

• Kliknij przycisk, aby rozpocząć wdrażanie.
• Przejdziesz do strony wdrażania, która wygląda następująco.

• Na stronie możesz korzystać z różnych platform hostingowych kodu. Korzystamy z GitHub. Więc kliknij na to.
• Otworzy się nowe okno, aby zalogować się do naszego konta GitHub w następujący sposób.

• Zaloguj się na swoje konto GitHub, aby uzyskać autoryzację Netlify.
• Po zalogowaniu się na swoje konto GitHub okno zamknie się z napisem Authorized .
• Teraz wyszukaj nazwę swojego repozytorium z podanego paska wyszukiwania.

• Kiedy szukasz repozytorium, nie pojawi się ono, ponieważ nie daliśmy naszemu repozytorium dostępu do Netlify. Zobaczysz przycisk o nazwie Konfiguruj Netlify na GitHub .

• Kliknij przycisk i wprowadź hasło do konta GitHub, aby potwierdzić dostęp.

• Przejdziesz do strony Access, która wygląda następująco.

• Przewiń w dół, a zobaczysz sekcję o nazwie Dostęp do repozytorium .

• Istnieją dwie opcje. Możemy udostępnić dostęp do wszystkich naszych repozytoriów lub niektórych z nich, które tego wymagają. Lepiej dać dostęp do wdrażanych przez nas repozytoriów, a nie do wszystkich.
• Wybierz opcję Tylko wybierz repozytoria w następujący sposób.

• Kliknij poniższe menu rozwijane i wyszukaj repozytorium, które chcesz wdrożyć. Wybierz to.

• Kliknij przycisk Zapisz .
• Przekieruje do strony wdrażania Netlify . I możesz zobaczyć nowe repozytorium.

• Kliknij repozytorium.
• Pokaże różne szczegóły, takie jak gałąź do wdrożenia, polecenie do zainstalowania pakietów itp.,

• Jeśli masz pełny kod w innej gałęzi niż master , zaktualizuj go, wybierając gałąź z listy rozwijanej.
• Na koniec kliknij przycisk Wdróż witrynę . Przekieruje Cię do pulpitu nawigacyjnego.
• Wdrożenie witryny zajmie trochę czasu.

• Opublikowaną witrynę zobaczysz po jej wdrożeniu.

Otóż ​​to.

Pomyślnie wdrożyliśmy naszą witrynę do Netlify. Możesz kliknąć adres URL witryny, aby zobaczyć go na żywo.

Możemy aktualizować ustawienia witryny i domeny według własnego uznania. Ale nie będziemy tego tutaj omawiać, ponieważ jest to kolejny pełny temat do omówienia. Poniżej znajduje się prosta aplikacja JavaScript po wdrożeniu.

Nie ma różnicy w procesie wdrażania. Pamiętaj jednak, aby nie zapomnieć o punkcie wejścia aplikacji, czyli index.html .

Teraz nadszedł czas na poznanie innej metody wdrażania naszej aplikacji frontendowej.

#3. Wdrażanie kodu za pomocą Netlify CLI

Netlify CLI to interfejs wiersza poleceń do wdrażania aplikacji frontendowych z terminala lub wiersza poleceń. Jest to przydatne, gdy nie chcesz wykonywać dodatkowych kroków (metoda powyżej). Podobnie jak powyższa metoda, możemy wdrożyć React (dowolną bibliotekę lub framework) lub aplikacje JavaScript .

Pełną dokumentację Netlify CLI znajdziesz tutaj. Ale nie jest konieczne wdrażanie aplikacji. Możesz się do niego odnieść, przechodząc na poziom zaawansowany.

Zobaczmy, jak wdrożyć za pomocą Netlify CLI.

Przede wszystkim musimy go zainstalować na naszej maszynie. Jest dostępny jako pakiet węzłów. Możemy go więc zainstalować za pomocą npm . Zainstalujmy go za pomocą następującego polecenia.

 npm install netlify-cli -g

Flaga -g oznacza globalną instalację pakietu, abyśmy mogli uzyskać do niego dostęp z dowolnego miejsca. Zobaczysz coś podobnego do poniższego obrazu.

Zobaczmy, jak wdrożyć aplikacje React i proste JavaScript za pomocą Netlify CLI.

• Uruchom polecenie kompilacji aplikacji React (lub dowolnej innej biblioteki lub frameworka). W przypadku zwykłej aplikacji JavaScript nie musimy uruchamiać żadnych poleceń.

 npm run build

• Polecenie kompilacji może się różnić w zależności od używanej biblioteki lub platformy.
• Zobaczysz folder kompilacji w następujący sposób.

• Zmień katalog na folder build w przypadku aplikacji React lub folder projektu w przypadku aplikacji JavaScript.

• Zanim przejdziemy do kolejnych kroków, musimy utworzyć konto Netlify . Przejdź do Netlify i załóż jedno konto i przejdź do kolejnych kroków.
• Teraz musimy się zalogować za pomocą CLI. Uruchommy następujące polecenie, aby się zalogować.

 netlify login

• Powyższe polecenie otworzy nową kartę w domyślnej przeglądarce, aby zalogować się do konta Netlify. Przeniesie Cię na stronę Netlify.
• Wprowadź swoje dane uwierzytelniające i zaloguj się. Po zalogowaniu zostaniesz poproszony o autoryzację CLI.

• Kliknij Autoryzuj, aby się uwierzytelnić. Po tym zobaczysz komunikat o sukcesie.

• Teraz nadszedł czas na wdrożenie naszej aplikacji. Uruchom następujące polecenie wdrażania.

 netlify deploy

• Poprosi Cię o wybranie istniejącej witryny lub utworzenie nowej. Wybierz (użyj strzałek w górę iw dół) Utwórz i skonfiguruj nową witrynę i naciśnij Enter .

• Następnie pokaże Zespoły do wyboru, użyj strzałek, aby wybrać, i naciśnij Enter .

• Teraz możesz wprowadzić subdomenę swojej witryny. Nie jest to jednak obowiązkowe. Netlify wybierze dla nas losowy, jeśli go zostawimy. Możemy to później zmienić, jeśli chcemy. Na razie zostawiam to puste.

• Poprosi nas o podanie katalogu, który chcemy wdrożyć. Dotarliśmy już do katalogu docelowego. Po prostu naciśnijmy Enter . Możesz również wejść do innych katalogów. Ale to nie jest proste. Dlatego lepiej najpierw przejść do katalogu docelowego, a następnie wdrożyć.

• Wdroży naszą witrynę dla wersji roboczej adresu URL w następujący sposób.

• Możesz sprawdzić swoją witrynę w wersji roboczej adresu URL i upewnić się, że wszystko jest w porządku.
• Po sprawdzeniu strony możemy ją wdrożyć do produkcji za pomocą poniższego polecenia.

 netlify deploy --prod

• Poprosi tylko o katalog. Wejdź do katalogu. Jeśli jesteśmy w tym samym katalogu, po prostu naciśnij Enter .
• Otóż ​​to. Nasze wdrażanie witryny zostało zakończone. Możesz odwiedzić witrynę, aby to sprawdzić.

• A oto wynik.

Skończyliśmy z wdrażaniem naszej witryny do Netlify za pomocą Netlify CLI . Możesz zaktualizować ustawienia strony w swoim panelu Netlify.

Wniosek

Uff! To jest długa. Nie potrzebujesz żadnego innego przewodnika, aby wdrożyć swoją aplikację frontendową w Netlify po całkowitym przeczytaniu tego.

Istnieją dwie metody wdrożenia naszej aplikacji do Netlify. Którym naśladować? Jest niewielka zaleta korzystania z pierwszej metody. Netlify zaktualizuje kompilację za każdym razem, gdy wyślemy nowy kod do naszego repozytorium witryny. Ale w przypadku metody CLI musimy to zrobić ręcznie.

Zawsze wybieramy jedną metodę, a nie inne w zależności od sytuacji, w której się znajdujemy. W każdym razie znasz obie metody wdrażania. Więc nie musimy się martwić o metodę. Wybierz ten, który najbardziej Ci odpowiada.

Uwaga: strony demonstracyjne pokazane w artykule mogą po pewnym czasie nie być dostępne publicznie.

Potrzebujesz alternatywy dla Netliify? Sprawdź te najlepsze platformy do hostingu witryn statycznych.

Miłego wdrażania