Как развернуть MERN-приложение на VPS (полное руководство)

Ваше MERN-приложение отлично работает на локальном компьютере.

Затем клиент просит предоставить действующую ссылку, и внезапно вы оказываетесь в тупике. Я это проходил.

За последние несколько лет мы с моей командой развернули десятки приложений на MongoDB, Express, React и Node на работающих серверах и точно знаем, где новички часто сбиваются с пути.

Это руководство решает эту проблему.

Я расскажу вам о каждой команде, каждом файле конфигурации и каждой контрольной точке простым языком, понятным даже тем, кто не имеет опыта в DevOps.

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

Давайте правильно запустим ваш проект в онлайн-формате.

Что на самом деле означает развертывание MERN-приложения на VPS?

Прежде чем мы перейдем к рассмотрению какой-либо команды, позвольте мне объяснить, что вы собираетесь сделать. 

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

MERN-приложение на VPS — это ваш проект на MongoDB , Express, React и Node, работающий на частном виртуальном сервере, который вы полностью контролируете. Вы устанавливаете программное обеспечение, запускаете приложение и владеете всей системой от начала до конца.

Четыре составляющие стека MERN

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

• MOngoDB хранит ваши данные в виде гибких документов. Она работает незаметно в фоновом режиме на вашем сервере.
• EXpress — это ваш бэкенд-фреймворк. Он обрабатывает маршруты API и взаимодействует с базой данных.
• React — это ваш фронтенд. Он компилирует код в статические файлы, которые загружает браузер.
• Node.js запускает ваш бэкенд на Express в режиме реального времени. Это движок, работающий под капотом.

Как только вы начнете воспринимать эти четыре компонента как отдельные службы, которые должны запускаться, оставаться активными и взаимодействовать друг с другом, этапы развертывания перестанут казаться пугающими. 

Именно такой ментальной моделью руководствуется моя команда каждый раз.

VPS против общего хостинга для MERN-приложений

С VPS вы получаете выделенный сервер. CPU и RAMПолный контроль над версиями и отсутствие препятствий, мешающих использованию необходимых инструментов. 

Именно эта свобода является главной причиной, по которой разработчики выбирают VPS для работы с MERN-технологиями.

Что вам понадобится перед развертыванием вашего MERN-приложения

Тщательная подготовка сэкономит вам часы разочарования в будущем. Моя исследовательская группа составила короткий контрольный список, чтобы вы могли приступить к работе, будучи полностью готовыми, вместо того, чтобы в спешке выполнять задание на полпути.

Ваш контрольный список перед развертыванием

Перед началом работы соберите эти пять вещей. 

Наличие этих настроек позволяет выполнить установку за один раз, без необходимости искать пароль или ссылку на репозиторий.

• A VPS сервер с правами root или sudo, под управлением Ubuntu 22.04 или 24.04.
• Код вашего MERN-проекта хранится в репозитории GitHub или GitLab и готов к клонированию.
• Доменное имя, указывающее на ваш сервер, для чистого рабочего URL-адреса и бесплатно. SSL.
• Значения в файле .env, а также данные для подключения к MongoDB и любые ключи API.
• An SSH Для подключения к серверу используйте клиент или PuTTY в Windows.

Навыки, которые полезны, но не обязательны.

Чтобы следовать этому руководству, вам не нужно быть экспертом по серверам. Тем не менее, несколько основных моментов облегчат задачу, и я буду объяснять каждый новый термин, как только он появится.

Уверенное владение командной строкой Linux очень помогает. 

Знание того, как редактировать файлы с помощью nano, перемещаться между папками и запускать команды с правами суперпользователя (sudo), покрывает примерно девяносто процентов необходимого здесь.

Почему я рекомендую YouStable VPS для размещения MERN-приложения

Перед выполнением любой команды вам потребуется сервер, поэтому позвольте мне поделиться тем, что использует моя команда. 

После тестирования множества поставщиков услуг на реальных проектах я постоянно возвращаюсь к этому варианту. YouStable для развертывания MERN, и вот честная причина, почему.

Полный корневой доступ и реальная свобода действий для разработчиков.

Для установки Node, запуска PM2 и открытия портов MERN-приложению необходимы root-права. Nginx использует. 

YouStable Предоставляет полный корневой доступ ко всем тарифным планам VPS, поэтому ничто из этого списка не будет заблокировано.

Вы также можете выбрать операционную систему из Ubuntu, Debian, AlmaLinux или Rocky Linux. Моя команда использует Ubuntu для работы с MERN, потому что там есть Node, MongoDB и... Nginx Все компоненты устанавливаются без проблем, следуя приведенным ниже инструкциям.

Доступные цены и гарантированная бесперебойная работа.

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

YouStable Планы VPS Стоимость начинается примерно с 3.67 долларов в месяц, что вполне приемлемо, учитывая скорость NVMe SSD и выделенные ресурсы, которые вы получаете взамен.

Каждый план подкреплен 99.9Гарантия бесперебойной работы в % и сеть 1 Гбит/с, работающая на процессорах AMD EPYC с виртуализацией KVM. 

Это значит, что ваше работающее MERN-приложение останется быстрым и доступным для реальных посетителей.

В каждый тарифный план входит 1 бесплатный выделенный сервер. IPv4Бесплатная панель управления и полный root-доступ. Для начинающих разработчиков MERN-приложений базовый тарифный план включает Node, MongoDB и... Nginx а также с запасом места.

Бесплатная панель управления, миграция и круглосуточная поддержка пользователей.

Проблемы с сервером, кажется, всегда возникают в полночь. Именно тогда на помощь приходит поддержка, поэтому моя команда учитывает её так же тщательно, как и технические характеристики, при выборе хостинга.

YouStable Включает бесплатную панель управления, бесплатную миграцию веб-сайта объемом до 5 ГБ, создание снимков, автоматическое резервное копирование и защиту от DDoS-атак. 

Круглосуточно и в онлайн-чате и через систему заявок отвечают реальные люди, а не боты.

Как купить VPS-сервер у YouStable

Позвольте мне сначала рассказать вам о подготовке вашего сервера, поскольку для развертывания необходим работающий VPS с IP-адресом. Эта часть займет всего несколько минут от начала до конца.

Пошаговое руководство по покупке VPS

Следуйте этому пути, и вскоре вы получите данные для входа на сервер в свой почтовый ящик. Моя команда упростила маршрут, чтобы вы тратили время на создание приложения, а не на кликание по страницам оформления заказа.

• Зайдите на официальный YouStable веб-сайт >> открыть VPS хостинг Меню >> Выберите VPS для разработчиков или Linux VPS >> Выберите тарифный план, соответствующий размеру вашего приложения.

• Выберите свой расчетный период >> выберите Ubuntu 24.04 в качестве операционной системы >> добавьте свой домен, когда это потребуется >> завершите оплату с помощью банковской карты, UPI или интернет-банкинга.

• После подтверждения заказа вы получите электронное письмо с IP-адресом вашего сервера, именем пользователя root и паролем. 

• Сохраните этот адрес электронной почты, поскольку эти три параметра понадобятся вам для первого шага, описанного ниже.

Как развернуть MERN-приложение на VPS: пошаговое руководство

Это основная часть руководства. Моя техническая команда протестировала каждую команду на новом сервере, поэтому следуйте им по порядку, и к концу ваше MERN-приложение будет запущено и защищено.

Шаг 1: Подключитесь к своему VPS через SSH

Сначала войдите на сервер со своего компьютера. Откройте терминал, затем используйте IP-адрес с вашего компьютера. YouStable Приветственное письмо для начала безопасного процесса. SSH сессия.

Выполните эту команду на своем локальном компьютере:

ssh root@your_server_ip

Когда вас попросят подтвердить доверие к серверу, введите «да», затем введите свой пароль root. Теперь вы находитесь внутри своего VPS и готовы к его настройке. 

Это быстрое изменение означает, что соединение установилось.

Шаг 2: Обновите сервер и создайте безопасного пользователя.

Сначала нужно обновить новый сервер, а затем задействовать пользователя без прав root для повседневной работы. Запускать всё от имени root рискованно, поэтому моя команда всегда сразу создаёт выделенного пользователя для развертывания.

Обновите систему, затем создайте своего пользователя:

sudo apt update && sudo apt upgrade -yadduser deployusermod -aG sudo deploysu - deploy

При появлении запроса установите надежный пароль и нажимайте Enter во всех дополнительных полях. 

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

Шаг 3: Настройка брандмауэра

Брандмауэр блокирует все неиспользуемые вами порты, что быстро сужает поверхность атаки. Вы открываете только те двери, которые действительно необходимы вашему приложению, а все остальное держите под замком.

Разрешить SSHЗатем включите брандмауэр:

sudo ufw allow OpenSSHsudo ufw enable

Нажмите «y» для подтверждения. 

Мы откроем веб-порты для Nginx Позже, после установки. А пока... SSH Доступ остается защищенным, поэтому вы никогда не заблокируете себе доступ к серверу.

Шаг 4: Установите Node.js 24 LTS

Вашему бэкенду на Node.js необходима среда выполнения Node.js. 

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

Установите Node.js 24 LTS:

sudo apt install -y curl ca-certificates gnupgsudo mkdir -p /etc/apt/keyringscurl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key \  | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpgNODE_MAJOR=24echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] \  https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" \  | sudo tee /etc/apt/sources.list.d/nodesource.listsudo apt updatesudo apt install nodejs -y

Теперь убедитесь, что установка прошла успешно, проверив версии. 

Наличие здесь реальных номеров версий говорит о том, что Node и npm готовы к запуску вашего бэкенда и сборке фронтенда.

Проверьте версии:

node -vnpm -v

Вы должны увидеть версию Node, начинающуюся с v24, и версию npm рядом с ней. Когда обе версии корректно отобразятся, ваша среда выполнения настроена, и вы можете перейти к поддержанию работоспособности приложения.

Шаг 5: Установите PM2, чтобы ваше приложение продолжало работать.

При запуске node index.js ваше приложение завершает работу в тот момент, когда вы закрываете терминал. PM2 решает эту проблему. 

Это процесс manager, который поддерживает работоспособность вашего бэкенда Node и перезапускает его после любого сбоя.

Установите PM2 глобально:

sudo npm install -g pm2

PM2 теперь доступен на всем сервере. Мы перенаправим его на ваш бэкэнд чуть позже, после того, как ваш код будет загружен и установлены его зависимости. Считайте это вашим постоянно работающим движком.

Шаг 6: Установка и защита MongoDB

Ваша база данных также хранится на сервере. Мы устанавливаем MongoDB Community Edition, запускаем её в фоновом режиме, а затем защищаем паролем, чтобы никто посторонний не смог получить доступ к вашим данным.

Установите MongoDB 8.0 и запустите её:

curl -fsSL https://www.mongodb.org/static/pgp/server-8.0.asc \  | sudo gpg -o /usr/share/keyrings/mongodb-server-8.0.gpg --dearmorecho "deb [ arch=amd64,arm64 \  signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg ] \  https://repo.mongodb.org/apt/ubuntu noble/mongodb-org/8.0 multiverse" \  | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.listsudo apt updatesudo apt install -y mongodb-orgsudo systemctl start mongodsudo systemctl enable mongod

Слово noble в этой команде — это кодовое название Ubuntu 24.04. При запуске Ubuntu 22.04 замените noble на jammy, чтобы репозиторий соответствовал вашей системе, тогда установка пройдёт без ошибок.

Теперь обеспечьте безопасность базы данных. 

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

Этот простой шаг предотвращает наиболее распространенную утечку данных в MongoDB.

Создайте пользователя-администратора базы данных:

mongosh use admindb.createUser({  user: "admin",  pwd: "your_strong_password",  roles: [ { role: "userAdminAnyDatabase", db: "admin" },           "readWriteAnyDatabase" ]})exit

Далее, укажите MongoDB, чтобы она требовала авторизации. 

Откройте конфигурационный файл, добавьте указанный ниже блок безопасности и перезапустите службу, чтобы новое правило вступило в силу для каждого последующего подключения.

Включите аутентификацию MongoDB:

sudo nano /etc/mongod.conf 

# Добавьте эти две строки, затем сохраните:

security:authorization: enabled sudo systemctl restart mongod

Шаг 7: Загрузите код вашего MERN-приложения с помощью Git.

Пришло время перенести ваш проект на сервер. Самый чистый способ — использовать Git, так как вы клонируете свой репозиторий прямо в веб-папку и получаете будущие обновления одной командой.

Клонируйте свой проект в /var/www:

sudo mkdir -p /var/wwwcd /var/wwwsudo chown -R $USER:$USER /var/wwwgit clone https://github.com/yourusername/your-mern-app.gitcd your-mern-app

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

Шаг 8: Настройка бэкэнда и переменных среды.

Перейдите в папку вашего бэкэнда и установите необходимые пакеты. Затем создайте файл .env, который будет содержать ваши секреты, например, ссылку на базу данных и порт, на котором работает ваш Express-сервер.

Установите пакеты бэкенда и откройте файл .env:

cd backendnpm installnano .env

В файл .env добавьте свои реальные значения. 

Приведённая ниже строка подключения использует созданный вами логин администратора, чтобы ваше приложение Express могло безопасно взаимодействовать с MongoDB на том же сервере.

Примеры значений .env:

PORT=5000NODE_ENV=productionMONGO_URI=mongodb://admin:[email protected]:27017/yourdbname?authSource=admin

Сохраните файл, нажав Ctrl+O, затем Enter, а затем Ctrl+X, чтобы выйти из nano. Укажите имя базы данных и порт в соответствии с требованиями вашего приложения, иначе при запуске бэкэнд не сможет подключиться.

Шаг 9: Создание фронтенда на React

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

Создайте фронтенд:

cd ../frontendnpm installnpm run build

В проекте Vite создается папка dist, а в проекте Create React App — папка build. Обратите внимание, какая из них отображается, потому что Nginx Для корректной работы вашего сайта нам потребуется точный путь к этой папке.

Шаг 10: Запустите бэкэнд с помощью PM2

Теперь запустите свой бэкенд Express в среде PM2, чтобы он работал постоянно и сохранял работоспособность после перезагрузки. Вернитесь в папку бэкенда и запустите основной файл сервера с понятным и запоминающимся именем.

Запустите и сохраните состояние бэкэнда:

cd ../backendpm2 start server.js --name mern-backendpm2 startuppm2 save

Замените server.js на ваш реальный входной файл, которым часто является index.js или app.js. Команда запуска pm2 выводит одну строку для копирования и выполнения, что блокирует автоматический запуск вашего приложения при каждой перезагрузке.

Проверьте статус и журналы событий в реальном времени:

pm2 listpm2 logs mern-backend

Выполните эти две команды, чтобы убедиться, что бэкэнд отображает статус «онлайн». Команда logs выводит информацию в режиме реального времени, поэтому вы можете наблюдать за загрузкой приложения и выявлять любые ошибки в момент их появления.

Шаг 11. Установите и настройте Nginx

Никто не хочет вводить номер порта в браузере. Nginx Это решает эту проблему. Он обслуживает ваши React-файлы и незаметно перенаправляет вызовы API на ваш Node-бэкенд, используя при этом чистое доменное имя.

Установите Nginx и открытые веб-порты:

sudo apt install nginx -ysudo ufw allow 'Nginx Full'

Теперь создайте конфигурационный файл для вашего сайта. В нём будет указано следующее: Nginx где находятся ваши файлы фронтенда и как передавать любой запрос, начинающийся с /api, на бэкенд, работающий на порту 5000.

Откройте новый Nginx файл конфигурации:

sudo nano /etc/nginx/sites-available/mern-app

Вставьте приведенный ниже блок в этот файл. Обновите домен и корневой путь в соответствии с вашим сайтом и папкой сборки фронтенда, которую вы указали ранее, затем сохраните и закройте редактор.

Nginx Настройки сайта:

server {    listen 80;    server_name yourdomain.com www.yourdomain.com;     root /var/www/your-mern-app/frontend/dist;    index index.html;     location / {        try_files $uri $uri/ /index.html;    }     location /api {        proxy_pass http://localhost:5000;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection 'upgrade';        proxy_set_header Host $host;        proxy_cache_bypass $http_upgrade;    }}

Теперь включите сайт, проверьте конфигурацию на наличие опечаток и перезагрузите страницу. NginxЭтап тестирования — ваша страховка, поскольку он выявляет ошибки до того, как они смогут вывести из строя ваш рабочий сервер.

Включите сайт и перезагрузите страницу. Nginx:

sudo ln -s /etc/nginx/sites-available/mern-app /etc/nginx/sites-enabled/sudo nginx -tsudo systemctl restart nginx

Когда команда `nginx -t` сообщит, что синтаксис в порядке, значит, всё ясно. Теперь зайдите на свой домен, и ваше MERN-приложение должно загрузиться по обычному HTTP. Остался один шаг: заблокировать его с помощью команды `free`. SSL.

Шаг 12: Добавить бесплатно SSL С Let's Encrypt

Значок замка в браузере мгновенно повышает доверие, и поисковые системы это тоже поощряют. Certbot от Let's Encrypt предоставляет бесплатный сертификат и интегрирует его в вашу систему. Nginx автоматически менее чем за минуту.

Установите Certbot и выполните команду. SSL:

sudo apt install certbot python3-certbot-nginx -ysudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Введите свой адрес электронной почты, примите условия и выберите опцию, которая перенаправляет весь трафик на HTTPS. Certbot автоматически обновляет сертификат, поэтому ваш значок замка останется зеленым, и вам не нужно будет ничего делать.

Как всё протестировать перед запуском в эксплуатацию

Вы почти закончили, но быстрая проверка сейчас предотвратит сбой в запуске позже. Моя команда запускает один и тот же короткий список при каждом развертывании, чтобы убедиться, что каждая служба выполняет свою работу.

Ваш заключительный контрольный список проверки

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

• Внешний интерфейс: Откройте свой домен в браузере. Ваш React-фронтенд должен быстро загружаться по HTTPS с изображением замка.
• Backend: Запустите действие, которое обращается к API, например, вход в систему или получение данных, и убедитесь, что оно возвращает реальные данные.
• База данных: Добавьте или прочитайте запись через ваше приложение, а затем убедитесь, что изменения сохраняются после обновления страницы.
• Uptime: Запустите команду pm2 list и проверьте, отображается ли ваш бэкэнд в сети после перезагрузки тестового сервера.

Когда все четыре проверки пройдены успешно, ваше MERN-приложение действительно готово к использованию в производственной среде. Именно в этот момент моя команда объявляет развертывание завершенным, и вы получаете право поделиться ссылкой на него со всеми.

Распространенные ошибки развертывания MERN и способы их устранения

Даже проверенные этапы сталкиваются с трудностями в реальных проектах. Моя исследовательская группа зафиксировала ошибки, которые чаще всего приводят к проблемам, а также точное решение каждой из них, чтобы вы никогда не застревали надолго.

В бэкэнде отображается ошибка в PM2.

Если в выводе команды pm2 list вместо сообщения "online" отображаются ошибки, ваше приложение аварийно завершает работу при запуске. Сначала изучите логи, поскольку в них почти всегда в нижней части экрана в открытом виде указана истинная причина проблемы.

Прочитайте последние 50 строк лога:

pm2 logs mern-backend --lines 50

Обычно виновниками являются неправильное значение .env, отсутствующий пакет или некорректная ссылка на базу данных. Исправьте строку, на которую указывает лог, затем запустите pm2 restart mern-backend и попробуйте снова.

Nginx Отображается ошибка 502 Bad Gateway.

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

Убедитесь, что PM2 показывает, что приложение работает онлайн, затем подтвердите порт proxy_pass в вашем файле конфигурации. Nginx Параметр config соответствует порту, указанному в вашем файле .env. 

Совместите эти два элемента, и 502-й сразу же пройдет.

Фронтенд загружается, но API выдает ошибку.

Если ваш сайт отображается, но кнопки не работают, значит, фронтенд обращается к неправильному адресу. Это происходит, когда базовый URL API по-прежнему указывает на localhost в вашей среде разработки.

Установите базовый URL для API на стороне клиента на /api, выполните пересборку с помощью команды npm run build и перезагрузите страницу. Nginx затем перенаправляет эти вызовы на ваш бэкэнд, и неисправные кнопки снова оживают.

Часто задаваемые вопросы (FAQ)

В заключение: ваше MERN-приложение готово к выходу на мировой рынок.

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

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

Если вам нужен сервер, предоставляющий полный root-доступ, скорость NVMe и поддержку специалистов по разумной цене, YouStable Здесь моя команда занимается разработкой. Возьмите план, следуйте этому руководству и представьте свой проект реальным пользователям уже сегодня.