Как поднять сервер на node js
Перейти к содержимому

Как поднять сервер на node js

  • автор:

Сервер Node.js без фреймворка¶

В этой статье представлен простой статический файловый сервер, построенный на чистом Node.js без использования фреймворка.

Современное состояние Node.js таково, что практически все, что нам нужно, обеспечивается встроенными API и всего несколькими строчками кода.

Пример¶

Простой статический файловый сервер, построенный с помощью Node.js:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
import * as fs from 'node:fs'; import * as http from 'node:http'; import * as path from 'node:path'; const PORT = 8000; const MIME_TYPES =  default: 'application/octet-stream', html: 'text/html; charset=UTF-8', js: 'application/javascript', css: 'text/css', png: 'image/png', jpg: 'image/jpg', gif: 'image/gif', ico: 'image/x-icon', svg: 'image/svg+xml', >; const STATIC_PATH = path.join(process.cwd(), './static'); const toBool = [() => true, () => false]; const prepareFile = async (url) =>  const paths = [STATIC_PATH, url]; if (url.endsWith('/')) paths.push('index.html'); const filePath = path.join(. paths); const pathTraversal = !filePath.startsWith(STATIC_PATH); const exists = await fs.promises .access(filePath) .then(. toBool); const found = !pathTraversal && exists; const streamPath = found ? filePath : STATIC_PATH + '/404.html'; const ext = path .extname(streamPath) .substring(1) .toLowerCase(); const stream = fs.createReadStream(streamPath); return  found, ext, stream >; >; http.createServer(async (req, res) =>  const file = await prepareFile(req.url); const statusCode = file.found ? 200 : 404; const mimeType = MIME_TYPES[file.ext] || MIME_TYPES.default; res.writeHead(statusCode,  'Content-Type': mimeType >); file.stream.pipe(res); console.log(`$req.method> $req.url> $statusCode>`); >).listen(PORT); console.log(`Server running at http://127.0.0.1:$PORT>/`); 

Разбиение¶

Следующие строки импортируют внутренние модули Node.js.

1 2 3
import * as fs from 'node:fs'; import * as http from 'node:http'; import * as path from 'node:path'; 

Далее у нас есть функция для создания сервера. https.createServer возвращает объект Server , который мы можем запустить, прослушивая по PORT .

1 2 3 4 5
http.createServer((req, res) =>  /* handle http requests */ >).listen(PORT); console.log(`Server running at http://127.0.0.1:$PORT>/`); 

Асинхронная функция prepareFile возвращает структуру: < found: boolean , ext: string, stream: ReadableStream >. Если файл может быть передан (серверный процесс имеет доступ и уязвимость обхода пути не обнаружена), то в качестве statusCode , указывающего на успех, мы вернем HTTP-статус 200 (в противном случае мы вернем HTTP 404 ). Обратите внимание, что другие коды статуса можно найти в http.STATUS_CODES . При статусе 404 мы вернем содержимое файла ‘/404.html .

Расширение запрашиваемого файла будет разобрано и приведено к нижнему регистру. После этого мы выполним поиск в коллекции MIME_TYPES нужных MIME-типов. Если совпадений не найдено, то в качестве типа по умолчанию используется application/octet-stream .

Наконец, если ошибок нет, мы отправляем запрошенный файл. В file.stream будет содержаться поток Readable , который будет передан в res (экземпляр потока Writable ).

res.writeHead(statusCode,  'Content-Type': mimeType >); file.stream.pipe(res); 

Ссылки¶

Как поднять сервер на node js?

Здравствуйте. Делаю тестовое задание по фронтенду. Всю часть фронтенда я знаю как сделать, но чтобы понимать что я умею слать API запросы попросили организовать сервер на NodeJS фреймворк Express.

Помогите пожалуйста, я в поднятии серверов нуб. Как там можно поднять сервер и написать простой API для различных методов get, post и тд?

  • Вопрос задан более трёх лет назад
  • 918 просмотров

1 комментарий

Простой 1 комментарий

joeberetta

Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

Вам уже ответили, но на будущее, гляньте доки Express. У них(как у экспресс, так и у его аналогов) hello-world начинается с поднятия базового сервера с роутами и прочим

Решения вопроса 1

arka33

const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening on port $!`))

Node.JS или PHP: что выбрать для разработки проекта

Когда вам нужно выбирать между Node.js и PHP, как вы решите, какой из языков использовать? Давайте разберемся!

И PHP, и Node.js — эффективные варианты для внутренней разработки. Как и в случае с другими технологиями, в сообществе разработчиков ведутся споры о том, какая из них является лучшей. С одной стороны, у нас есть относительно новая технология Node.js, которая позволяет без проблем использовать JavaScript для внутренней и внешней разработки. С другой стороны, у нас есть PHP, который остается одной из самых популярных и используемых технологий всех времен. Так кто из них лучше? В этой сравнительной статье мы подробно рассмотрим их обоих, понимая преимущества / недостатки и сравнивая их:

Что такое PHP? Обзор
PHP (аббревиатура от Hypertext Preprocessor) — это серверный скриптовый язык с открытым исходным кодом, созданный в 1994 году Расмусом Лердорфом. С момента своего создания он имел огромный успех. Например, недавний опрос показал, что PHP используется 78,9% всех веб-сайтов с серверным языком программирования.

Другими словами, почти 8 из 10 веб-сайтов, которые вы просматриваете в Интернете, так или иначе используют PHP. Кроме того, постоянно растущая популярность CMS (систем управления контентом), таких как WooCommerce, Shopify, WordPress и Drupal, показывает, как PHP имеет в руках внутреннюю разработку.

Что такое Node.js? Обзор
Node.js — это кроссплатформенная среда выполнения с открытым исходным кодом, которая выполняет код JavaScript за пределами веб-браузера и работает на движке V8. Node.js позволяет разработчикам использовать JavaScript для написания инструментов командной строки и серверных сценариев (запуск серверных сценариев для создания динамического содержимого веб-страницы перед отправкой страницы в браузер посетителя). Идея Node.js заключается в объединении разработки веб-приложений с использованием одного языка программирования вместо разных языков для клиентских и серверных скриптов.

Райан Даль разработал NodeJS в 2009 году как способ разработки масштабируемых и быстрых приложений. Он использует управляемую событиями неблокирующую модель ввода-вывода. Эта технология очень быстро набирает популярность в сообществе разработчиков, и некоторые уважаемые бренды уже воспользовались возможностями, предоставляемыми Nodejs.

Node.js против PHP: что лучше для веб-разработки?

Node.js против PHP: производительность
Производительность — это показатель, который измеряет, как код написан на Node.js или PHP, и его поведение в отношении таких ключевых показателей эффективности, как плавность и загрузка страниц. Высокопроизводительные технологии улучшают результативность вашего проекта с помощью ключевых показателей эффективности, которые сильно влияют на взаимодействие с пользователем.

Сравнение этих двух технологий, Node.js и PHP, производительности, определенных проектов и опций, контролируемых квалифицированными разработчиками , позволяет PHP работать быстрее, чем обычно. Например, Facebook создал Hack, который был разработан для совместимости с PHP. Взлом направлен на то, чтобы ускорить ваш существующий PHP-код. А с PHP 8 с JIT вы можете ожидать еще более высоких скоростей. Однако производительность Node.js в большинстве случаев лучше. Хотя производительность также во многом является результатом навыков и опыта команды разработчиков, Node.js предоставляет несколько преимуществ по сравнению с PHP с точки зрения производительности, которые выходят за рамки навыков разработчика:

Меньше зависимостей
Каждый запрос к проекту PHP должен быть направлен на веб-сервер, и на нем запускается интерпретатор PHP, который обрабатывает код и обслуживает его. Node.js, с другой стороны, не требует такого количества зависимостей, и даже несмотря на то, что вы используете серверную структуру, он легкий и управляет различными аспектами приложения.

Нет переводчика
Node.js более гибкий и компактный. Это результат работы Google. Технический гигант внес огромный вклад в производительность движка JavaScript V8. Стоит отметить, что Node.js — это компилируемый язык, а PHP — интерпретируемый. Скомпилированный код может легко выполняться процессором ПК. Это означает, что исполняемый код указан на родном языке ЦП. Но интерпретируемый код должен быть переведен из исходного формата во время выполнения в машинные инструкции ЦП. Этот перевод выполняется переводчиком, и это приводит к более медленной работе языка переводчика.

Управляемый событиями неблокирующий поток ввода / вывода
Большинство серверных языков, включая PHP, используют модель блокировки. Это означает, что когда вы запрашиваете информацию из базы данных, запрос выполняется и завершает процесс перед переходом к следующему оператору. С Node.js вам не нужно ждать, вместо этого вы можете создавать функции обратного вызова, которые прослушивают процессы и выполняют их одновременно.

Где проблемы у PHP
Хотя проекты Node.js быстрее PHP, есть определенные проблемы. Основная из них заключается в том, что Node.js работает в 1 потоке, а большинство веб-серверов являются многопоточными, что означает, что они обрабатывают запросы параллельно. Итак, написание асинхронного кода имеет свои уникальные проблемы.

Кроме того, в отличие от Python или Java и других языков программирования общего назначения, PHP был создан в основном для Интернета. Благодаря этому он обладает всеми необходимыми функциями для работы с серверами, HTML и базами данных . Комплексный язык PHP позволяет вам обойтись минимальным количеством JS-кода в вашем интерфейсе.

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

Node.js против PHP: разработка
PHP — это чисто серверный язык программирования, и это делает его варианты использования приложений весьма ограниченными. Технически он принадлежит к стеку LAMP, аббревиатуре Linux, Apache, MySQL и PHP / Perl / Python. Таким образом, чтобы тестировать, создавать, управлять или даже проектировать функциональный веб-проект, вы должны быть достаточно опытными в настройке и подходе к различным системам, а также с использованием CSS и HTML (в противном случае вам нужно будет нанять команду для работы в других областях). Возможность иметь дело с уникальными системами чрезвычайно усложняет процесс обучения. Несмотря на вышеупомянутые проблемы, PHP динамично развивается, и разработчики часто придумывают новые идеи для улучшения его функциональности и возможностей.

Node.js здесь лучше PHP? Он, безусловно, имеет свои преимущества перед последним в отношении разработки, поскольку Node.js объединяет некоторые необходимые функции под прикрытием одного бесшовного пакета с нулевой фрагментацией функциональности.

Таким образом, вы сможете использовать его для разработки интегральных бэкэнд-моделей, но вам по-прежнему потребуется обратный прокси, такой как Nginx или Apache, инфраструктура HTTP, такая как Express.js, и база данных, такая как MySQL. Тем не менее, JavaScript — это язык разработки с полным стеком, что означает, что он полностью способен самостоятельно разрабатывать веб или мобильные приложения без каких-либо других технологий, кроме JS.

Но это еще не все. Для большинства веб-разработчиков кодирование на PHP — более быстрый вариант, поскольку он обеспечивает более простое использование. Хороший разработчик PHP может писать код на этом языке со значительно большей скоростью, чем с Node.js. Это в первую очередь потому, что нет необходимости использовать конвертеры или компиляторы. PHP позволяет вам установить соединение с вашей базой данных SQL без ограничений или ограничений хостинга. Однако есть компромисс — проекты PHP работают не так быстро, как проекты, разработанные с помощью Node.js.

Для Node.js развертывание фреймворков и приложений кажется более сложной задачей; Несмотря на то, что код под Node.js написан, он выполняется более плавно и быстро, поскольку обеспечивает низкую нагрузку на сервер.

Поэтому, хотя кодирование на PHP — отличный вариант, когда вам нужно быстрое решение или если вам нужен более сложный, устойчивый и эффективный вывод, используйте Node.js.

Победитель: самые опытные разработчики сказали бы, что это ничья. Однако система управления (NPM) дает Node.js дополнительные точки развития, но их атрибуты в этом отношении весьма схожи.

Node.js против PHP: база данных
PHP обычно используется в сотрудничестве с реляционными и традиционными базами данных, такими как MariaDB, PostgreSQL и MySQL. Хотя вы можете использовать системы баз данных NoSQL с PHP, эти варианты не очень популярны, а время обработки требует больших усилий и занимает очень много времени.

Node.js, с другой стороны, без проблем работает с базами данных NoSQL (а не только с SQL), такими как CouchDB, MongoDB, а также с системами графических баз данных, такими как Neo4j. Кроме того, пакеты NPM почти для всех баз данных можно найти в реестре npm.

Так что это значит? Системы баз данных MySQL особенно уязвимы для межсайтовых сценариев (XSS), атак SQL-инъекций и многого другого. Так как PHP обычно используется в сотрудничестве с MySQL, проекты, которые вы выполняете на этом языке, могут быть уязвимы для таких проблем. С другой стороны, Node.js отлично работает с NoSQL и базой данных; хотя он подвергается атакам с использованием инъекций, они не являются обычным явлением и почти несущественны по сравнению с уязвимостями SQL. Основная причина в том, что он новый, и дизайн их кода построен таким образом, чтобы сделать их устойчивыми к таким проблемам.

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

Победитель: NodeJS. В заключение, если вы намереваетесь разработать масштабируемый веб-проект, который будет последовательно и беспрепятственно извлекать данные из реляционных, обычных или NoSQL баз данных, Node.js — это то, что вы хотите использовать.

Но если вам нужен доступ к большему количеству опций систем управления базами данных, то лучше всего использовать PHP. Однако это подразумевает более утомительный процесс, если вы решите выбрать нереляционные базы данных и базы данных NoSQL.

Node.js против PHP: хостинг
Метрика хостинга в этом сравнении Node.js и PHP измеряет диапазон совместимости, которую разделяет конкретная технология, или предоставляет различные варианты услуг хостинга. Это связано в первую очередь с тем, что количество доступных альтернатив напрямую влияет на расходы на хостинг. При выборе хоста также следует учитывать безопасность и скорость веб-приложения. Для Node.js у вас есть ряд альтернатив, которые помогают технологии работать на конкурентной основе.

Он измеряет диапазон совместимости технологической платформы с различными поставщиками услуг хостинга. Количество доступных альтернатив напрямую влияет на расходы на хостинг. При выборе хоста также следует учитывать скорость и безопасность веб-приложения. Организация, обслуживающая Node.js (Joyent), предоставляет систему SmartOS, которая отлично подходит для повышения производительности, простоты развертывания и отладки. Кроме того, с Nodejitsu и Heroku легко использовать Node.js для проекта «Платформа как услуга».

С другой стороны, PHP косвенно и прямо обеспечивает работу почти 80% Интернета. Благодаря безумному охвату эта технология разработана для совместимости со всеми основными поставщиками услуг хостинга. Стек LAMP также позволяет удовлетворить потребности множества серверов. Тем не менее, стек LAMP не рекомендуется как самый безопасный технологический стек для подбора хостинга.

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

Node.js против PHP: практическое применение
Node.js обычно применяется в нескольких местах, таких как многопоточные приложения, веб-приложения, браузеры и игровые серверы. Технология исключительно хороша для создания динамических одностраничных приложений, которые работают в режиме реального времени с интенсивным использованием данных, включая распределенные сеансы на многочисленных устройствах: потоковые сервисы (Netflix), мессенджеры (Slack), онлайн-обучение (Coursera) , социальные сети (Twitter), финтех-приложения (PayPal), инструменты управления проектами (Trello и Asana), игровые приложения, живые чаты, устройства и приложения Интернета вещей с интенсивным использованием данных и т. д.

С другой стороны, PHP обычно используется для веб-проектов. А поскольку он построен как язык, полностью ориентированный на серверную часть, его можно легко интегрировать с централизованными серверами, базами данных и HTML. Это также лучший выбор для проектов стека LAMP, таких как Apache, MySQL и Linux.

PHP применяется, когда вы имеете дело с CMS, такими как Joomla, WordPress и т. Д. (Эти системы позволяют очень быстро настроить ваш веб-проект). PHP также практически применяется для создания торговых площадок электронной коммерции, эффективных веб-сайтов, платформ электронного маркетинга, деловых или личных блогов. Некоторые из наиболее заметных проектов PHP включают MailChimp, Wikipedia, Yahoo, Tumblr и Flickr, и они демонстрируют впечатляющие результаты, которых можно достичь с помощью сочетания PHP и централизованного сервера.

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

Node.js против PHP: скорость выполнения
Как мы уже упоминали в этом сравнении, эти технологии придерживаются различных концепций при обработке запросов. PHP имеет асинхронные и более медленные процедуры выполнения кода. Это означает, что все модули или функции обрабатываются в указанном коде порядке.

Таким образом, если конкретный запрос не выполняется, последующий не начнется, пока не будет завершен предыдущий. Процесс выполнения кода в PHP выглядит следующим образом:

  • PHP отправляет запрос в файловую систему компьютера.
  • Он ждет, пока файловая система откроется, и прочитает запрос.
  • Он отправляет контент клиенту.
  • Обрабатывает следующую строку кода или запрос.
  • Благодаря движку V8, асинхронному выполнению и взаимодействию с сервером в реальном времени Node.js предлагает лучшую скорость выполнения и, безусловно, превосходит PHP.

  • Node.js может обрабатывать несколько функций и событий параллельно.
  • Эта технология предлагает мощную гибкость, поскольку она отлично подходит для создания любого нестандартного решения.
  • Он использует JavaScript, поэтому один язык используется во всем приложении, включая серверную часть и интерфейсную часть, что делает операции с кодом очень удобными.
  • Благодаря контейнеризации или микросервисам масштабируемость архитектуры может быть легко достигнута.
  • Его служебные вызовы легче, чем вызовы PHP.
  • NodeJS позволяет устанавливать соединение клиент-сервер в реальном времени.
  • Обеспечивает простоту работы с JSON.

  • Node.js появился относительно недавно, поэтому ресурсов поддержки и сообщества гораздо меньше.
  • Системы управления контентом не поддерживают его.
  • Он не подходит для управления большими файлами.
  • Это совершенно неэффективно с веб-приложениями, которые отображают сложную графику и вызывают высокую нагрузку на ЦП.
  • PHP работает практически на всех серверах и платформах.
  • Он поддерживает бесчисленное количество CMS, библиотек и фреймворков.
  • Среду разработки и процесс легко настроить.
  • В отличие от Node.js. вам не нужен виртуальный сервер с доступом по SSH для запуска PHP.
  • Эта технология — один из самых устойчивых, хорошо проработанных и популярных языков программирования.
  • 80% веб-сайтов построены на PHP.
  • WordPress, самая используемая CMS в мире, использует PHP.
  • Существует сильное сообщество веб-разработчиков, которые вносят свой вклад в развитие языка, вспомогательного программного обеспечения и учебных материалов.
  • Его очень легко научиться и быстро кодировать.
  • Для этого требуется меньше строк кода и аккуратный синтаксис кода.
  • Его поддерживают многие провайдеры интернет-хостинга.

  • Эффективность разработки
  • Последовательный обратный вызов с серверов и высокая скорость
  • Данные в реальном времени
  • Нет требований к масштабированию и централизованный сервер
  • Портативность

Окончательное решение: Node JS или PHP?
Невозможно выбрать между Node.js и PHP. У каждой есть свои преимущества и недостатки по технологии, которая превосходит другую. Но что вам действительно нужно выбрать, то, что лучше всего подходит для вашего проекта.

Для этого просто напишите спецификации вашего продукта и сравните, как Node JS и PHP будут работать с ним. Затем найти тот, который оптимально выполнит ваш проект. Кроме того, вы должны учитывать разработчиков, с которыми вы работаете. Если они лучше умеют использовать PHP, вы можете выбрать его. Учитывайте и фактор того, что найти программиста под конкретную технологию потребует времени и сил.

HR Блог для IT рекрутера в Телеграм

Хочешь всегда получать новые статьи, бесплатные материалы и полезные HR лайфхаки! Подписывайся на нас в Telegram! С нами подбор ит персонала становится проще 😉

Как настроить Node.js Express сервер для React

Аватарка пользователя Katerina Kashleva

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

Обложка поста Как настроить Node.js Express сервер для React

React – это библиотека JavaScript для разработки пользовательских интерфейсов. Она позволяет создавать эффективные и масштабируемые веб-приложения, основанные на компонентной архитектуре.

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

Введение

Это руководство поможет вам разработать простое приложение на React и подключить его к серверу, созданному с использованием Node.js. Мы начнем с создания React приложения с помощью команды create-react-app , а затем настроим его подключение к серверу Node.js c помощью proxy

Необходимые условия

Для успешного выполнения данного гайда будет полезно иметь следующее:

  • Знакомство/небольшой опыт работы с Node.js, Express, npm и React.js.
  • Установленный Node.js.
  • Текстовый редактор, предпочтительно VS Code.
  • Веб-браузер, в данном случае Google Chrome.

Настройка структуры папок

Как настроить Node.js Express сервер для React 1

Файловая структура приложения

Первым шагом будет создание корневой папки для нашего приложения с именем express-react-app , в котором будут содержаться все файлы приложения. Затем мы создадим папку client , которая будет содержать все файлы React приложения.

Папка node_modules будет автоматически создана при установке пакетов NPM и будет содержать все пакеты NPM для файла server.js .

Далее нам потребуется создать файл server.js . В этом файле будет размещен сервер Express, который будет выступать в качестве нашего бэкенда.

Файл package.json будет автоматически сгенерирован, когда в терминале будет выполнена команда npm init -y .

Создание React приложения

Из терминала перейдите в корневую директорию с помощью команды cd и выполните следующие команды:

$cd express-react-app $npx create-react-app client 

Вышеуказанные команды создадут React приложение названием client внутри корневой директории.

Настройка сервера Express

Следующий шаг состоит в создании сервера Express в файле server.js .

Из терминала перейдите в корневую директорию и выполните следующую команду:

$npm init -y 

Команда автоматически сгенерирует файл package.json . Затем нам потребуется выполнить следующую команду для установки Express, и она будет сохранена в качестве зависимости в файле package.json .

$npm install express --save 

Теперь отредактируйте файл server.js следующим образом:

const express = require('express'); //Строка 1 const app = express(); //Строка 2 const port = process.env.PORT 5000; //Строка 3 // Сообщение о том, что сервер запущен и прослушивает указанный порт app.listen(port, () => console.log(`Listening on port $`)); //Строка 6 // Создание GET маршрута app.get('/express_backend', (req, res) => < //Строка 9 res.send(< express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' >); //Строка 10 >); //Строка 11 

Строки 1 и 2 – подключают модуль Express и позволяют использовать его внутри файла server.js .

Строка 3 – Установка порта, на котором будет работать сервер Express.

Строка 6 – будет отображено сообщение в консоли о том, что сервер работает исправно.

Строка 9 и 11 – установка GET маршрута, который позже мы будем получать из нашего клиентского React приложения.

Настройка proxy

На этом шаге Webpack Development Server был автоматически сгенерирован при выполнении команды create-react-app . Наше React приложение работает на Webpack Development Server на стороне фронденда.

Webpack Development Server (WDS) – это инструмент, который помогает разработчикам вносить изменения во фронтенд веб-приложения и автоматически отображает эти изменения в браузере без необходимости обновления страницы.

Мы можем настроить проксирование запросов API с клиентской стороны на API на серверной стороне. API на серверной стороне (Express сервер) будет работать на порту 5000.

Сначала настройте прокси для перехода в директорию client и найдите файл package.json . Добавьте следующую строку в него:

“proxy”: “http://localhost:5000” 

Измененный файл package.json будет выглядеть следующим образом:

< "name": "client", "version": "0.1.0", "private": true, "dependencies": < "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" >, "scripts": < "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" >, "eslintConfig": < "extends": [ "react-app", "react-app/jest" ] >, "browserslist": < "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] >, "proxy": "http://localhost:5000" > 

Измененный файл package.json позволит Webpack проксировать запросы API на сервер бэкенда Express, работающий на порту 5000.

Вызов бэкенд сервера Express из React

Сначала перейдите в папку client/src и отредактируйте файл App.js , чтобы он выглядел следующим образом:

import React, < useEffect, useState >from 'react'; import logo from './logo.svg'; import './App.css'; function App() < const [state, setState] = useState(null); const callBackendAPI = async () => < const response = await fetch('/express_backend'); const body = await response.json(); if (response.status !== 200) < throw Error(body.message) >return body; >; // получение GET маршрута с сервера Express, который соответствует GET из server.js useEffect(() => < callBackendAPI() .then(res =>setState(res.express)) .catch(err => console.log(err)); >, []) return (  
className="App-logo" alt="logo" />

Edit src/App.js and save to reload.

Learn React
); > export default App;

Внутри хука useEffect() вызывается функция callBackendAPI() . Эта функция будет получать данные с ранее созданного маршрута на сервере Express. При получении ответа от запроса fetch , значение res.express устанавливается в состояние state с помощью функции setState() .

Затем значение state выводится внутри элемента для отображения на странице.

Запуск приложения

Для запуска приложения перейдите в корневую директорию express-react-app

и выполните следующую команду:

$cd express-react-app $node server.js 

После запуска файла server.js следующим шагом будет переход в веб-браузер по адресу http://localhost:5000/express_backend, и будет отображено следующее сообщение:

Как настроить Node.js Express сервер для React 2

Успешный запуск бэкенда Express

Вышеуказанное демонстрирует, что наш сервер Express работает должным образом, и созданный нами маршрут GET функционирует, а также возможно получение этого маршрута с клиентской стороны.

Также обратите внимание, что путь URL совпадает с путем, который мы указали в нашем маршруте GET в файле server.js .

Затем перейдите в директорию client в терминале и выполните следующие команды:

$cd client $npm start 

Вышеуказанные команды запустят React сервер разработки, который работает на порту 3000, и автоматически откроется в веб-браузере.

На экране будет отображено следующее сообщение:

Как настроить Node.js Express сервер для React 3

Успешный запуск React App

Наконец, мы отобразили данные, полученные с маршрута GET в server.js , в нашем фронтенд React приложении, как было показано выше.

Если сервер Express отключен, сервер React всё равно будет продолжать работать. Однако связь с бэкендом будет потеряна, и ничего не будет отображаться.

Заключение

С помощью сервера Express можно сделать многое, например, осуществлять вызовы к базе данных. Однако в этом руководстве мы сосредоточились на том, как быстро подключить клиентское React приложение к серверу Express на стороне бэкенда.

Кодовые фрагменты и файлы, использованные в этом руководстве, можно найти в репозитории GitHub по этой ссылке.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *