Opublikuj
aplikację React
Prześlij build produkcyjny z Vite, Create React App albo innego React SPA i opublikuj go z routingiem odpornym na odświeżenie, HTTPS oraz własną domeną, gdy będzie potrzebna.
Prześlij wynik builda, nie projekt źródłowy
Pliki źródłowe Reacta służą do pracy deweloperskiej. DeployPages serwuje statyczne pliki utworzone przez build produkcyjny.
Vite React
Domyślny wynik statyczny Vite trafia do `dist`. Jeśli `vite.config.js` zmienia `build.outDir` albo `base`, prześlij właściwy folder i sprawdź adresy zasobów po publikacji.
Create React App
CRA zapisuje pliki produkcyjne w `build`. Jeśli aplikacja ma działać pod podścieżką, ustawienie `homepage` może wpływać na wygenerowane adresy zasobów.
Inne aplikacje React SPA
Każda konfiguracja Reacta może działać, jeśli tworzy `index.html`, paczkę JavaScriptu, CSS, obrazy, fonty i zasoby gotowe do serwowania jako pliki statyczne.
Dlaczego aplikacje React psują się po publikacji
React SPA nadal zaczyna od jednego dokumentu
Większość aplikacji single-page w React wysyła jeden punkt wejścia HTML, a potem router po stronie klienta decyduje, co pokazać po załadowaniu JavaScriptu.
Lokalnie działa to dobrze, bo serwer deweloperski wie, że ma wracać do `index.html`. Prosty statyczny host może tego nie wiedzieć, dlatego `/dashboard` działa podczas klikania w aplikacji, ale po odświeżeniu zwraca 404.
Co psuje się przy odświeżeniu
Serwer plików statycznych dostaje żądanie `GET /settings` i szuka prawdziwego pliku albo folderu `settings`.
Build Reacta ma zwykle `index.html` oraz zasoby z hashami, więc serwer zwraca 404, zanim React Router zdąży odczytać URL.
Jak DeployPages to obsługuje
DeployPages stosuje fallback SPA dla brakujących tras dokumentu i zwraca `index.html` zamiast twardego 404.
Po załadowaniu dokumentu React startuje, router czyta bieżący adres URL i renderuje właściwy ekran bez ręcznego utrzymywania plików przekierowań.
Dlaczego zespoły tego używają
Prześlij folder `dist` albo `build`. Fallback routingu, HTTPS, kompresja i dostawa statycznych plików są częścią publikacji, a nie checklistą odtwarzaną dla każdej małej aplikacji React.
Kontrole produkcyjne dla aplikacji React
Aplikacja może się kompilować i nadal zawieść online. Sprawdź te elementy przed wysłaniem linku.
Base path zasobów
Jeśli JavaScript albo CSS ładują się z błędnego adresu, strona może zostać pusta. Najczęściej trzeba sprawdzić `base` w Vite albo `homepage` w CRA.
Trasy po stronie klienta
Przetestuj bezpośrednie wejścia i odświeżenia dla ważnych adresów, takich jak `/login`, `/pricing`, `/dashboard` i wszystkie linki udostępniane użytkownikom.
Endpointy API
Statyczna publikacja React może wywoływać zewnętrzne API, ale sama nie uruchamia backendu. Sekrety serwera i prywatne klucze API nie powinny trafić do paczki frontendu.
Zmienne środowiskowe
Większość narzędzi Reacta wpisuje publiczne wartości środowiskowe do paczki w czasie builda. Zmiana zmiennej po przesłaniu zwykle wymaga ponownego builda.
Proces publikacji React
Zbuduj aplikację
Uruchom build produkcyjny lokalnie, aby React, CSS i zasoby trafiły do statycznego folderu gotowego do publikacji.
Sprawdź folder wynikowy
Upewnij się, że folder zawiera `index.html` oraz wygenerowane zasoby. W Vite zwykle jest to `dist`, a w Create React App `build`.
Prześlij cały folder
Upuść cały folder `dist` albo `build` w DeployPages. Nie przesyłaj samego `index.html`, bo zabraknie stylów i skryptów.
Przetestuj trasę wewnętrzną
Otwórz zagnieżdżoną ścieżkę, odśwież przeglądarkę i sprawdź, czy aplikacja nadal się ładuje zamiast zwracać 404 hosta.
Typowe problemy przy publikacji React
Biały ekran po publikacji
Otwórz DevTools i najpierw sprawdź brakujące pliki JS albo CSS. Błędny base path, brakujące zasoby albo przesłanie złego folderu powodują wiele pustych stron.
Odświeżenie zagnieżdżonej trasy zwraca 404
Host statyczny próbuje znaleźć prawdziwy plik dla tej ścieżki. Użyj fallbacku SPA, żeby brakujące trasy dokumentu zwracały `index.html`.
Zasoby działają lokalnie, ale nie online
Sprawdź ścieżki absolutne, ustawienia public base oraz to, czy przesłany folder zawiera katalog z wygenerowanymi zasobami.
Zmiany zmiennych środowiskowych nie są widoczne
Zbuduj aplikację ponownie z nowymi publicznymi wartościami i prześlij nowy wynik. Opublikowana paczka nie odczyta prywatnych zmiennych serwerowych w czasie działania.
FAQ publikacji React
Q:Dlaczego aplikacja React pokazuje biały ekran po publikacji?
Najczęściej przyczyną są złe ścieżki zasobów albo brakujące paczki JavaScriptu. W Vite sprawdź `base`; w CRA sprawdź `homepage` i upewnij się, że przesłany folder zawiera wygenerowane zasoby.
Q:Czy muszę ręcznie konfigurować nginx albo przekierowania?
Nie. DeployPages obsługuje fallback SPA dla brakujących tras, więc nie musisz utrzymywać własnych rewrite'ów serwerowych.
Q:Czy przesłać folder projektu czy folder dist?
Prześlij folder produkcyjny, nie projekt źródłowy. W Vite zwykle jest to `dist`, a w Create React App `build`.
Q:Czy mogę używać zmiennych środowiskowych?
Tak, ale są rozwiązywane podczas lokalnego builda. DeployPages hostuje finalny wynik statyczny, więc w tym procesie nie ma serwerowego wstrzykiwania zmiennych w czasie działania.
Q:Czy aplikacja React może wywoływać API po publikacji?
Tak. Statyczna aplikacja React może wywoływać zewnętrzne API z przeglądarki. Pamiętaj tylko, że wszystko w kodzie frontendu jest widoczne dla użytkownika, więc prywatne sekrety wymagają backendu.
Q:Czy mogę tu opublikować też Next.js?
Tak, jeśli wyeksportujesz go jako stronę statyczną. Użyj `output: 'export'` i prześlij wygenerowany katalog `out`. Trasy renderowane serwerowo wymagają środowiska poza statycznym hostingiem.
Q:Czy mogę później podłączyć własną domenę?
Tak. Gdy strona działa, dodaj domenę w konsoli i wykonaj instrukcje DNS. DeployPages przygotowuje HTTPS automatycznie po poprawnym rozwiązaniu rekordu.