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

Полное руководство по развертыванию вашего полнофункционального приложения MERN на Vercel, охватывающее все, от развертывания вашего Express API до его подключения к внешнему интерфейсу.

Здравствуйте, добро пожаловать снова на мою страницу. Независимо от того, являетесь ли вы постоянным посетителем или посещаете его впервые, вуаля! Я более чем рад видеть вас здесь. Недавно я завершил полный проект под названием «Талку-Талку».

Хотя после того, как я поделился им с моими коллегами и общественностью в целом, некоторые мои друзья-разработчики сообщили мне, что у них возникли проблемы с развертыванием проекта. В результате я решил написать эту содержательную статью о развертывании проекта стека MERN с использованием Vercel. Если вам интересно узнать, как развернуть приложение с полным стеком MERN на Vercel, вы как раз в нужном месте. Пожалуйста, присоединяйтесь ко мне и давайте погрузимся прямо в.

Введение

Развертывание полнофункционального приложения NodeJs и Express на Vercel может показаться сложной задачей, особенно если вы новичок в веб-разработке. Но не волнуйтесь! С правильным руководством и забавной аналогией, которую я всегда использую, вы сможете развернуть свое приложение в кратчайшие сроки.

Представьте, что ваше приложение похоже на пиццу. У вас есть все ингредиенты (код), и теперь пришло время испечь его и подать вашим клиентам (пользователям). Версель Здесь! Возьмем ее как печь для пиццы — она берет на себя все технические детали, чтобы вы могли сосредоточиться на приготовлении вкусной пиццы (выпекает пиццу, чтобы ее можно было подать потребителям или покупателям).

В этой статье мы рассмотрим этапы развертывания вашего приложения NodeJs и Express в Vercel. И мы рассмотрим все, от настройки вашей среды до настройки параметров развертывания. Эйс-ап, начнем!

Первый шаг: настройка среды

Прежде чем мы углубимся в развертывание нашего приложения, давайте удостоверимся, что у нас установлены правильные инструменты. Вот некоторые из наиболее важных вещей, которые вам понадобятся:

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. Войдите в Версель

Развертывание Backend или API вашего приложения MERN:

Шаг 1: войдите в панель управления Vercel, нажмите кнопку Добавить новый… и выберите категорию Проект. Как вы можете видеть здесь, я уже вошел в систему, и у меня есть довольно много проектов с уже развернутым vercel.

Шаг 2. Импортируйте свой репозиторий Git после привязки вашей учетной записи Github/Gitlab/BitBucket к Vercel. В этом случае для этой статьи мы будем работать с talku-talku-v3.

Шаг 3. Настройте бэкенд/сервер для приложения MERN в Vercel.

Назовите свой проект, например, «my-project-backend».

Выберите «Другое» в параметре платформы, чтобы адаптировать процесс установки и настройки к 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 в этом случае и замените его в своем коде везде, где была указана ссылка на локальный сервер.

Развертывание внешнего интерфейса вашего приложения MERN:

Очень похоже на бэкэнд-развертывание нашего приложения, мы следуем тому же процессу.

Шаг 1: Еще раз перейдите на панель инструментов Vercel, нажмите кнопку Добавить новый… и выберите категорию Проект.

Шаг 2. Импортируйте свой репозиторий Git после привязки вашей учетной записи Github/Gitlab/BitBucket к Vercel. В этом случае мы определенно будем работать с talku-talku-v3 для этой статьи.

Шаг 3. Настройте внешний интерфейс для приложения MERN в Vercel.

Назовите свой проект, например, «my-project-frontend».
Выберите «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