8 bezpłatnych usług hostingu aplikacji React11 min read

Stworzyłeś więc aplikację React, ale nie wiesz, jak i gdzie ją hostować. W tym artykule przeprowadzimy Cię przez 8 bezpłatnych usług hostingowych React i pokażemy, jak je wdrożyliśmy tę aplikację React korzystając z każdego z nich, i opowiedzieć, czego się nauczyliśmy w trakcie tego procesu.

Naszą aplikację zbudowaliśmy w Figma przy użyciu Anima wtyczka, która pozwoliła nam dodać funkcjonalność, responsywność i multimedia wyeksportuj gotowy kod React dla całego interfejsu użytkownika. Zaprojektowanie i wdrożenie zajęło nam jeden dzień.

Gdzie bezpłatnie hostować aplikację React

Istnieje coraz większa liczba rozwiązań hostingu bezserwerowego dzięki rozwojowi platform opartych na komponentach, takich jak React. Obecnie dominującymi platformami są Amazon AWS, Microsoft Azure i Google Cloud. Jednakże obserwuje się coraz większą tendencję w kierunku dedykowanych usług hostingu frontendowego, które wymagają mniej wysiłku i umożliwiają szybkie rozpoczęcie pracy — a większość z nich obejmuje CI/CD. Oto 8 przetestowanych przez nas bezpłatnych usług hostingu aplikacji React:

1. Netlify

2. Vercel

3. Wzmocnij AWS

4. Baza ogniowa

5. Strony GitHub

6. Strony GitLaba

7. Renderuj

8. Fala

Przyjrzyjmy się bardziej szczegółowo bezpłatnym usługom hostingu aplikacji React i pokażmy, jak wdrożyliśmy aplikację React przy użyciu każdej z nich. 

Netlify

Tło

Netlify powstała w 2014 roku i od początku skupiała się na hostingu statycznych stron internetowych. Przyciągnął wielu programistów ze względu na hojny darmowy poziom. Kilka lat później Netlify stało się jednym z najpopularniejszych hostów JAMstack i statycznych witryn internetowych.

Jak używać

1. W idealnym przypadku zarejestrujesz się lub zalogujesz za pomocą GitHub. Dzięki temu będziesz miał dostęp do repozytoriów w swoim profilu i szybko je wdrożysz.
2. Po zalogowaniu kliknij „Dodaj nową witrynę” i wybierz „Importuj istniejący projekt”.
3. Następnie kliknij GitHub jako swojego dostawcę.
4. Wybierz „stronę banku” lub jakąkolwiek inną nazwę swojego projektu.
5. Dostosuj ustawienia wdrażania (w przypadku naszej witryny ustawienia domyślne działają idealnie), a następnie kliknij „Wdróż witrynę”.
6. Po wdrożeniu możesz go wyświetlić na publicznym urządzeniu URL, które możesz udostępnić całemu światu. Tak!

Oto aplikacja na żywo wdrożona w Netlify.

Plusy i minusy

Netlify jest łatwe w konfiguracji i wdrożeniu, nie wspominając, że jest to jedna z najszybszych usług, które tutaj testowaliśmy. Jedną wadą jest to, że jeśli potrzebujesz współpracowników i/lub zespołu, musisz przejść na plan płatny.

Vercel

Tło

Vercel (pierwotnie znany jako Zeit) powstał w 2015 roku i szybko zyskał sławę. Są opiekunami Next.js, popularnego frameworka React do tworzenia stron internetowych. Oferują bezpłatny poziom dla niekomercyjnych witryn internetowych, a także sposoby korzystania z sieci Edge do funkcji bezserwerowych.

Jak używać

1. Zaloguj się lub zarejestruj w GitHub.
2. Kliknij menu rozwijane „Dodaj nowy…” i wybierz „Projekt”.                                                             
3. Wybierz „stronę banku” lub swój ulubiony projekt React.
4. Wybraliśmy ustawienia domyślne ustawień wdrażania, a następnie kliknęliśmy „Wdróż”.
5. Po pewnym czasie udało nam się uruchomić witrynę.

Oto na żywo URL.

Plusy i minusy

Vercel potrzebuje trochę czasu na buforowanie części instalacyjnej procesu wdrażania, ale później jest to jedna z najszybszych usług. Pokazuje podgląd wdrożenia dla każdej wypchniętej gałęzi i robi to szybko ze względu na buforowanie.

Wzmocnij AWS

Tło

AWS to ogromna kolekcja produktów w chmurze, a Amplify jest reklamowana jako łatwy sposób na zdobycie niektórych z nich. Dzięki AWS Amplify możesz szybko budować, dostarczać i hostować aplikacje z pełnym stosem na AWS, z elastycznością pozwalającą na wykorzystanie szerokiego zakresu usług AWS w miarę ewolucji przypadków użycia.

Jak używać

1. Zarejestruj się lub zaloguj do AWS, następnie wyszukaj AWS Amplify i kliknij „Rozpocznij”.
2. Wybierz GitHub i autoryzuj go (zezwoliłem na to tylko dla repozytorium „strona internetowa banku”).
3. Wybierz repozytorium w sekcji „Ostatnio zaktualizowane repozytoria”.
   1. W ustawieniach kompilacji będziemy musieli zmienić plik katalog bazowy aby nasza aplikacja była odl tak: Następnie ustawienia kompilacji powinny wyglądać następująco:
4. W następnym kroku kliknij „Zapisz i wdróż”.
5. Po pewnym czasie strona będzie wdrożona i gotowa do użytku.

I żyjemy! Oto URL.

Plusy i minusy

Musisz edytować katalog bazowy w specyfikacji wdrożenia — nie jest to rozpoznawane od razu po wyjęciu z pudełka. Interfejs użytkownika wydaje się nieco nieporadny, ale to kwestia osobistych preferencji. AWS Amplify ma ogromny potencjał, ponieważ wiele innych usług internetowych AWS jest na wyciągnięcie ręki.

Baza ogniowa

Tło

Firebase to usługa Google najbardziej znana jako platforma przechowywania danych w czasie rzeczywistym. Ma jednak również opcję hostingu dla statycznych witryn internetowych i mikrousług Express.js lub API, a także obsługuje wersję zapoznawczą URL dla gałęzi, nad którymi pracuje Twój zespół. Podobnie jak w przypadku Netlify, Vercel i innych, obsługuje wdrożoną zawartość za pośrednictwem sieci CDN.

Jak używać

1. Zainstaluj narzędzia Firebase z npm install -g narzędzia Firebase.
2. Zaloguj się do Firebase za pomocą logowanie do Firebase. Po zalogowaniu powinieneś zobaczyć komunikat podobny do tego:
3. Przejdź do katalogu projektu i uruchom inicjacja bazy ogniowej, powinieneś zobaczyć coś takiego: Wybierz opcję konfiguracji plików dla Hostingu Firebase z opcjonalnymi wdrożeniami GitHub Action. Następnie możesz utworzyć projekt bezpośrednio z CLI lub użyć interfejsu Firebase, aby to zrobić, a później połączyć. Stworzyliśmy projekt z wiersza poleceń i tak odpowiedzieliśmy na powstałe pytania:                                                                Następnie zostaną utworzone proste pliki `firebase.json` i `.firebaserc`.
4. Następnie biegnij wdrożenie bazy ogniowej aby faktycznie wdrożyć pliki z odlinformator. Jeśli brakuje katalogu, pamiętaj o uruchomieniu npm uruchom kompilację jako pierwszy wygenerował pliki. The wdrożenie bazy ogniowej polecenie powinno wygenerować dane wyjściowe podobne do poniższego przykładu:

Teraz możesz obejrzyj stronę internetową na dostarczonym URL. Tak! 

Plusy i minusy

Firebase jest dość prosty, ale kiedy skonfigurujesz go w swoim projekcie, pytania, na które musisz odpowiedzieć, są nieco mylące. Na szczęście odpowiedzieliśmy na nie w powyższej sekcji, ale przed kontynuowaniem wymagają one zrozumienia rzeczywistych funkcji Firebase. Poza tym Firebase można szybko wdrożyć i może wygenerować URL, w którym można wyświetlić podgląd wdrożonych plików. Można to również łatwo zautomatyzować za pomocą wdrożeń GitHub Action za pomocą interfejsu CLI, co jest fajne.

Strony GitHub

Tło

GitHub Pages istnieje już od dłuższego czasu i jest to łatwy sposób na publikowanie dokumentów lub osobistej strony internetowej bezpośrednio z GitHub. Świetnie nadaje się do treści statycznych i wiele osób używa go do wdrażania prostych witryn przy minimalnych nakładach inwestycyjnych. Korzystanie z niego jest bezpłatne, jeśli Twój projekt jest publiczny. Jest to szybki i tani sposób na hostowanie strony internetowej.

Jak używać

Pamiętaj, że musisz edytować plik Aplikacja.jsx gdzie dzwonimy Routera i dodaj nazwa podstawowa do niego, aby dopasować nazwę repozytorium. A więc w ten sposób Aplikacja.jsx powinno wyglądać:                                                                                        Musimy zmienić nazwa podstawowa ponieważ strony GitHub wdrożą witrynę internetową na URL w tym formularzu `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Strona internetowa nie będzie działać poprawnie bez ustawionej nazwy bazowej dla reagują-router-dom.

1. Po zmianie kodu musimy dokonać instalacji strony gh pakiet z:
2. I dodaj A wdrożyć wstępnie i a wdrożyć skrypt do pakiet.json:
3. Następnie po prostu biegniemy npm uruchom wdrożenie. To wywoła npm uruchom kompilację i będzie korzystać strony gh opublikować treść odl do osobnej gałęzi na GitHub o nazwie strony gh.
4. Na koniec sprawdź, czy strony gh jest używany dla stron GitHub jak poniżej:

Oto na żywo URL.

Plusy i minusy

Jeśli wdrażasz projekt inny niż Twoja nazwa użytkownika, zostanie on wdrożony w podkatalogu w naszej bezpłatnej domenie w GitHub. Następnie musisz napisać dodatkowy kod obsługujący logikę przebywania w podkatalogu.

W naszym przypadku nie obsługuje ciągłego wdrażania od razu po wyjęciu z pudełka, ale można to skonfigurować. Po skonfigurowaniu można szybko wdrożyć zmiany.

Strony GitLaba

Tło

Podobnie jak GitHub, GitLab ma własne rozwiązanie hostingowe i nazywa je GitLab Pages. Muszę im to dać, łatwiej jest skonfigurować ciągłe wdrożenie na GitLab Pages niż na GitHub Pages.

Jak używać

1. Zarejestruj się lub zaloguj do GitLaba
2. Dodaj repozytorium do GitLab, jeśli jeszcze go tam nie masz. Możesz rozwiń ten, który tam dodałem 
   Podobnie jak w przypadku stron GitHub, musisz edytować plik Aplikacja.jsx gdzie dzwonimy Routera i dodaj  nazwa podstawowa do niego, aby dopasować nazwę repozytorium. Oto ostateczna zmiana:                                                               Musimy zmienić nazwa podstawowa ponieważ strony GitLab wdrożą witrynę na URL tego formularza: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Strona internetowa nie będzie działać poprawnie bez ustawionej nazwy bazowej dla reagują-router-dom.
3. Po dokonaniu edycji i przesłaniu projektu do GitLab przejdź do Ustawienia > Strony, a zostaniesz przywitany czteroetapowym kreatorem umożliwiającym wdrożenie repozytorium w GitLab Pages. 
4. Pierwszym krokiem kreatora jest wprowadzenie obrazu kompilacji. Będziemy używać Node.js LTS.
5. Następnie wprowadzimy polecenie poprzedzające kompilację. The npm ci tutaj wystarczy.
6. Teraz o kroku kompilacji. Musimy przejść —dist-dir public ponieważ GitLab Pages oczekuje, że witryna będzie zbudowana w formacie publiczne informator. Niestety, nie możesz uciec od żadnego innego katalogu.
7. Zatwierdź nowo wygenerowane .gitlab-ci.yml plik, który informuje GitLab, jak wdrożyć Twoją witrynę internetową.
8. Teraz przejdź do sekcji CI/CD -> Pipelines w repozytorium i obserwuj działanie nowo dodanego potoku.
9. Po pewnym czasie zadanie potokowe zostanie zakończone, a witryna zostanie wdrożona na stronach GitLab.

Oto wynik.

Plusy i minusy

Instalowanie pakietów jest powolne i aby je uruchomić, trzeba dodać dodatkowy kod, ale kreator jest niezwykle intuicyjny i wymaga wdrożenia tylko w czterech krokach.

Renderuj

Tło

Render to nowość na rynku, która zostanie wprowadzona na rynek w 2019 roku. Próbuje zakłócić sposób, w jaki ludzie wdrażają swoje usługi (w tym strony statyczne). Na razie mają się dobrze i ich liczba rośnie.

Jak używać

1. Zarejestruj się lub zaloguj do Render.
2. Utwórz nową statyczną witrynę internetową, naciskając przycisk „Nowy” i wybierając „Witryna statyczna”.
3. Wybierz repozytorium, które chcesz wdrożyć.
4. Zachowaj przędza; budowa przędzy polecenie build w ustawieniach kompilacji. Niestety nie działa z npm ci; npm uruchom kompilację tak jak inne usługi. Zmień „Katalog publikowania” na odl i kliknij „Utwórz witrynę statyczną”.
5. Po pewnym czasie Render wdroży kod.

Oto na żywo URL z Render.

Plusy i minusy

Jest naprawdę szybki, ale nie działa dobrze w naszym projekcie z poleceniami `npm ci` i `npm run build`. Wydaje się, że działa tylko „przędza”.

Fala

Tło

Surge istnieje już od jakiegoś czasu. Z prawej strony, ich usługa jest prosta w użyciu i wystarczą tylko jedno lub dwa polecenia, aby wdrożyć statyczną witrynę internetową. Jest bezpłatny, ale oferuje płatny plan w wysokości 30 $ / miesiąc. Stoicyzm narzędzia nadaje mu blasku. Nie jest wymagana żadna skomplikowana konfiguracja, po prostu zainstaluj `surge` i uruchom go z `surge`.

Jak używać

1. Aby się przygotować, biegnij npm uruchom kompilację do generowania wewnątrz plików statycznych odl informator. The wzrost użyje ich do wdrożenia.
2. Biegnij npm install –global wzrost
3. Następnie biegnij wzrost.

Kilka rzeczy, na które warto zwrócić uwagę:
Jeśli uruchamiasz go po raz pierwszy, musisz utworzyć konto w Surge. Nie martw się, to proste. Wystarczy wpisać swój adres e-mail i żądane hasło.

Następnie zostaniesz poproszony o wprowadzenie „projektu”, który powinien być ścieżką do pliku odl informator. Możesz po prostu dołączyć odl do ścieżki, którą otrzymasz, jeśli uruchomisz gwałtowny wzrost wewnątrz wdrażanego repozytorium.

Następnie wprowadź przyszły URL swojej witryny. Spróbuj czegoś wyjątkowego, bo co wzrost oferowane nie zadziałało dla mnie.

Po wejściu URL, wzrost wdroży zawartość z odl do określonego URL. Oto co dostałem:

Plusy i minusy

Jest szybki i prosty i nie wymaga stosowania osobnego interfejsu, ale nie sugeruje dostępnego URL dla Twojej aplikacji.

Czas na wdrożenie każdej usługi hostingowej

Nasze 3 najlepsze bezpłatne usługi hostingowe React

1. Netlify
2. Vercel
3. Fala

Kluczowe wnioski

Po przetestowaniu każdej z bezpłatnych usług hostingu aplikacji React uważamy, że Netlify jest najlepszą z nich. Zapewnia szybkie wdrożenia i wiele funkcji, których możesz potrzebować. Zaraz po tym pojawia się Vercel, który ma wiele funkcji i jest dość szybki po pierwszym wdrożeniu. Następnie mamy Surge, które jest narzędziem do minimalnego wdrażania, które może być dość tanie, jeśli zdecydujesz się na aktualizację.

Zautomatyzuj tworzenie frontendu i wysyłaj aplikację 10 razy szybciej. Dowiedz się więcej.