Развертывание масштабируемых веб-приложений с помощью Heroku, React-TypeScript, Express и Sequelize

Введение

Последним шагом в жизненном цикле разработки является развертывание. В этой статье мы поговорим обо всем, что вам нужно для развертывания вашего проекта на Heroku. Хотя эта статья конкретно посвящена ReactT и Sequelize, многие шаги одинаковы при использовании ReactJ и других ORM.

Что вам нужно для начала

Во-первых, если вы еще этого не сделали, убедитесь, что ваш проект настроен с помощью git. Это включает в себя наличие файла .gitignore с node_modules внутри. После этого убедитесь, что вы используете прокси-сервер для всех ваших запросов на выборку и что в папке вашего клиента ваш package.json запускает сервер реагирования на указанном порту. Скрипт должен выглядеть так:

"scripts": {
    "start": "PORT=4000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Далее вам нужно создать учетную запись Heroku. После создания учетной записи вам необходимо связать свою учетную запись локально. Это можно сделать так:

npm install -g heroku

heroku login -i

На этом этапе вам будет предложено ввести адрес электронной почты и пароль. Если вы используете двухфакторную аутентификацию, вам нужно будет ввести свой адрес электронной почты и ввести ключ API в качестве пароля. Ваш API-ключ Heroku можно найти по адресу https://dashboard.heroku.com/account. Прокрутите вниз до API-ключа и скопируйте его. После успешного входа в систему вы можете создать свой проект Heroku.

heroku create -a example-app

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

heroku addons:create heroku-postgresql:mini

Теперь все готово для подключения вашего проекта к Heroku.

Подключение вашего проекта

Чтобы вы могли развернуть свой проект, Heroku должен иметь файл package.json в корне вашего проекта. В этом руководстве мы переместим весь код из папки вашего сервера в корневую папку и удалим пустую папку сервера. После того, как вы переместили код в корневую папку, вам нужно открыть файл package.json. Это должно выглядеть примерно так:

{
  "name": "examples",
  "version": "1.0.0",
  "description": "example project",
  "main": "server",
  "engines": {
    "node": "16.18.0",
    "npm": "8.19.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/example/example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/example/example/issues"
  },
  "homepage": "https://github.com/example/POS#readme",
  "dependencies": {
    "bcrypt": "^5.1.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "jsonwebtoken": "^9.0.0",
    "nodemon": "^2.0.20",
    "pg": "^8.8.0",
    "pg-hstore": "^2.3.4",
    "sequelize": "^6.28.0",
    "sequelize-cli": "^6.6.0"
  }
}

Есть несколько вещей, которые нужно проверить, прежде чем продолжить. Во-первых, убедитесь, что установлены обаSequelize и Sequelize-cli. Возможно, вы установили CLI Sequelize глобально, поэтому убедитесь, что он присутствует в вашем package.json. На этом этапе вы также захотите зайти в свой package.json в папке клиента и убедиться, что у вас есть все ваши зависимости,

 "dependencies": {
    "typescript": "4.0.x",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "bootstrap": "^5.2.3",
    "js-cookie": "^3.0.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.7.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4"
  },

После проверки вашего package.json откройте папку конфигурации, а затем config.json. Здесь вы собираетесь изменить производственный объект. Скопируйте и вставьте следующий код:

"production": {
    "use_env_variable": "DATABASE_URL",
    "dialect": "postgres",
    "dialectOptions": {
       "ssl": {
         "require": true,
         "rejectUnauthorized": false
       }
     }
   }

Это позволит вашей базе данных подключиться к Heroku. Далее обслуживаются статические файлы из внешнего интерфейса. cd в папку вашего клиента и выполните команду npm run build Это скомпилирует код реакции в статический файл, который можно будет обслуживать с сервера. Теперь перейдите к файлу вашего сервера. В данном случае он называется server.js, но вы можете увидеть его как index.js. Вам нужно будет установить dotenv, если вы еще этого не сделали, с помощью npm i dotenv Затем потребуйте его в верхней части файла вашего сервера следующим образом: require('dotenv/config) После того, как вы установили dotenv, также добавьте «путь» к вашему файлу, это можно сделать следующим образом: const path = require('path') Его не нужно устанавливать, потому что он автоматически поставляется с javascript. Убедитесь, что ваш порт является переменной. Определите его как const PORT = proccess.env.PORT || 3000 И также измените его при запуске сервера.

app.listen(PORT, async() => {
console.log('server is up')
await sequelize.authenticate()
console.log('database connected')
})

Затем убедитесь, что если ваша среда настроена на рабочую среду, вы обслуживаете статический файл.

if (process.env.NODE_ENV === 'production'){
    app.use(express.static(path.join(__dirname, "client/build")))
}

Теперь, когда весь ваш код готов для Heroku, последний шаг — настроить скрипты. Вам понадобится два; первый запустит сервер, а второй создаст вашу сборку реакции. Откройте файл package.json и перейдите к сценариям. Добавьте следующие скрипты

"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm run build"

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