React е популярна JavaScript библиотека за изграждане на функционални потребителски интерфейси в динамични уеб приложения. Може би сте прекарали много дълъг час в отстраняване на грешки в кода на React в опит да създадете следващия Instagram или Airbnb.
Независимо какво изграждате, крайната цел винаги е да покажете работата си на света. Това е мястото, където хостинг платформи като Netlify идват на помощ. Те предоставят набор от инструменти, които рационализират процеса на внедряване.
Следвайте, за да научите как да внедрявате своите React приложения с помощта на лесните за използване инструменти за внедряване на Netlify.
Какво е Netlify?
Netlify е базирана на облак платформа за разработка с функции, които правят хостинга и внедряването на приложения в мрежата много по-лесни. Просто казано, той предоставя набор от инструменти и услуги, които рационализират и опростяват процеса, позволявайки ви да внедрите и хоствате уеб приложение за секунди.
Основни характеристики на Netlify
Netlify има набор от функции, които опростяват процеса на внедряване.
- Той предоставя основни функции за достъп и контрол на версиите, за да позволи на екипите за разработка да си сътрудничат ефективно и ефективно по проекти.
- Той предлага сигурни хостинг услуги, които можете да коригирате според нуждите си. Освен това осигурява автоматизирано архивиране в случай на загуба на данни.
- Той се интегрира безпроблемно с популярни услуги за разработка на облак като GitHub, GitLab и Bitbucket.
- Той предоставя функции, които улесняват настройването и конфигурирането на персонализиран URL адрес на домейн и SSL сертификат за вашето приложение.
Създайте приложение Demo React
- За да започнете, ще трябва първо да създайте демонстрационно приложение React които в крайна сметка ще внедрите в Netlify. Изпълнете командата по-долу на вашия терминал, за да създадете приложение React:
npx create-react-app demo-react-netlify-app - След това изпълнете тази терминална команда, за да завъртите сървъра за разработка:
Продължете и вижте резултатите във вашия браузър на http://localhost: 3000.npm стартиране - И накрая, изпълнете тази команда, за да създадете готова за производство версия на вашето приложение:
Тази команда генерира необходимите производствени файлове и активи в нова папка в основната директория, наречена build. Папката за изграждане улавя минимизирана версия на цялото приложение, съдържаща всичко необходимо за внедряване на приложението.npm изпълнява компилация
Разположете приложението React в Netlify
Netlify предоставя три метода, които можете да използвате, за да внедрите своето React приложение. Можеш:
- Импортирайте проекта си от хост на Git хранилище, като GitHub.
- Използвайте функцията Плъзгане и пускане.
- Използвайте инструмента за команден ред, CLI на Netlify.
Внедрете с помощта на функцията за импортиране на GitHub
- Започнете от създаване на хранилище в GitHub за съхраняване на проектните файлове на вашето приложение React. Като алтернатива можете също да хоствате вашите проектни файлове на всеки друг поддържан Git доставчик, като GitLab, Bitbucket или Azure DevOps.
- След това се регистрирайте за акаунт в Netlify. След като се регистрирате, отворете таблото за управление на вашия акаунт и изберете сайтове раздел.
- Кликнете върху Импортиране от Git бутон.
- Изберете предпочитаната от вас платформа за доставчик на Git. Netlify ще ви подкани да се удостоверите с вашия доставчик на Git, за да му предоставите достъп до вашия акаунт и хранилища.
- След като направите това, Netlify ще покаже списък с хранилища на вашия Git доставчик. Изберете хранилището на проекта React, което първоначално сте изпратили към вашия доставчик на Git.
- След като изберете хранилището, трябва да посочите как Netlify трябва да обработва процеса на внедряване. Обикновено за статични уебсайтове не е необходимо да правите никакви промени, но за динамични уебсайтове като приложения на React ще трябва да зададете настройките за изграждане. За щастие, Netlify по подразбиране автоматично открива рамката, използвана за изграждане на приложението, и попълва полетата с необходимите настройки за изграждане.
- Накрая щракнете Разположете сайт за да завършите процеса.
Щракнете върху предоставения URL адрес, за да видите приложението във вашия браузър. Ако имате персонализиран URL адрес на домейн, можете да инструктирате Netlify да го използва с вашия сайт, като актуализирате URL адреса от настройките на сайта.
Разположете с помощта на функцията за плъзгане и пускане
Това е най-простият метод за внедряване на вашето React приложение в Netlify. Трябва само да плъзнете и пуснете папката за компилация в потребителския интерфейс за плъзгане и пускане на Netlify.
- На таблото за управление на Netlify изберете сайт раздел. След това щракнете върху Добавете нов сайт и след това изберете Разположете ръчно от опциите на падащото меню.
- В страницата с функции за плъзгане и пускане изберете папката, съдържаща компилационните файлове на React, и я пуснете в този потребителски интерфейс. Проектът незабавно ще бъде внедрен в Netlify. Като алтернатива можете да щракнете върху Прегледайте, за да качите за да изберете вашата папка за компилация от файловата система.
Разположете с помощта на интерфейса на командния ред на Netlify
Използвайки интерфейса на командния ред (CLI) на Netlify, можете да разположите вашето React приложение директно от терминал. Освен това CLI на Netlify ви позволява да конфигурирате непрекъснато внедряване, така че когато ангажирате и изпращате нови актуализации към вашето Git хранилище, те автоматично се внедряват.
- Изпълнете командата по-долу на вашия терминал, за да инсталирате CLI на Netlify:
npm Инсталирай netlify-cli -g - Сега изпълнете командата по-долу, за да разгърнете вашето приложение. Уверете се, че сте в работната директория на проекта, преди да го внедрите.
CLI на Netlify ще ви подкани да му разрешите да прави промени в акаунта ви. След като предоставите разрешение, посочете името на екипния акаунт, който сте посочили при регистрацията, след това изберете дали да свържете директорията на приложението към съществуващ уебсайт или да създадете и конфигурирате нов един. Завършете, като предоставите персонализирано име на уебсайт и име на вашата папка за компилация.внедряване на netlify - CLI ще внедри чернова версия на вашето приложение. Проверете дали всичко работи според очакванията.
- Накрая изпълнете командата по-долу, за да внедрите приложението си в производствена среда.
внедряване на netlify --произведено
Сравнение на трите метода за внедряване
Методът за импортиране на GitHub е най-ефективният за внедряване на производствени приложения, тъй като ви позволява да свързвате вашето Git хранилище директно към Netlify и поддържайте кода си в синхрон с техния уебсайт или приложение на живо. Когато ангажирате и натиснете промени във вашето Git хранилище, Netlify автоматично ще актуализира уебсайта.
Методът на плъзгане и пускане е по-прост за разполагане на статични сайтове, тъй като не изисква кодиране или настройка. Той обаче не позволява автоматични актуализации, когато правите промени във вашето хранилище.
CLI методът е най-всеобхватният, тъй като ви дава пълен контрол върху процеса на внедряване и позволява персонализирани конфигурации. Този метод е най-подходящ, ако вече имате добро разбиране на Netlify и ви е удобно да работите с командния ред.
И трите метода са полезни за внедряване на приложения в Netlify. В крайна сметка изборът кой да се използва ще зависи от нуждите на всеки отделен проект.
Използване на Netlify за внедряване на други приложения
Netlify е мощен и многофункционален инструмент, който можете да използвате за внедряване на приложения, различни от React. Можете да го използвате за внедряване и хостване на статични уебсайтове и динамични приложения, изградени с различни рамки като Angular.
Удобният за потребителя интерфейс улеснява конфигурирането, управлението и внедряването на вашите API.