Что толку от вашего приложения, если другие люди не могут его использовать? Развертывание делает наше приложение живым для использования во всем мире. Стек MERN, то есть MongoDB, Express, React и Node — самый популярный стек для разработки веб-приложений, а Heroku — облачная PaaS (платформа как услуга). Что же такое PaaS?
Платформа как услуга означает, что Heroku предоставляет платформу, на которой мы можем развернуть, управлять и масштабировать наше приложение в виде облачного сервиса. Нам не нужно заботиться о производственном сервере и его работе. Мы можем создать наше приложение и подключить наш код к Heroku, а всю остальную работу сделает только Heroku.
На рынке существует множество платформ, где мы можем развернуть наше приложение, но они берут за это деньги. Лично мне нужны бесплатные вещи, а Heroku бесплатен в использовании, и мы можем развернуть до 5 приложений на Heroku без какой-либо платы. Есть и другие бесплатные платформы, например Netlify, но мы не можем развернуть там наш бэкэнд. Поэтому я думаю, что Heroku лучше всего подходит для развертывания нашего приложения без каких-либо затрат.
Теперь, прежде чем перейти к шагу развертывания, мы должны выполнить некоторые настройки в приложении. Я лично следую приведенным ниже шагам для подключения бэкенда и фронтенда MERN.
Для каждого проекта у нас есть имя корневого каталога в качестве проекта. Внутри него выполните команду npm init, которая инициализирует приложение. Затем у нас будет файл package.json. Теперь внутри него у меня есть две папки — frontend и backend.
Frontend — это не что иное, как приложение react, которое можно создать с помощью команды npx create-react-app frontend. Это создаст папку frontend в корневом каталоге проекта. Теперь каждый код фронтенда будет помещаться туда. Это наш R из MERN.
Теперь создайте новую папку с именем backend параллельно с frontend. Папка backend будет содержать весь код нашего бэкенда. Это наши M, E и N из MERN. Внутри папки backend я создаю новую папку config, внутри которой находится файл config.env, содержащий секреты, которые будут использоваться в приложении, такие как JWT secret ket, cloudinary secret key и другие. config.env — это файл, который будет использоваться только во время разработки. Для производства мы будем создавать наши секреты в Heroku. Мы увидим это позже в этой статье.
Кроме этих вещей у меня есть .gitignore и файл README.md. Надеюсь, вы знаете о них. Следующим идет Procfile. Procfile необходим для Heroku. Он определяет команды, которые будут выполняться при запуске приложения.
Теперь я подключу мой бэкенд к фронтенду, чтобы оба они работали на одном порту. В react у нас есть папка build, в которой находится код сборки. Поэтому в express static мы добавим путь сборки фронтенда. Теперь помимо маршрутов мы создадим маршрут *, который будет означать что угодно, и при переходе по этому маршруту мы будем открывать html-файл из папки сборки фронтенда. Весь этот код будет находиться в файле, где мы создали backend-сервер и все маршруты.
Теперь еще одна вещь, которую нам нужно сделать, нам нужно упомянуть скрипт внутри файла package.json корневой директории.
Он будет выполняться до создания внутреннего сервера. Он создаст папку build внутри frontend, чтобы backend мог подключиться к ней.
Теперь у нас все настроено в приложении, а дальше дело за нашим любимым Heroku. Создайте аккаунт Heroku, если у вас его еще нет. Перейдите на страницу панели приложений, нажмите на кнопку new и создайте новое приложение.
Дайте название приложению и выберите регион. Теперь все шаги просты. Просто нажмите на приложение и перейдите на вкладку Deploy. Там выберите метод развертывания Heroku Git. Там мы можем увидеть уже заданные команды, теперь нам просто нужно их использовать.
Теперь откройте терминал в корневом каталоге проекта и войдите в heroku с помощью команды
heroku login
Перед использованием этой команды убедитесь, что у вас установлен Heroku CLI.
Теперь мы вошли в учетную запись Heroku и теперь развернем наше приложение. Выполните приведенные ниже команды:
$ git add .
$ git commit -am "initial commit"
$ heroku git:remote -a <name of your heroku app>
$ git push heroku master
Теперь начнется развертывание вашего приложения. В конце вы увидите url вашего приложения.
Теперь мы все сделали. Наше приложение теперь работает и может быть использовано другими.
Мы также можем создать CI/CD в heroku, просто перейдите на вкладку Deploy и в методе развертывания выберите Github и выполните эти шаги. Теперь всякий раз, когда вы будете отправлять изменения кода на Github, он начнет развертываться сам по себе. Вам не нужно ничего делать.
Спасибо, что дочитали до этого места. Тем временем вы можете ознакомиться с другими моими статьями в блоге и посетить мой Github.
В настоящее время я также работаю над Stone CSS (Github).