Как да внедрите приложение FullStack NodeJs и Express на Vercel

Пълно ръководство за внедряване на вашето MERN приложение с пълен стек на Vercel, което обхваща всичко от внедряването на вашия Express API до свързването му с интерфейса

Здравейте, Добре дошли отново на моята страница. Независимо дали сте завръщащ се посетител или посещавате за първи път, Voila! Повече от развълнуван съм, че сте тук. Наскоро завърших проект с пълен стек, наречен „Talku-Talku“.

Въпреки че след като го споделих с колегите си и обществеността като цяло, някои мои приятели разработчици ме информираха, че са се затруднили с внедряването на проекта. В резултат на това реших да напиша тази проницателна статия за внедряването на стеков проект MERN с помощта на Vercel. Ако се интересувате да научите как да внедрите пълно приложение за стек MERN на Vercel, вие сте точно на мястото. Моля, присъединете се към мен и нека се потопим направо.

Въведение

Внедряването на приложение NodeJs и Express с пълен стек на Vercel може да изглежда обезсърчително, особено ако сте нов в уеб разработката. Но не се притеснявайте! С правилните насоки и забавна аналогия, каквито винаги използвам, ще можете да внедрите приложението си за нула време.

Представете си, че вашето приложение е като пица. Имате готови всички съставки (код) и сега е време да го изпечете и сервирате на вашите клиенти (потребители). Vercel тук! Да го приемем като фурна за пица — тя се грижи за всички технически подробности, така че да можете да се съсредоточите върху приготвянето на вкусна пица (изпича пицата, за да може да бъде сервирана на потребители или клиенти).

В тази статия ще преминем през стъпките за внедряване на вашето приложение NodeJs и Express на Vercel. И ние ще покрием всичко - от настройка на вашата среда до конфигуриране на вашите настройки за внедряване. Ace Up, да започваме!

Първа стъпка: Настройка на вашата среда

Преди да се потопим в внедряването на нашето приложение, нека се уверим, че имаме инсталирани правилните инструменти. Ето някои от най-важните неща, от които се нуждаете:

Node.js и npm: Можете да изтеглите и инсталирате Node.js от официалния уебсайт. Npm идва в комплект с Node.js.
Git: Тази система за контрол на версиите ще ви помогне да следите промените във вашия код. Изтеглете Git от официалния сайт.
Редактор на код: Изберете редактор на код, който отговаря на вашите предпочитания. Препоръчваме Visual Studio Code, който е безплатен и лесен за използване.
Express.js: Популярната уеб рамка за Node.js. Тя предоставя няколко функции като маршрутизиране, поддръжка на междинен софтуер и интегриране на машина за шаблони, което улеснява разработчиците да създават приложения и API от страна на сървъра.

След като инсталирате тези инструменти, вие сте една крачка напред и сте почти готови за работа. Отворете терминала и отидете до папката на вашия проект, като напишете

cd path/to/your/folder

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

След като вече сме настроили нашата среда, нека да преминем към внедряването на вашето приложение на vercel.

Втора стъпка: Започване на внедряването на Vercel

Сега, след като нашето приложение е готово и работи локално, време е да го внедрим във Vercel. Ето какво трябва да направите:

Регистрирайте се за акаунт във Vercel: Ако все още нямате акаунт във Vercel, регистрирайте се на адрес https://vercel.com/signup.
Инсталирайте Vercel CLI: Vercel CLI е инструмент от команден ред, който улеснява внедряването на вашето приложение. Инсталирайте го, като изпълните следната команда във вашия терминал:

npm install -g vercel

3. Влезте във Vercel

Внедряване на Backend или API на вашето MERN приложение:

Стъпка 1: Влезте в таблото за управление Vercel и щракнете върху бутона „Добавяне на нов…“ и изберете категорията „Проект“. Както можете да видите тук, вече съм влязъл и имам доста проекти с вече внедрени vercel.

Стъпка 2: Импортирайте своето Git хранилище, след като свържете своя Github/Gitlab/BitBucket акаунт с Vercel. В този случай ще работим с „talku-talku-v3“ за тази статия.

Стъпка 3: Конфигурирайте бекенда/сървъра за вашето MERN приложение на Vercel

Наименувайте проекта си, като например „моят-проект-бекенд“

Изберете „Други“ в опцията за рамка, за да приспособите процеса на настройка и персонализиране към Node.js.
Посочете задната директория на вашия проект, където Vercel ще изпълни командата за изграждане.

Добавете всички необходими променливи на средата, като например MONGO_ATLAS_URL: my-mongo-atlas-url. Забележка: Може да има повече от един!

Накрая щракнете върху бутона „Разполагане“.

Стъпка 4: Много важно, включете предоставения файл vercel.json в главната директория на вашия бекенд/сървър и след това го избутайте във вашето отдалечено хранилище. Това ще активира конфигурацията на Vercel.

{
    "version": 2,
    "builds": [
        {
            "src": "*.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}

Поздравления!🎊 Вашият бекенд ще започне да работи няколко минути след внедряването. Трябва да видите нещо като това.

Бърза бележка: При първа възможност не забравяйте да запазите новата връзка за внедряване на вашия сървър. „„https://talku-talku-v3-sever.vercel.app““ в този случай и го заменете във вашия код навсякъде, където е предоставена връзката към локалния сървър.

Внедряване на Frontend на вашето MERN приложение:

Доста подобно на задното внедряване на нашето приложение, следваме същия процес.

Стъпка 1: Още веднъж отидете на таблото за управление Vercel и щракнете върху бутона „Добавяне на нов…“ и изберете категорията „Проект“.

Стъпка 2: Импортирайте вашето Git хранилище, след като свържете своя акаунт в Github/Gitlab/BitBucket с Vercel. В този случай определено ще работим с „talku-talku-v3“ за тази статия.

Стъпка 3: Конфигурирайте интерфейса за вашето MERN приложение на Vercel

Наименувайте проекта си, като например „моят-проект-фронтенд“
Изберете „Create-React-App“ от наличните рамки, за да сте сигурни, че процедурите за конфигуриране и модифициране са пригодени за React.js.
Посочете предната директория на вашия проект, където Vercel ще изпълни командата за изграждане.

Добавете всички необходими променливи на околната среда, като например REACT_APP_LOCALHOST_KEY: chat-app-current-user. Забележка: Възможно е да има повече от една и може да обмислите добавянето на GENERATE_SOURCEMAP: false от съображения за сигурност и производителност.

Накрая щракнете върху бутона „Разполагане“, след като сте готови.

Поздравления!🎊 Вашият интерфейс ще бъде готов за работа в рамките на няколко минути след внедряването. Трябва да видите нещо като това.

И накрая, политика за проверка и разрешаване на CORS след внедряване

Забележка: За да разрешите грешка в правилата на CORS, ако такава евентуално се появи след внедряването на вашето приложение с пълен стек, можете да инсталирате пакета cors и да го използвате, за да разрешите заявки от друг произход от други домейни. Това може да стане чрез добавяне на следния кодов фрагмент към вашия бекенд сървър:

const cors = require('cors');
// Allow all origins
app.use(cors());
// Allow specific origin(s)
app.use(cors({
  origin: 'https://yourdeployedsite.com'
}));

Освен това винаги трябва да проверявате конзолата за грешки, включително всякакви CORS грешки. Това ще ви помогне да идентифицирате и коригирате всички проблеми, които могат да възникнат.

Заключение

Внедряването на Node.js и приложение Express с пълен стек на Vercel не трябва да е трудно. Като следвате стъпките, описани в тази статия и използвате аналогията с пицата във въведението на тази статия, за да получите по-ясна представа, можете лесно да стартирате приложението си за нула време.

След всичко казано и направено, не забравяйте да разгледате „Talku-Talku-V3“ в GitHub. Регистрирайте се, за да чатите и да изпращате медии с приятели и врагове! Споделете своя преглед и обратна връзка и оставете звезда⭐️, ако намерите нещо интересно.

Като цяло вече трябва да сте разбрали добре процеса на внедряване на MERN приложение с пълен стек, използващо Vercel, включително общи предизвикателства и най-добри практики. Силно се надявам да е така. Моля, следвайте ме за повече съдържание и актуализации като това в бъдеще. Докато се срещнем отново.

Мерси!!

Как да внедрите приложение FullStack NodeJs и Express на Vercel