Jak zainstalować React.js w cPanel: Przewodnik 2024

Opublikowany: 2024-09-01
Spis treści
  • Warunki wstępne
  • Krok 1: Przygotuj aplikację React.js
  • Krok 2: Skonfiguruj środowisko cPanel
  • Krok 3: Skonfiguruj ustawienia serwera
  • Krok 4: Finalizowanie i testowanie
  • Rozwiązywanie problemów
  • Wniosek

React.js stała się jedną z najpopularniejszych bibliotek JavaScript do budowania dynamicznych, interaktywnych interfejsów użytkownika. Chociaż jest on powszechnie używany w frameworkach backendowych, takich jak Node.js, wielu programistów stara się wdrażać swoje aplikacje React.js w środowiskach hostingu współdzielonego, które korzystają z cPanel, popularnego panelu sterowania do zarządzania kontami hostingowymi.

Ten artykuł poprowadzi Cię przez proces instalowania i wdrażania aplikacji React.js przy użyciu cPanel, nawet jeśli Twój dostawca usług hostingowych nie obsługuje specjalnie frameworków JavaScript.

Możesz także przeczytać: 7 najlepszych hostingów dla aplikacji React 2024 (porównanie)

Warunki wstępne

Przed przystąpieniem do procesu instalacji należy spełnić kilka warunków wstępnych:

  1. Gotowa do wdrożenia aplikacja React.js : upewnij się, że Twoja aplikacja React jest kompletna i gotowa do produkcji. Oznacza to, że wszystkie prace programistyczne zostały zakończone i można przystąpić do tworzenia wersji aplikacji, którą można udostępnić użytkownikom.
  2. Dostęp do cPanel : Potrzebujesz dostępu do cPanel, który zapewnia Twoja usługa hostingowa. Większość dostawców hostingu współdzielonego oferuje cPanel w ramach swoich usług.(Polecamy Hostingera z naszą ofertą specjalną z wykorzystaniem kodu kuponu „ Bez kodu ”)
  3. Nazwa domeny : zarejestrowana domena lub subdomena, w której wdrożysz aplikację React. Jeśli jeszcze tego nie skonfigurowałeś, możesz użyć istniejącej domeny lub utworzyć subdomenę poprzez cPanel.

Krok 1: Przygotuj aplikację React.js

Wygeneruj kompilację produkcyjną

Pierwszym krokiem we wdrażaniu aplikacji React.js w cPanel jest utworzenie wersji produkcyjnej aplikacji. Ta kompilacja jest zoptymalizowana pod kątem wydajności, dzięki czemu działa wydajnie w Internecie. Poniższe kroki należy wykonać na komputerze lokalnym.

  1. Otwórz terminal : Przejdź do katalogu projektu React za pomocą terminala lub wiersza poleceń.
  2. Uruchom polecenie kompilacji : npm run build Jeśli używasz Yarn jako menedżera pakietów, użyj: yarn build To polecenie generuje folder build w katalogu projektu. Folder build zawiera wszystkie pliki statyczne niezbędne do uruchomienia aplikacji, w tym pliki HTML, CSS i JavaScript.

Podgląd kompilacji (opcjonalnie)

Przed wdrożeniem warto sprawdzić lokalnie wersję produkcyjną, aby upewnić się, że wszystko działa poprawnie. Można to zrobić za pomocą prostego narzędzia serwerowego:

  1. Zainstaluj Serve Globalnie : npm install -g serve
  2. Udostępnij kompilację : serve -s build To polecenie uruchomi lokalny serwer i udostępni Twoją aplikację z katalogu build , umożliwiając podgląd jej w przeglądarce.

Krok 2: Skonfiguruj środowisko cPanel

Gdy Twoja aplikacja React będzie gotowa do wdrożenia, musisz skonfigurować środowisko cPanel.

Utwórz subdomenę (opcjonalnie)

Jeśli chcesz, aby Twoja aplikacja React była dostępna poprzez subdomenę (np. react.yourdomain.com ), musisz ją utworzyć w cPanelu:

  1. Zaloguj się do cPanel : Użyj portalu logowania swojego dostawcy usług hostingowych, aby uzyskać dostęp do cPanel.
  2. Przejdź do subdomen : w sekcji Domeny kliknij „Subdomeny”.
  3. Utwórz nową subdomenę : Wprowadź żądaną nazwę swojej subdomeny i określ katalog główny dokumentu. Jeśli pozostawisz ustawienia domyślne, cPanel utworzy nowy katalog w public_html z nazwą Twojej subdomeny.

Prześlij pliki kompilacji

Gdy wersja produkcyjna jest już gotowa, możesz teraz przesłać ją na swój serwer.

  1. Uzyskaj dostęp do Menedżera plików : W cPanel znajdź „Menedżer plików” w sekcji „Pliki”.
  2. Przejdź do żądanego katalogu : Jeśli utworzyłeś subdomenę, przejdź do odpowiedniego katalogu (np. public_html/react ). Jeśli wdrażasz w domenie głównej, użyj katalogu public_html .
  3. Prześlij folder kompilacji :
    • Najpierw skompresuj folder build na komputerze lokalnym do pliku ZIP.
    • Użyj przycisku „Prześlij” w Menedżerze plików, aby przesłać ten plik ZIP do żądanego katalogu.
    • Po przesłaniu kliknij plik prawym przyciskiem myszy i wybierz „Wyodrębnij”, aby rozpakować zawartość

Krok 3: Skonfiguruj ustawienia serwera

Po przesłaniu plików kompilacji może być konieczne skonfigurowanie niektórych ustawień serwera, zwłaszcza jeśli Twoja aplikacja React korzysta z routingu po stronie klienta z React Router.

Skonfiguruj .htaccess (opcjonalnie)

Jeśli Twoja aplikacja korzysta z React Router, który opiera się na API historii pushState HTML5, Twój serwer musi być skonfigurowany do prawidłowej obsługi żądań. Jest to szczególnie ważne, jeśli użytkownicy mogą nawigować bezpośrednio do innych tras niż strona główna.

  1. Zlokalizuj lub utwórz plik .htaccess :
    • Sprawdź, czy w katalogu public_html lub subdomenie znajduje się plik .htaccess .
    • Jeśli nie, utwórz nowy plik o nazwie .htaccess .
  2. Dodaj reguły routingu :
    • Otwórz plik .htaccess i dodaj następującą konfigurację: kod bashCopy Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Ta konfiguracja zapewnia, że ​​wszystkie żądania są kierowane przez plik index.html , który jest niezbędny w przypadku aplikacji jednostronicowych, takich jak te zbudowane w React​.

Krok 4: Finalizowanie i testowanie

Po przesłaniu i skonfigurowaniu wszystkiego następnym krokiem jest sfinalizowanie wdrożenia i upewnienie się, że wszystko działa zgodnie z oczekiwaniami.

Sprawdź uprawnienia do plików

Upewnij się, że pliki i katalogi mają odpowiednie uprawnienia, aby serwer WWW mógł uzyskać do nich dostęp. Ogólnie rzecz biorąc, katalogi powinny mieć uprawnienia ustawione na 755 a pliki na 644 .

Przetestuj wdrożenie

Odwiedź swoją domenę lub subdomenę (np. react.yourdomain.com ) w przeglądarce internetowej, aby sprawdzić, czy Twoja aplikacja React działa płynnie. Sprawdź wszystkie strony i funkcje, aby upewnić się, że wszystko działa poprawnie.

Jeśli napotkasz jakiekolwiek problemy, narzędzia programistyczne przeglądarki mogą być pomocne w diagnozowaniu problemów. Dodatkowo dzienniki błędów cPanel mogą zapewnić wgląd w problemy po stronie serwera.

Rozwiązywanie problemów

Wdrożenie aplikacji React na cPanel może czasami powodować problemy. Oto kilka typowych problemów i ich rozwiązań:

  • Błędy routingu : jeśli nawigacja do różnych stron aplikacji powoduje błędy 404, upewnij się, że plik .htaccess jest poprawnie skonfigurowany do obsługi routingu po stronie klienta.
  • Błędy nie odnalezienia pliku : Sprawdź dokładnie, czy wszystkie pliki z folderu build zostały przesłane poprawnie i czy znajdują się we właściwym katalogu na serwerze.
  • Nieprawidłowe uprawnienia do plików : Jeśli pliki nie ładują się, sprawdź, czy uprawnienia do plików są ustawione prawidłowo ( 755 dla katalogów i 644 dla plików).
  • Problemy z buforowaniem : czasami zmiany mogą nie pojawić się natychmiast z powodu buforowania. Wyczyść pamięć podręczną przeglądarki lub spróbuj uzyskać dostęp do witryny w trybie incognito, aby sprawdzić, czy problem nadal występuje.

Wniosek

Wdrożenie aplikacji React.js na serwerze hostowanym w cPanel może początkowo wydawać się trudne, szczególnie jeśli jesteś przyzwyczajony do bardziej zautomatyzowanych procesów wdrażania z usługami takimi jak Vercel lub Netlify lub przeczytałeś nasz artykuł: 10 najlepszych dostawców hostingu Node.js w roku 2024 ( Tanie i bezpłatne). Jednakże, wykonując kroki opisane w tym przewodniku, możesz pomyślnie uruchomić aplikację React na cPanel.

Proces ten obejmuje przygotowanie aplikacji React do produkcji, skonfigurowanie środowiska cPanel, skonfigurowanie niezbędnych ustawień serwera i rozwiązywanie wszelkich pojawiających się problemów. Po ukończeniu Twoja aplikacja React.js będzie działać i będzie dostępna dla świata za pośrednictwem Twojej domeny lub subdomeny.

W miarę zdobywania większego doświadczenia możesz zgłębiać bardziej zaawansowane tematy, takie jak integracja usług zaplecza, konfigurowanie potoków ciągłego wdrażania lub dalsza optymalizacja wydajności. Póki co, możesz cieszyć się dzieleniem się swoimi projektami React ze światem!