Фреймворк для разработки полного стека NodeJS на основе Koa2/React

Node.js React.js полный стек koa

На Github слишком много скаффолдов, и большинство из них могут быть сосредоточены только на веб-разработке переднего плана, такой как популярная экосистема React.create-react-appИ Vue-cli в экосистеме Vue, но, возможно, как и я, разработка с полным стеком, скаффолдинг, который фокусируется только на разработке интерфейса, не может удовлетворить все потребности, нам может потребоваться разработка более сложных проектов JS с полным стеком, так что здесь является введением. Еще одна среда разработки с полным стеком, основанная на NodeJS.koa-web-kit, не обязательно подходит для всех, но как минимум еще один выбор 🤣.

Некоторые особенности

  • ✨На основе самых популярных фреймворков и библиотек, включая, помимо прочего, Koa2, React, Bootstrap4 (только CSS), Webpack4, ES6+, Babel7...
  • 📦Готовый опыт разработки с полным стеком
  • 🔥 热加 加载 能 h 分析 h 分析 依 大 依 依, 分析 分析 分析 分析
  • 📉АСИНХРОНИЗАЦИЯ / ЖДИТЕ поддержки
  • 💖Модули CSS, прекомпилятор SASS, PostCSS, поддержка автопрефиксера
  • 🎉Добавить простой API-прокси, нет необходимости в громоздкой настройке nginx
  • 🌈 Может создавать статические веб-приложения, поддержка 🏗SSR (рендеринг на стороне сервера)
  • ⚡️ Развертывание в один клик для создания среды
  • 👷Долгосрочное обслуживание...🍻

Сервер

Серверная часть фреймворка основана наkoajs, фреймворк NodeJS MVC следующего поколения, разработчик до сих пор известенexpressjsосновные участники разработки. koa поддерживает новейший синтаксис async/await, позволяющий писать более качественный асинхронный код. И, у Koa есть лучший и более семантический механизм промежуточного программного обеспечения, вы можете сосредоточиться на разработке меньшего и более целенаправленного различного промежуточного программного обеспечения, а затем объединить их, чтобы сформировать мощную структуру, вместо прямого встраивания Многие функции добавлены в ядро ​​​​koa, что делает koa более легкий каркас.

Любое современное веб-приложение будет иметь слой API, который может быть разработан на других языках (например, java, go...), эти API могут быть развернуты на другом доменном имени, плюс нам нужен обратный прокси-сервер снаружи (nginx) настроить для решения проблемы междоменного интерфейса. Вообще говоря, они настраиваются в процессе эксплуатации и обслуживания, что делает настройку вашей среды разработки интерфейса сложной и трудоемкой. так вkoa-web-kit, мы также предварительно привязываем простой API-прокси, чтобы ускорить настройку интерфейсной среды. Вам нужно только настроить требуемый префикс API, чтобы он указывал на соответствующий фактический адрес API. Вот простой пример:

config = {
  //...other configs
  "API_ENDPOINTS": {
    //set a default prefix
    "defaultPrefix": "/prefix",
    //e.g http://127.0.0.1:3000/prefix/api/login -->proxy to--> http://127.0.0.1:3001/api/login
    "/prefix": "http://127.0.0.1:3001",
    "/prefix2": "http://127.0.0.1:3002",
  }
}

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

Generally in a production environment, it is recommended to configure a reverse proxy to forward your request directly to the backend api, not to send directly to the node, and then go to the back-end, which may make your request through the service node много.实际情况以项目为准。

Затем служба журнала также необходима для серверного приложения,koa-web-kitОн также предоставляет простую службу журналов, основанную на известной асинхронной библиотеке журналов.winston,Такие как:

const logger = require('./services/logger');
logger.info(msg);
logger.warn(msg);
logger.error(msg);

Вы можете добавлять настраиваемый вывод в разные файлы, базы данных и т. д. для различных нужд. По умолчанию файлы журнала находятся в корневом каталоге проекта../logsпод папку.

Вообще говоря, мы будем оптимизировать и сжимать файлы ресурсов внешнего интерфейса (css, js, html...), чтобы ускорить загрузку страницы, но мало кто будет рассматривать сжатие кода на стороне узла, в некоторых случаях вы не хотите, чтобы другие увидимся. Также важно сжать код на стороне узла. существуетkoa-web-kit, мы также предоставляем скрипты сборки для сжатия вашего кода nodejs, ура🍻.

Предположим, вам нужен динамический рендеринг шаблона в дополнение к статическому html и контенту, рендерингу через React,koa-web-kitиспользуется по умолчаниюnunjucksкак механизм рендеринга шаблонов, но если вы привыкли к другим механизмам шаблонов, просто установите понравившуюся библиотеку, механизм версии основан наconsolidate.jsдля обработки, поэтому вы можете использовать любой поддерживаемый шаблон 😀. Для React SSR (рендеринг на стороне сервера) он находится в стадии разработки, но при необходимости вы можете пойти и использовать некоторую структуру, напримерnext.js.

Должна ли быть интеграция с базой данных для так называемой среды разработки с полным стеком? Да, это необходимо, но для того, чтобы сделатьkoa-web-kitБолее легкий, не ограничен предварительно добавленными базами данных, а для современной веб-разработки все должно быть модульным, чтобы вы могли легкоnpm installЛюбая библиотека уровня базы данных, которую вы хотите удовлетворить вашим потребностям в сохранении, также может быть ситуация, когда ваша служба уровня данных может быть разработана другой командой на другом языке, вам просто нужно вызвать API «Да» (например, конфигурация прокси-сервера API выше), поэтому нет предварительной привязки библиотеки сохранения, вы можете установить ее в соответствии с вашими потребностями.

еще одинkoa-web-kitКрутая функция заключается в том, что вы можете устанавливать переменные среды вашего приложения разными способами. Все мы знаем, что каждому проекту нужна переменная среды для установки разных операционных сред. Например, в среде разработки нам нужно отправлять запросы API на адрес разработки. При развертывании в сети нам нужно настроить адрес API как онлайн-адрес. ; Другая ситуация в том, что в среде разработки мы будем логировать много вывода на консоль, но когда дело доходит до генерации, нам нужно убрать эти логи отладки и т.д... Также существует множество сторонних библиотек, таких как React, который будет основан на разныхNODE_ENVделать различные оптимизации. Поэтому установка переменных окружения очень важна для нашего проекта, вkoa-web-kit, вы можете установить переменные среды по-разному:

  • существуетconfigв папкеapp-config.js/app-config.js.sample, вы можете скопироватьapp-config.js.sampleприбытьapp-config.js, а затем задайте разные переменные для вашей локальной среды разработки.
  • Переменные среды, когда вы запускаете некоторые сценарии, вы можете переопределить свой локальный файл конфигурации через командную строку или сценарий оболочки.app-config.jsКонфигурация
  • По умолчаниюconfig.default/dev(prod).jsфайл, используйте его только в том случае, если вы не настроили 2 вышеуказанных метода.

Пожалуйста, обратитесь кkoa-web-kit#ENV_Configuration.

внешний интерфейс

Ну и, наконец, часть фронтенд-разработки,koa-web-kitИспользование новейших библиотек пользовательского интерфейса и инструментов разработки от сообщества, чтобы сделать вашу разработку лучше, в том числе:

  • React-v16, самая популярная UI-библиотека на данный момент, с сильной поддержкой сообщества, вы можете найти практически любую функцию, которую хотите (например, Vue.js?, см.vue-web-kit).
  • Bootstrap-v4, самый популярный фреймворк CSS/верстки (использует только часть CSS, без jQuery).
  • Используя ES6+, через webpack и babel, мы можем использовать новейшие стандарты js для разработки наших приложений, не обращая внимания на совместимость с браузером, компиляция нового синтаксиса будет основываться на вашей конфигурации.browerslistобрабатывать.
  • Прекомпилятор SASS/SCSS, включая PostCSS и автопрефиксер, не обращая внимания на префикс свойства css поставщика браузера, по-прежнему основанный наbrowerslistдля обработки; вы можете добавить все, что хотитеCSS-in-JSсхема должна быть вашей схемой темы/стиля.

Развертывание производственной среды

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

npm run deploy, не добавляйте никаких опций, завершите процесс,npm run deploy -- 1 0 1, будут создаваться только файлы ресурсов,
больше опцийkoa-web-kit#Deploy

Бонусный раунд: Создание статических сайтов

несмотря на то чтоkoa-web-kitЭто полноценный фреймворк для разработки.Если вам не нужны серверные функции, вы все равно можете просто сгенерировать статический сайт и закинуть его прямо на статический сервер (Github Pages, Netlify и т. д.). При создании статического сайта необходимо учитывать следующее:prefix path, в некоторых известных генераторах статических сайтов, таких какGatsby, на этот счет тоже есть инструкции, например, его нужно развернуть на Github Pages, а корневая директория проекта вообще находится вhttp://user.github.io/projectздесь/prejectвышеprefix path, все запросы ресурсов должны быть/projectвниз, иначе он может сообщить 404, вkoa-web-kitКонфигурация выглядит следующим образом:

{
  //optional, your cdn domain for your static assets if you have
  "STATIC_ENDPOINT": "http://cdn.com",
  //optional, additional prefix for your cdn domain
  "STATIC_PREFIX": "/public/",
  //trailing slash for "APP_PREFIX"
  "PREFIX_TRAILING_SLASH": true,
  //here is the prefix path for your app1, 
  //if "PREFIX_TRAILING_SLASH" is true,
  //the final "env.prefix" value(details below) will be "/app1/"
  "APP_PREFIX": "/app1",
}

Итак, как нам получить это значение в нашем коде (например, в вашем компоненте)? Очень просто, импортируйте в свой компонентenv.js:

//full path: "./src/modules/env.js"
import env from 'modules/env';

// -> "/app1/public/" , with extra static assets prefix
console.log(env.prefix); 
// -> "/app1/"
console.log(env.appPrefix); 
// concat your static url if it does not imported by a webpack loader
<img src={`${env.prefix}static/imgs/no-loader.png`}>

Если вы импортируете эти файлы в код, загрузчик Webpack также динамически добавит эти префиксы в соответствии с конфигурацией префиксов. Если вы хотите, чтобы все ваши статические ресурсы использовали относительные пути без '/', установите следующее:PREFIX_TRAILING_SLASH: false, STATIC_PREFIX: "", APP_PREFIX: "".

В заключение

Вышеупомянутоеkoa-web-kitКраткое введение, если хотите, можете попробовать, если есть вопросы, можетеоткрыть вопрос, или PR, чтобы предложить новые функции. Я надеюсь, что это упростит вашу разработку полного стека nodejs.

С 💖 отkoa-web-kit.

Категории