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 або API, а також підтримує попередній перегляд URL для гілок, над якими працює ваша команда. Як і Netlify, Vercel та інші, він обслуговує розгорнутий вміст через мережу CDN.

Як використовувати

1. встановити інструменти firebase з npm install -g firebase-tools.
2. Увійдіть у Firebase за допомогою вхід у firebase. Після входу ви повинні побачити таке повідомлення:
3. Перейдіть до каталогу проекту та запустіть ініціалізація Firebase, ви повинні побачити щось на зразок цього: Виберіть опцію налаштування файлів для Firebase Hosting із додатковими розгортаннями дій GitHub. Потім ви можете створити проект прямо з CLI або використовувати Firebase UI, щоб зробити це, а потім підключити його. Ми створили проект із командного рядка, і ось як ми відповіли на запитання, що виникли:                                                                    Після цього будуть створені прості файли `firebase.json` і `.firebaserc`.
4. Тоді біжіть розгортання Firebase щоб фактично розгорнути файли з відсткаталог. Якщо каталог відсутній, обов’язково запустіть npm run build перший для створення файлів. 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 run build і це буде використовувати gh-сторінки опублікувати вміст відст в окрему гілку на GitHub називається gh-сторінки.
4. Нарешті перевірте, чи gh-сторінки використовується для сторінок GitHub, як показано нижче:

Ось живий URL.

Плюси і мінуси

Якщо ви розгортаєте проект, який відрізняється від вашого імені користувача, його буде розгорнуто в підкаталозі нашого безкоштовного домену в GitHub. Потім вам потрібно написати додатковий код для підтримки логіки перебування в підкаталозі.

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

Сторінки GitLab

Фон

Як і GitHub, GitLab має власне рішення для хостингу, і вони називають його GitLab Pages. Я повинен надати їм це, легше налаштувати безперервне розгортання на сторінках GitLab, ніж на сторінках GitHub.

Як використовувати

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

Ось результат.

Плюси і мінуси

Пакети встановлюються повільно, і вам потрібно додати додатковий код, щоб вони запрацювали, але майстер надзвичайно інтуїтивно зрозумілий і має лише чотири кроки для розгортання.

Рендер

Фон

Render — нова дитина в блоці, запущена в 2019 році. Вона намагається порушити те, як люди розгортають свої сервіси (включаючи статичні веб-сайти). Поки що вони почуваються добре, їх кількість зростає.

Як використовувати

1. Зареєструйтеся або увійдіть у Render.
2. Створіть новий статичний веб-сайт, натиснувши кнопку «Новий» і вибравши «Статичний сайт».
3. Виберіть репо, яке потрібно розгорнути.
4. Тримайте пряжа; будувати пряжу команда побудови в налаштуваннях побудови. На жаль, це не працює з npm ci; npm run build як і інші служби. Змініть «Опублікувати каталог» на відст і натисніть «Створити статичний сайт».
5. Через деякий час Render розгорне код.

Ось живий URL від Render.

Плюси і мінуси

Це дуже швидко, але погано працює для нашого проекту з командами `npm ci` і `npm run build`. Здається, працює лише `yarn`.

сплеск

Фон

Surge існує вже деякий час. Справа в тому, що їхній сервіс простий у використанні, і для розгортання вашого статичного веб-сайту потрібна лише одна або дві команди. Він безкоштовний, але пропонує платний план 30 доларів на місяць. Стоїцизм інструменту – це те, що робить його сяючим. Не потрібно складного налаштування, просто встановіть `surge` і запустіть його за допомогою `surge`.

Як використовувати

1. Щоб підготуватися, біжіть npm run build для створення статичних файлів усередині відст каталог. 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 разів швидше. Дізнайтесь більше.