Здравствуйте и добро пожаловать на финал серии Создадим приложение 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.