Здравствуйте и добро пожаловать на финал серии Создадим приложение MySQL Node.js CRUD! В предыдущей статье мы реализовали наш интерфейс с помощью React и завершили наше приложение с полным стеком.

Если вы не читали предыдущую статью, то найдите ее здесь.

Давайте завершим эту серию, развернув наше приложение React MySQL на Heroku. Heroku — это облачная платформа (PaaS), которую мы можем использовать для бесплатного размещения нашего приложения.

Шаг 1: Установите интерфейс командной строки Heroku

Если вы еще этого не сделали, загрузите и установите Heroku CLI на свое устройство. Нажмите на эту ссылку и следуйте их инструкциям по загрузке.

Далее создайте учетную запись Heroku здесь. Подпишитесь на бесплатный уровень (или любой другой), чтобы начать.

Шаг 2: Package.json

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

Перейдите к нашему package.json файлу. В свойстве scripts измените сценарий запуска по умолчанию на:

"start": "node server.js",

Затем добавьте версию приложения Node как:

"engines": {
    "node": "12.14.1"
  },

Шаг 3: Профайл

В корневом каталоге проекта создайте новый файл с именем Procfile и добавьте в него эту строку:

web:node server.js

Procfile указывает, какие команды приложение должно выполнять при запуске. Чтобы узнать больше, прочитайте официальную документацию Heroku здесь.

Шаг 4: Server.js

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

Для этого сначала импортируйте встроенный модуль с именем path в верхней части server.js.

const path = require("path");

Затем добавьте следующие строки:

// declare react files in build as static
app.use(express.static(path.join(__dirname, "build")));
// serve index.html from the build folder
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

Теперь все, что нам нужно сделать, это создать папку сборки, выполнив:

npm run build

В корневом каталоге должна появиться папка с именем build.

Шаг 5: Создайте приложение Heroku

Теперь мы готовы создать приложение Heroku. Сначала создайте репозиторий git для проекта.

Затем создайте приложение, запустив:

heroku create <app-name>

Наконец, разверните его на Heroku с помощью:

git push heroku master

И теперь приложение должно быть на Heroku, но оно пока не будет работать, потому что оно не подключено ни к одной базе данных MySQL.

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

Шаг 6: Настройка ClearDB

Установите дополнение ClearDB к нашему приложению Heroku с помощью:

heroku addons:create cleardb:ignite

Примечание: под зажиганием понимается бесплатная версия ClearDB. Не стесняйтесь использовать другие версии, если вам это нужно.

После установки ClearDB переменная конфигурации с именем CLEARDB_DATABASE_URL будет автоматически добавлена ​​в наше приложение Heroku. Чтобы получить его из нашей командной строки, запустите:

heroku config | findstr CLEARDB_DATABASE_URL

Наша командная строка напечатает URL-адрес следующим образом:

mysql://<user>:<password>@<host>/<database>?reconnect=true

Обратите внимание на формат, потому что нам нужно будет установить переменные среды для нашего приложения Heroku следующим образом:

heroku config:set DB_USER=<user>
heroku config:set DB_PASSWORD=<password>
heroku config:set DB_HOST=<host>
heroku config:set DB=<database>

Шаг 7: MySQL Workbench

Мы настроили соединение базы данных MySQL с ClearDB, но не хватает одной вещи — таблицы. Итак, давайте создадим его так же, как мы сделали для базы данных localhost.

Откройте MySQL Workbench и добавьте новое подключение к базе данных. Назовите соединение как угодно. Используйте значение <host> из CLEARDB_DATABASE_URL в качестве хоста. И используйте значение <user> в качестве имени пользователя.

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

mysql://<user>:<password>@<host>/<database>?reconnect=true

Затем нажмите «Сохранить в хранилище», чтобы ввести пароль ClearDB <password>.

После этого нажмите «Проверить соединение» в нижней части окна. Вы должны увидеть всплывающее окно с сообщением об успешном подключении.

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

Нажмите на соединение с ClearDB, и вы увидите, что по умолчанию имя нашей схемы — ClearDB <database>.

Наконец, давайте создадим таблицу book_reviews точно так же, как мы сделали для нашей базы данных localhost.

Шаг 8: Еще кое-что…

Ура! Мы развернули наше приложение React Express на Heroku, мы успешно настроили ClearDB и нашу базу данных MySQL, что еще?

Итак, если вы зайдете на сайт приложения Heroku (в моем случае это ravenbooks.herokuapp.com), вы заметите, что клиент не может ничего запрашивать у сервера. Консоль отправляет ошибку 404, потому что, если вы помните из прошлой статьи, все URL-адреса, которые мы используем в нашем приложении React, были localhost:3000 вместо https://ravenbooks.herokuapp.com/.

Чтобы исправить эту ошибку, измените все URL-адреса в App.js, Add.js и других компонентах с https:localhost:3000/reviews на https://ravenbooks.herokuapp.com/reviews.

И теперь наше приложение должно работать идеально!

Спасибо за чтение!

И это завершение серии Давайте создадим CRUD-приложение MySQL Node.js! Если вы следили за новостями, спасибо, что дочитали эту серию до конца. Я надеюсь, что это поможет вам приступить к внедрению MySQL в ваши проекты React. Пожалуйста, поставьте лайк и поделитесь им, если это так.

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

Первоначально опубликовано на https://lo-victoria.com.