8 безплатни услуги за хостинг на приложения React1 min read

Така че сте създали приложение React, но не сте сигурни как или къде да го хоствате. В тази статия ще ви преведем през 8 безплатни React хостинг услуги, ще ви покажем как внедрихме това приложение React използвайки всеки от тях и да ви кажем какво сме научили в процеса.

Създадохме нашето приложение в Figma, използвайки Anima плъгин, който ни позволи да добавим функционалност, отзивчиво поведение и богата медия експортирайте готов за разработка React код за целия потребителски интерфейс. Отне ни ден за проектиране и внедряване.

Къде да хоствате вашето приложение React безплатно

Има все по-голям брой решения за хостинг без сървър благодарение на възхода на базирани на компоненти рамки като React. Amazon AWS, Microsoft Azure и Google Cloud в момента са доминиращите платформи. Въпреки това, има нарастваща промяна към специализирани хостинг услуги, които изискват по-малко усилия и могат да ви накарат да работите за нула време – и повечето включват CI/CD. Ето 8-те безплатни услуги за хостинг на приложения React, които тествахме:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub Страници

6. Страници на GitLab

7. Рендиране

8. Пренапрежение

Нека се потопим в тези безплатни услуги за хостинг на приложения React по-подробно и да демонстрираме как разположихме приложение React, използвайки всяка от тях. 

Netlify

Фон

Netlify е основана през 2014 г. и от самото начало се фокусира върху хостването на статични уебсайтове. Той привлече много разработчици поради щедрото си безплатно ниво. Няколко години по-късно Netlify се превърна в един от най-популярните хостове на JAMstack и статични уебсайтове.

Как да използвате

1. В идеалния случай ще се регистрирате или влезете с GitHub. Това гарантира, че имате достъп до хранилищата във вашия профил и ги разгръщате бързо.
2. След като влезете, щракнете върху „Добавяне на нов сайт“ и изберете „Импортиране на съществуващ проект“.
3. След това щракнете върху GitHub като ваш доставчик.
4. Изберете „уебсайт на банката“ или каквото и да е името на вашия проект.
5. Настройте фино настройките за разполагане (в случая на нашия уебсайт, настройките по подразбиране работят перфектно), след което щракнете върху „Внедряване на сайта“.
6. Веднъж разгърнат, можете да го видите на публичен URL, който можете да споделите със света. Ура!

Ето приложението на живо, внедрено в Netlify.

Плюсове и минуси

Netlify е лесен за настройка и внедряване, да не говорим, че е една от най-бързите услуги, които тествахме тук. Един недостатък е, че ако имате нужда от сътрудници и/или екип, трябва да преминете към платен план.

Vercel

Фон

Vercel (първоначално известен като Zeit) е основан през 2015 г. и бързо става известен. Те са поддържащите Next.js, популярна React рамка за изграждане на уебсайтове. Те предлагат безплатно ниво на некомерсиални уебсайтове, както и начини за използване на тяхната Edge мрежа за функции без сървър.

Как да използвате

1. Влезте или се регистрирайте с GitHub.
2. Кликнете върху падащото меню „Добавяне на нов…“ и изберете „Проект“.                                                             
3. Изберете „банка-сайт“ или любимия си проект React.
4. Отидохме с настройките по подразбиране за настройки за внедряване и след това щракнахме върху „Внедряване“.
5. След известно време разположихме уебсайта.

Ето URL на живо.

Плюсове и минуси

Vercel се нуждае от известно време, за да кешира инсталационната част от процеса на внедряване, но след това е една от най-бързите услуги. Той показва разгръщания за предварителен преглед за всеки клон, който натиснете, и го прави бързо поради кеширането.

AWS Amplify

Фон

AWS е масивна колекция от облачни продукти и Amplify се рекламира като лесен начин да се сдобиете с някои от тях. С AWS Amplify можете бързо да изграждате, доставяте и хоствате приложения с пълен стек на AWS, с гъвкавостта да използвате широчината на услугите на AWS с развитието на случаите на използване.

Как да използвате

1. Регистрирайте се или влезте в AWS, след това потърсете AWS Amplify и щракнете върху „Първи стъпки“.
2. Изберете GitHub и го оторизирайте (разреших го само за репо „банка-уебсайт“).
3. Изберете репото в секцията „Наскоро актуализирани хранилища“.
   1. В настройката за изграждане ще трябва да променим baseDirectory за да бъде нашето приложение разст така: След това настройките за изграждане трябва да изглеждат така:
4. В следващата стъпка щракнете върху „Запазване и внедряване“.
5. След известно време уебсайтът ще бъде разгърнат и готов за използване.

И ние сме на живо! Ето URL.

Плюсове и минуси

Трябва да редактирате baseDirectory в спецификацията за внедряване – не се разпознава веднага. Потребителският интерфейс изглежда малко тромав, но това е лично предпочитание. Има огромен потенциал за AWS Amplify, защото много други уеб услуги на AWS са на една ръка разстояние.

Firebase

Фон

Firebase е услуга на Google, която е най-известна като платформа за съхранение в реално време. Но също така има опция за хостинг за статични уебсайтове и Express.js микроуслуги или APIs и поддържа URLs за предварителен преглед за клонове, върху които вашият екип работи. Както при Netlify, Vercel и други, той обслужва разгърнатото съдържание през CDN мрежа.

Как да използвате

1. Инсталирайте firebase-инструменти с npm install -g firebase-tools.
2. Влезте във Firebase с влизане във firebase. След като влезете, трябва да видите съобщение като това:
3. Преместете се в директорията на проекта и стартирайте firebase инициал, трябва да видите нещо подобно: Изберете опцията за конфигуриране на файлове за Firebase хостинг с незадължителни внедрявания на GitHub Action. След това можете да създадете проект направо от CLI или да използвате Firebase UI, за да го направите и по-късно да го свържете. Създадохме проекта от командния ред и ето как отговорихме на произтичащите въпроси:                                                                  След това ще бъдат създадени прости файлове `firebase.json` и `.firebaserc`.
4. Тогава бягай разгръщане на firebase за действително разгръщане на файловете от разстуказател. Ако директорията липсва, не забравяйте да стартирате npm изпълнява компилация първо да генерира файлове. The разгръщане на firebase командата трябва да генерира изход, подобен на примера по-долу:

Сега можете прегледайте уебсайта на предоставения URL. Ура! 

Плюсове и минуси

Firebase е доста прост, но когато го настроите във вашия проект, въпросите, на които трябва да отговорите, са малко объркващи. За щастие отговорихме на тях вместо вас в раздела по-горе, но те изискват разбиране на действителните функции на Firebase, преди да продължите. Освен това, Firebase е бърз за внедряване и може да генерира URL, където можете да визуализирате инсталираните файлове. Можете също така лесно да го автоматизирате с внедряването на GitHub Action с CLI, което е изрядно.

GitHub Страници

Фон

GitHub Pages съществува от доста време и е лесен начин за публикуване на документи или личен уебсайт директно от GitHub. Прекрасен е за статично съдържание и много хора го използват за разгръщане на прости сайтове с минимални инвестиции. Безплатно е за използване, ако вашият проект е публичен и е бърз и евтин начин за хостване на уебсайт.

Как да използвате

Моля, имайте предвид, че трябва да редактирате App.jsx където се обаждаме Рутер и добавете основно име към него, за да съответства на името на репото. Ето как App.jsx трябва да изглежда:                                                                                        Трябва да променим основно име тъй като GitHub страниците ще внедрят уебсайта в URL от тази форма `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Уебсайтът няма да функционира правилно без базовото име, зададено за реагират-рутер-дом.

1. След като кодът се промени, трябва да инсталираме gh-страници пакет с:
2. И добавете a предварително разгръщане и а разгърнете скрипт към package.json:
3. След това просто бягаме npm стартирайте разгръщане. Ще се задейства npm изпълнява компилация и ще използва gh-страници за публикуване на съдържанието на разст към отделен клон на GitHub, наречен gh-страници.
4. Накрая проверете дали gh-страници се използва за GitHub страници като по-долу:

Ето URL на живо.

Плюсове и минуси

Ако внедрявате проект, който се различава от вашето потребителско име, той ще бъде внедрен в поддиректория на нашия безплатен домейн в рамките на GitHub. След това трябва да напишете допълнителен код, за да поддържате логиката да сте в поддиректория.

Той не поддържа непрекъснато внедряване извън кутията в нашия случай на употреба, но можете да го настроите. Веднъж настроен, промените се внедряват бързо.

Страници на GitLab

Фон

Подобно на GitHub, GitLab има собствено хостинг решение и го наричат ​​GitLab Pages. Трябва да им го дам, по-лесно е да се настрои непрекъснато внедряване на GitLab Pages, отколкото за GitHub Pages.

Как да използвате

1. Регистрирайте се или влезте в GitLab
2. Добавете репо към GitLab, ако вече го нямате там. Вие можете разклонете тази, която добавих там 
   Подобно на страниците GitHub, трябва да редактирате App.jsx където се обаждаме Рутер и добавете  основно име към него, за да съответства на името на репото. Така че това е последната промяна:                                                               Трябва да променим основно име тъй като страниците на GitLab ще внедрят уебсайта в URL от тази форма: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Уебсайтът няма да функционира правилно без базовото име, зададено за реагират-рутер-дом.
3. След като редактирате и прехвърлите проекта в GitLab, отидете на Настройки > Страници и ще бъдете посрещнати с съветник в четири стъпки за внедряване на репо в GitLab Pages. 
4. Първата стъпка в съветника е да въведете изображението за компилация. Ще използваме Node.js LTS.
5. След това ще въведем командата за предварително изграждане. The npm ci тук ще е достатъчно.
6. Сега за стъпката на изграждане. Трябва да минем – –dist-dir public защото GitLab Pages очаква уебсайтът да бъде вграден в публичен указател. Не можете да се измъкнете с друга директория, съжалявам.
7. Комитирайте новогенерираните .gitlab-ci.yml файл, който казва на GitLab как да разположи вашия уебсайт.
8. Сега отидете на CI/CD -> раздел Тръбопроводи на репото и наблюдавайте работата на новодобавения конвейер.
9. След известно време работата по тръбопровода ще приключи и уебсайтът ще бъде разположен на страниците на GitLab.

Ето го резултатът.

Плюсове и минуси

Пакетите се инсталират бавно и трябва да добавите допълнителен код, за да работи, но съветникът е супер интуитивен със само четири стъпки за внедряване.

Рендиране

Фон

Render е ново дете в блока, стартирано през 2019 г. Опитва се да наруши начина, по който хората разгръщат своите услуги (включително статични уебсайтове). Засега се справят добре и броят им нараства.

Как да използвате

1. Регистрирайте се или влезте в Render.
2. Създайте нов статичен уебсайт, като натиснете бутона „Нов“ и изберете „Статичен сайт“.
3. Изберете репото, което искате да внедрите.
4. Запазете прежда; изграждане на прежда команда за изграждане в настройката за изграждане. За съжаление не работи с npm ci; npm изпълнява компилация както правят другите услуги. Променете „Директорията за публикуване“ на разст и щракнете върху „Създаване на статичен сайт“.
5. След известно време Render ще внедри кода.

Ето URL на живо от Render.

Плюсове и минуси

Наистина е бърз, но не работи добре за нашия проект с командите `npm ci` и `npm run build`. Само „прежда“ изглежда работи.

Пренапрежение

Фон

Surge съществува от известно време. Вдясно от прилепа, тяхната услуга е лесна за използване и са необходими само една или две команди за разгръщане на вашия статичен уебсайт. Той е безплатен, но предлага платен план от 30$/месец. Стоицизмът на инструмента е това, което го кара да блести. Не е необходима сложна настройка, просто инсталирайте `surge` и го стартирайте с `surge`.

Как да използвате

1. За да се подготвите, бягайте npm изпълнява компилация за генериране на статични файлове вътре разст указател. The пренапрежение ще използва тези за внедряване.
2. Бягай npm install –global surge
3. Тогава бягай пренапрежение.

Няколко неща, които трябва да отбележите:
Ако го стартирате за първи път, ще трябва да създадете акаунт в Surge. Не се притеснявайте, лесно е. Просто въведете вашия имейл и желаната парола.

След това ще бъдете помолени да въведете „project“, който трябва да бъде пътят към разст указател. Можете просто да добавите разст към пътя, който ви е даден, ако сте изпълнили surge вътре в репото, което внедрявате.

След това въведете бъдещия URL на вашия уебсайт. Опитайте нещо уникално, защото какво пренапрежение предложеното не ми свърши работа.

След въвеждането на URL, пренапрежение ще разположи съдържание от разст към посочения URL. Ето какво получих:

Плюсове и минуси

Той е бърз и прост и не изисква да приемете отделен интерфейс, но не предлага наличен URL за вашето приложение.

Време е за внедряване за всяка хостинг услуга

Нашите топ 3 безплатни React хостинг услуги

1. Netlify
2. Vercel
3. Пренапрежение

Ключови изводи

След като тествахме всяка от тези безплатни услуги за хостинг на приложения React, смятаме, че Netlify е най-добрият от групата. Той осигурява бързо внедряване с много функции, от които може да се нуждаете. Веднага след това е Vercel, който има много функции и е доста бърз след първоначалното внедряване. След това имаме Surge, който е минимален инструмент за внедряване, който може да бъде доста евтин, ако решите да надстроите.

Автоматизирайте изграждането на интерфейса си и изпратете приложението си 10 пъти по-бързо. Научете повече.