Express, наиболее используемая в мире платформа Node.js, позволяет разработчикам создавать серверные веб-серверы с помощью JavaScript. Эта платформа предоставляет большую часть того, что нужно разработчикам серверной части, из коробки, упрощая маршрутизацию и ответ на веб-запросы.

У нас уже есть руководство по всему, что вам следует знать о Express.js, поэтому эта практическая статья покажет вам, как его использовать. В этом руководстве объясняется, как создать и развернуть пример приложения Node.js с помощью Express.js.

Как быстро создавать приложения с помощью Express.js

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

Предварительные условия

Чтобы следовать этому руководству, убедитесь, что на вашем компьютере установлено следующее:

  • Node.js и диспетчер пакетов Node (npm) — необходимая среда выполнения и менеджер пакетов для JavaScript.
  • Git — распределенная система контроля версий, облегчающая совместную разработку программного обеспечения.

Генератор экспресс-приложений

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

Официальный генератор Express от Express.js — это пакет Node, который позволяет генерировать новый скелет приложения. Это можно сделать, сначала создав папку для вашего приложения, а затем запустив npx команда (доступна в Node.js 8.2.0):

mkdir express-application
npx express-generator

При успешной генерации терминал отображает список созданных папок/файлов и команды для установки зависимостей и запуска приложения. Установите зависимости, выполнив команду ниже:

npm install

Затем запустите веб-сервер:

DEBUG=myapp:* npm start

Скелетное приложение имеет предварительно созданный индексный маршрут, который отображает базовую домашнюю страницу. Вы можете просмотреть это в своем браузере, посетив localhost:3000.

Изучение приложения Skeleton Express

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

/
|-- /node_modules
|-- /public
|-- /routes
    |-- index.js
    |-- users.js
|-- /views
    |-- error.jade
    |-- index.jade
    |-- layout.jade
|-- app.js
|-- package.json
  • node_modules: В этом каталоге хранятся все установленные зависимости и библиотеки проекта.
  • публика: Содержит статические ресурсы, такие как CSS, JavaScript, изображения и т. д. Эти файлы передаются непосредственно в браузер клиента.
  • маршруты: Содержит файлы, отвечающие за определение различных маршрутов и обработку запросов, поступающих с разных URL-адресов.
  • Просмотры: Содержит шаблоны или представления, которые сервер отображает для создания пользовательского интерфейса. Здесь, ошибка.нефрит, index.jadeи макет.нефрит представляют собой шаблоны, написанные на языке шаблонов Jade. Они помогают структурировать и отображать динамический контент для пользователей.
  • приложение.js: Этот файл обычно служит точкой входа для приложения Express. Здесь настраивается сервер, настраивается промежуточное программное обеспечение, определяются маршруты и обрабатываются запросы и ответы.
  • пакет.json: Этот файл содержит метаданные о приложении. Это помогает управлять зависимостями и конфигурацией проекта.

Понимание обработки маршрутов

В вашем приложении Express маршруты Каталог, в котором маршруты определяются как отдельные файлы. Основной маршрут, часто называемый индексным маршрутом, находится в маршруты/index.jфайл s.

Этот индексный маршрут имеет дело с GET запрос, отвечая веб-страницей, созданной платформой в формате HTML. Ниже приведен фрагмент кода, иллюстрирующий, как GET запрос обрабатывается для отображения базовой страницы приветствия:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});

module.exports = router;

Если вы измените res.render() функционировать, чтобы res.send()тип ответа изменится с HTML на JSON:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send({ key: 'value' });
});

module.exports = router;

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

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

Отправка GET запросить localhost:3000/newEndpoint?someParam=whatever выдаст вывод JSON, содержащий строку «что угодно».

Запрос GET отправляется локально запущенному приложению в Postman.

Хостинг приложений Express и Kinsta

Выполнение веб-запросов с вашего компьютера на ваш компьютер — это удобно, но веб-разработка не завершена, пока вы не отключитесь от локального хоста. К счастью, Kinsta упрощает развертывание приложений в Интернете, даже если вам нужна база данных.

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

Прежде чем развертывать приложение Express на хостинге приложений Kinsta, крайне важно передать код и файлы вашего приложения выбранному вами провайдеру Git (Bitbucket, GitHub или GitLab). Убедитесь, что вы создали .gitignore файл в корневом каталоге вашего приложения и включите node_modules чтобы предотвратить отправку этих файлов вашему провайдеру Git.

После настройки репозитория выполните следующие действия, чтобы развернуть приложение Express в Kinsta:

  1. Войдите в систему или создайте учетную запись, чтобы просмотреть панель управления MyKinsta.
  2. Авторизуйте Kinsta у своего провайдера Git.
  3. Нажмите Приложения на левой боковой панели, затем нажмите Добавить приложение.
  4. Выберите репозиторий и ветку, из которой вы хотите выполнить развертывание.
  5. Присвойте своему приложению уникальное имя и выберите Расположение дата-центра.
  6. Затем настройте среду сборки. Выберите Стандартная сборочная машина config с рекомендуемой опцией Nixpacks для этой демонстрации.
  7. Использовать все конфигурации по умолчанию и затем нажать Создать заявку.

Kinsta работает с генератором приложений Express прямо из коробки! После выполнения этих шагов ваше приложение автоматически начнет процесс сборки и развертывания.

На экране развертывания будет указан URL-адрес, по которому Kinsta развернет ваше приложение. Вы можете добавить /newEndpoint?someParam=whatever чтобы протестировать конечную точку, созданную в предыдущем разделе этой статьи.

Как добавить базу данных в приложение Express

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

Вот как вы можете создать базу данных на Kinsta:

  1. Перейдите к Базы данных раздел на боковой панели панели управления MyKinsta.
  2. Нажмите Создать базу данных. Настройте данные базы данных, введя имя и выбрав тип базы данных.
  3. Выберите PostgreSQL вариант. А Имя пользователя базы данных и пароль автоматически генерируется:

    Шаг настройки базы данных MyKinsta, связанный с добавлением новой базы данных.
    Этап настройки базы данных MyKinsta, заключающийся в добавлении новой базы данных.

  4. Выберите то же самое Расположение дата-центра где вы разместили свое приложение Express, и настройте желаемый размер.
  5. Подтвердите платежную информацию и нажмите Создать базу данных.

После успешного создания базы данных:

  1. Получите доступ к сведениям о базе данных, щелкнув по ней. в Обзор страницу, перейдите к Внутренние соединения раздел.
  2. Выберите подходящее приложение.
  3. Отметьте опцию, чтобы Добавьте переменные среды в приложение.
  4. Нажмите на Добавить соединение для подключения вновь созданной базы данных и вашего приложения.

Затем скопируйте строку подключения вновь созданной базы данных, чтобы подключиться к ней с помощью инструмента базы данных. Подойдет любой инструмент подключения SQL, но в этой демонстрации используется Beekeeper. Откройте приложение и нажмите «Импортировать из URL-адреса», вставьте строку подключения и нажмите «Импортировать». Это позволит вам выполнять SQL в только что созданной базе данных, размещенной на Kinsta.

Затем создайте элементарную таблицу с одной записью, выполнив несколько операторов SQL для размещенной базы данных с помощью инструмента базы данных:

CREATE TABLE "States"
( id integer CONSTRAINT states_pk PRIMARY KEY,
  state_name varchar(100),
  capital varchar(100),
  state_bird varchar(100),
  "createdAt" TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  "updatedAt" TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

INSERT INTO "States"
VALUES(1, 'ohio', 'columbus', 'cardinal');

Добавьте в свой проект следующие пакеты базы данных:

npm install sequelize pg

sequelize зависимость — это ORM для Node.js, и pg служит клиентом PostgreSQL, обеспечивая взаимодействие между приложениями Node.js и базами данных PostgreSQL.

Затем напишите код приложения, которое принимает GET запрос с id параметр и возвращает информацию в базе данных, связанную с этим id. Для этого измените свой index.js файл соответственно:

var express = require('express');
var router = express.Router();
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize(process.env.CONNECTION_URI, {
  dialect: 'postgres',
  protocol: 'postgres',
});

const State = sequelize.define('State', {
  // Model attributes are defined here
  state_name: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  capital: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  state_bird: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
}, {
  // Other model options go here
});

async function connectToDB() {
  try {
  sequelize.authenticate().then(async () => {
  // await State.sync({ alter: true });
  })
  console.log('Connection has been established successfully.');
  } catch (error) {
  console.error('Unable to connect to the database:', error);
  }
}
connectToDB();

/* GET a new resource */
router.get('/state', async function(req, res, next) {
  const state = await State.findByPk(req.query.id);
  if (state) {
   res.send(state)
  } else {
   res.status(404).send("state not found");
  }
});


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

module.exports = router;

Зафиксируйте изменения кода и отправьте их в свой репозиторий Git. Затем приступайте к повторному развертыванию вручную на Kinsta или дождитесь автоматического развертывания.

Теперь, когда вы запрашиваете /states конечная точка с id=1вы получите состояние из базы данных.

GET-запрос к полнофункциональному приложению, размещенному в MyKinsta.
GET-запрос к полнофункциональному приложению, размещенному в MyKinsta.

Вот и все! Полный код проекта можно посмотреть на GitHub.

Краткое содержание

В этой статье показано, как платформа Express позволяет быстро и легко создавать и развертывать приложения Node.js. Вы можете создать новое приложение с помощью экспресс-генератора всего за несколько простых шагов. Благодаря хостингу приложений Kinsta развертывание приложения упрощается и требует минимальной настройки.

Возможности и простота использования платформы Express для разработки приложений Node.js значительны. С Kinsta вы можете использовать тот импульс, который дают вам Express и Node.js, на этапе развертывания вашего проекта, не тратя время на настройку.

Что вы думаете о генераторе приложений Express? Использовали ли вы его ранее для разработки каких-либо приложений? Не стесняйтесь поделиться своим опытом в комментариях ниже!