Jak wdrożyć aplikację Next.js na cPanel (przewodnik)

Opublikowany: 2023-07-17
Spis treści
  • Czym jest plik Next.js
  • Co to jest cPanel
  • Wdróż aplikację Next.js na cPanel
  • Plusy i minusy wdrażania NextJs do cPanel
  • Często zadawane pytania
  • Inne zasoby
  • Wniosek

Nauka wdrażania aplikacji Next.js na cPanel w sposób płynny i skuteczny. Poprowadzę Cię krok po kroku przez ten proces.

Zanim zagłębimy się w szczegóły, rozpakujmy, czym są Next.js i cPanel, na wypadek, gdybyś nie znał tych warunków.

Czym jest plik Next.js

Next.js to zgrabny framework oparty na React.js. To kreator, jeśli chodzi o tworzenie aplikacji do renderowania po stronie serwera (SSR). React.js domyślnie obsługuje tylko tworzenie aplikacji jednostronicowych (SPA). Jednak Next.js wskakuje z atrakcyjną funkcją SSR. Co jeszcze? Next.js oferuje między innymi system routingu oparty na plikach.

Co to jest cPanel

Przenoszę do cPanelu. Pomyśl o tym jako o oprogramowaniu upraszczającym zarządzanie serwerem. Wnosi do twojego stołu mnóstwo narzędzi. Menedżer plików, Menedżer bazy danych i Menedżer nazw domen to tylko kilka przykładów.

Teraz, gdy zaprzyjaźniliśmy się z Next.js i cPanel, przejdźmy do naszej głównej misji: wdrożenia aplikacji Next.js na cPanel. Zakładając, że masz aplikację Next.js, hosta internetowego z cPanel i połączoną nazwę domeny, marsz naprzód.

Wdróż aplikację Next.js na cPanel

Krok 1 : Rozpocznij od skonfigurowania niestandardowego serwera Next.js. Potrzebujesz pliku server.js w katalogu głównym projektu, wypełnionego potrzebnym kodem. Poszukaj oficjalnego przewodnika po Next.js, aby uzyskać pomoc.

 const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on http://${hostname}:${port}`) }) })

Krok 2 : Popraw plik package.json. Ten krok sprawia, że ​​środowisko jest „gotowe do produkcji” i aktywuje plik server.js.

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

Krok 3 : Czas na zbudowanie aplikacji Next.js. Możesz to zrobić za pomocą polecenia npm run build lub yarn run build w swoim terminalu.

Krok 4 : Po kompilacji zlokalizuj pliki projektu Next.js w menedżerze plików. Jeśli nie widzisz ukrytych plików, włącz widoczność. Unikaj folderów node_modules i .git, plików README.md i .gitignore. Wybierz wszystkie inne pliki i foldery i utwórz plik ZIP.

Krok 5 : Teraz zaloguj się do swojego hostingu cPanel. Prześlij i rozpakuj plik ZIP do folderu głównego swojej nazwy domeny.

Krok 6 : Twoje pliki projektu są gotowe. Przejdź do sekcji Oprogramowanie w swoim cPanelu. Kliknij opcję Skonfiguruj aplikację Node.js, a następnie przycisk + Utwórz aplikację. Skonfiguruj aplikację Node.js, pamiętając o wersji Node.js, trybie aplikacji produkcyjnej, katalogu głównym aplikacji, adresie URL i pliku startowym (server.js).

Zakończ klikając UTWÓRZ. Po utworzeniu zatrzymaj go na chwilę. Przewiń w dół do sekcji Wykryte pliki konfiguracyjne. Uruchom instalację NPM, aby pobrać wszystkie pakiety Node.js. Na koniec kliknij URUCHOM APLIKACJĘ.

Proszę bardzo! Otwórz swoją nazwę domeny w przeglądarce. Twoja aplikacja Next.js jest już dostępna. Świetna robota w pomyślnym wdrożeniu!

Udostępnianie tej metody wdrażania aplikacji Next.js na cPanel było radością. Powodzenia i szczęśliwego kodowania!

Plusy i minusy wdrażania NextJs do cPanel

Wdrażanie aplikacji Next.js na cPanel ma wiele zalet. Oto kilka zalet i wad do rozważenia.

Zalety :

  1. Przyjazny dla użytkownika : cPanel zapewnia łatwy w użyciu interfejs graficzny, który upraszcza proces wdrażania.
  2. Automatyzacja : cPanel zawiera wiele zautomatyzowanych narzędzi, które mogą obsługiwać zadania, takie jak tworzenie baz danych, zarządzanie plikami stron internetowych, konfigurowanie poczty e-mail i inne.
  3. Wszechstronność : cPanel obsługuje szeroką gamę aplikacji, w tym aplikacje Node.js, takie jak te zbudowane za pomocą Next.js.

Wady :

  1. Ograniczona elastyczność : Chociaż cPanel jest łatwy w użyciu, może czasami ograniczać elastyczność i kontrolę nad środowiskiem serwera ze względu na uproszczony interfejs.
  2. Potencjalne problemy ze zgodnością : niektórzy użytkownicy zgłaszali problemy podczas wdrażania aplikacji Next.js na współdzielonych platformach hostingowych, takie jak występowanie błędów podczas procesu kompilacji.

Często zadawane pytania

Jakie są zalety i ograniczenia hostingu strony Next.js na cPanel?

Hosting witryny Next.js na cPanel może mieć kilka zalet, takich jak oszczędność kosztów i zachowanie możliwości Next.js. Należy jednak pamiętać o pewnych ograniczeniach. Na przykład cPanel nie obsługuje funkcji bezserwerowych i automatycznej optymalizacji statycznej. Decyzja o hostowaniu na cPanelu powinna opierać się na indywidualnych preferencjach i potrzebach biznesowych.

Co robi konfiguracja pliku .htaccess podczas wdrażania aplikacji Next.js na cPanel?

Konfiguracja pliku .htaccess jest krytyczną częścią wdrażania aplikacji Next.js na cPanel. Ten plik kontroluje zachowanie serwera, gdy napotka on określone warunki. Konkretna konfiguracja podana w przykładzie pomaga w prawidłowej obsłudze żądań i przekierowań.

Co się stanie, jeśli napotkam awarie lub problemy z przekierowaniem podczas wdrażania aplikacji Next.js na cPanel?

Jeśli podczas wdrażania aplikacji Next.js na cPanel wystąpią awarie lub problemy z przekierowaniem, jednym z rozwiązań może być utworzenie pliku startowego o nazwie app.js w folderze głównym. W tym scenariuszu musisz uruchomić swoją aplikację jako aplikację Node.js.

Jak mogę wyłączyć optymalizację obrazu podczas wdrażania aplikacji Next.js na cPanel?

Można wyłączyć optymalizację obrazu podczas wdrażania aplikacji Next.js na cPanel, ale dokładne instrukcje nie zostały uwzględnione w dostarczonych informacjach. Szczegółowe instrukcje znajdziesz w oficjalnej dokumentacji Next.js lub odpowiednich samouczkach.

Inne zasoby

Najlepsi dostawcy hostingu Next.JS

Najlepsi dostawcy hostingu Node.js

Wniosek

Chociaż wdrożenie aplikacji Next.js na cPanel może wiązać się z kilkoma wyzwaniami, korzyści często przewyższają wady. Prostota i automatyzacja oferowane przez cPanel sprawiają, że proces wdrażania jest prosty i łatwy w zarządzaniu, nawet dla programistów, którzy są nowicjuszami w tym procesie. Dzięki temu przewodnikowi powinieneś być teraz lepiej przygotowany do wdrażania aplikacji Next.js w cPanel.