Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

React to popularna biblioteka JavaScript do budowy funkcjonalnych interfejsów użytkownika w dynamicznych aplikacjach internetowych. Być może spędziłeś wiele długich godzin, debugując kod Reacta, próbując zbudować kolejny Instagram lub Airbnb.

Niezależnie od tego, co budujesz, ostatecznym celem jest zawsze zaprezentowanie swojej pracy światu. Tutaj z pomocą przychodzą platformy hostingowe, takie jak Netlify. Zapewniają zestaw narzędzi, które usprawniają proces wdrażania.

Śledź dalej, aby dowiedzieć się, jak wdrażać aplikacje React za pomocą łatwych w użyciu narzędzi do wdrażania Netlify.

Co to jest Netlify?

Netlify to oparta na chmurze platforma programistyczna z funkcjami, które znacznie ułatwiają hosting i wdrażanie aplikacji w Internecie. Mówiąc najprościej, zapewnia szereg narzędzi i usług, które usprawniają i upraszczają proces, umożliwiając wdrożenie i hostowanie aplikacji internetowej w ciągu kilku sekund.

instagram viewer

Główne funkcje Netlify

Netlify oferuje szereg funkcji, które upraszczają proces wdrażania.

  • Zapewnia podstawowe funkcje kontroli dostępu i wersji, aby umożliwić zespołom programistycznym wydajną i efektywną współpracę nad projektami.
  • Oferuje bezpieczne usługi hostingowe, które możesz dostosować do swoich potrzeb. Dodatkowo zapewnia automatyczne kopie zapasowe na wypadek utraty danych.
  • Bezproblemowo integruje się z popularnymi usługami programistycznymi w chmurze, takimi jak GitHub, GitLab i Bitbucket.
  • Zapewnia funkcje ułatwiające konfigurowanie niestandardowego adresu URL domeny i certyfikatu SSL dla aplikacji.

Utwórz aplikację Demo React

  1. Aby zacząć, musisz najpierw stworzyć demonstracyjną aplikację React które ostatecznie wdrożysz na Netlify. Uruchom poniższe polecenie na swoim terminalu, aby utworzyć aplikację React: 
    npx utwórz-reaguj-aplikację demonstracyjną-reaguj-netlify-aplikację
  2. Następnie uruchom to polecenie terminala, aby uruchomić serwer programistyczny: 
    np start
    Śmiało i zobacz wyniki w swojej przeglądarce pod adresem http://localhost: 3000.
  3. Na koniec uruchom to polecenie, aby utworzyć wersję aplikacji gotową do produkcji: 
    npm uruchom kompilację
    To polecenie generuje wymagane pliki produkcyjne i zasoby w nowym folderze w katalogu głównym o nazwie build. Folder kompilacji przechwytuje zminimalizowaną wersję całej aplikacji, zawierającą wszystko, co jest wymagane do wdrożenia aplikacji.

Wdróż aplikację React na Netlify

Netlify zapewnia trzy metody, których możesz użyć do wdrożenia aplikacji React. Możesz:

  • Zaimportuj swój projekt z hosta repozytorium Git, takiego jak GitHub.
  • Użyj funkcji przeciągnij i upuść.
  • Użyj narzędzia wiersza poleceń, interfejsu CLI Netlify.

Wdróż przy użyciu funkcji importu GitHub

  1. Zacząć od tworzenie repozytorium na GitHub do przechowywania plików projektu aplikacji React. Alternatywnie możesz także hostować pliki projektu w dowolnym innym obsługiwanym dostawcy usługi Git, takim jak GitLab, Bitbucket lub Azure DevOps.
  2. Następnie zarejestruj konto na Netlify. Po zarejestrowaniu przejdź do pulpitu nawigacyjnego konta i wybierz Witryny patka.
  3. Kliknij na Importuj z Gita przycisk.
  4. Wybierz preferowaną platformę dostawcy Git. Netlify poprosi Cię o uwierzytelnienie u dostawcy Git w celu przyznania mu dostępu do Twojego konta i repozytoriów.
  5. Gdy to zrobisz, Netlify wyświetli listę repozytoriów u twojego dostawcy Git. Wybierz repozytorium projektu React, które początkowo przekazałeś dostawcy Git.
  6. Po wybraniu repozytorium należy określić, w jaki sposób Netlify ma obsłużyć proces wdrożenia. Zwykle w przypadku statycznych stron internetowych nie musisz wprowadzać żadnych zmian, jednak w przypadku dynamicznych stron internetowych, takich jak aplikacje React, będziesz musiał ustawić ustawienia kompilacji. Na szczęście Netlify domyślnie automatycznie wykrywa framework użyty do zbudowania aplikacji i wypełnia pola wymaganymi ustawieniami kompilacji.
  7. Na koniec kliknij Wdróż witrynę aby zakończyć proces.

Kliknij podany adres URL, aby wyświetlić aplikację w przeglądarce. Jeśli masz niestandardowy adres URL domeny, możesz poinstruować Netlify, aby używał go w Twojej witrynie, aktualizując adres URL w ustawieniach witryny.

Wdróż za pomocą funkcji przeciągnij i upuść

To najprostsza metoda wdrożenia aplikacji React na Netlify. Wystarczy przeciągnąć i upuścić folder kompilacji do interfejsu użytkownika typu „przeciągnij i upuść” Netlify.

  1. Na desce rozdzielczej Netlify wybierz Strona patka. Następnie kliknij Dodaj nową witrynę a następnie wybierz Wdrażaj ręcznie z rozwijanych opcji menu.
  2. Na stronie funkcji przeciągnij i upuść wybierz folder zawierający pliki kompilacji React i upuść go w tym interfejsie użytkownika. Projekt zostanie natychmiast wdrożony na Netlify. Alternatywnie możesz kliknąć Przeglądaj, aby przesłać aby wybrać folder kompilacji z systemu plików.

Wdróż za pomocą interfejsu wiersza poleceń Netlify

Korzystając z interfejsu wiersza poleceń (CLI) Netlify, możesz wdrożyć swoją aplikację React bezpośrednio z terminala. Ponadto interfejs wiersza polecenia Netlify umożliwia skonfigurowanie ciągłego wdrażania, dzięki czemu po zatwierdzeniu i przesłaniu nowych aktualizacji do repozytorium Git są one wdrażane automatycznie.

  1. Uruchom poniższe polecenie na swoim terminalu, aby zainstalować CLI Netlify: 
    np zainstalować netlify-cli -g
  2. Teraz uruchom poniższe polecenie, aby wdrożyć aplikację. Przed wdrożeniem upewnij się, że znajdujesz się w katalogu roboczym projektu. 
    wdrożyć netlify
    CLI Netlify wyświetli monit o zezwolenie na wprowadzanie zmian na koncie. Po udzieleniu zgody podaj nazwę konta zespołu, które podałeś podczas rejestracji, następnie wybierz, czy chcesz połączyć katalog aplikacji z istniejącą witryną internetową, czy też utworzyć i skonfigurować nowy jeden. Zakończ, podając niestandardową nazwę witryny i nazwę folderu kompilacji.
  3. CLI wdroży wersję roboczą Twojej aplikacji. Sprawdź, czy wszystko działa zgodnie z oczekiwaniami.
  4. Na koniec uruchom poniższe polecenie, aby wdrożyć aplikację w środowisku produkcyjnym. 
    wdrożyć netlify --szturchać

Porównanie trzech metod wdrażania

Metoda importu GitHub jest najbardziej wydajna w przypadku wdrażania aplikacji produkcyjnych, ponieważ umożliwia łączenie swoje repozytorium Git bezpośrednio do Netlify i synchronizuj swój kod z ich działającą stroną internetową lub aplikacją. Kiedy zatwierdzisz i wypchniesz zmiany do swojego repozytorium Git, Netlify automatycznie zaktualizuje witrynę.

Metoda „przeciągnij i upuść” jest prostsza w przypadku wdrażania witryn statycznych, ponieważ nie wymaga kodowania ani konfiguracji. Nie pozwala jednak na automatyczne aktualizacje, gdy wprowadzasz zmiany w swoim repozytorium.

Metoda CLI jest najbardziej wszechstronna, ponieważ daje pełną kontrolę nad procesem wdrażania i pozwala na niestandardowe konfiguracje. Ta metoda jest najlepsza, jeśli masz już dobrą wiedzę na temat Netlify i swobodnie pracujesz z wierszem poleceń.

Wszystkie trzy metody są przydatne do wdrażania aplikacji w Netlify. Ostatecznie wybór, którego użyć, będzie zależał od potrzeb każdego indywidualnego projektu.

Używanie Netlify do wdrażania innych aplikacji

Netlify to potężne i wszechstronne narzędzie, którego można używać do wdrażania aplikacji innych niż React. Możesz go używać do wdrażania i hostowania statycznych stron internetowych i dynamicznych aplikacji zbudowanych przy użyciu różnych platform, takich jak Angular.

Przyjazny dla użytkownika interfejs ułatwia konfigurowanie, zarządzanie i wdrażanie interfejsów API.