node.ucp

node.ucp

Это полноценная изоморфная панель управления JavaScript, написанную поверх Nodejs и реагировать. Цель этой панели управления состоит в том, чтобы служить примером или кодом шаблона для других, так как она полностью проведена и очень гибкая. Я написал код, чтобы легко адаптироваться для различных видов использования и типов баз данных и структур.

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

Код использует функции стрел ES6 и обещание значительно обещайте, поэтому ознакомьтесь с этими понятиями, если вы еще не так!

Я пытался как можно больше комментировать, чтобы объяснить работу приложения в исходном коде, однако, если что -то не ясно, не стесняйтесь спрашивать.

Демо

Информация о входе в систему:

Имя пользователя: Джонас

Пароль: тест

Нажмите здесь для демонстрации.

Нажмите здесь для изображений в казее демонстрация не работает.

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

• Nodejs v6.11.3 или позже
• MySQL версия 5.6.5 или более поздней версии, если вы хотите использовать пример базы данных.
• Если вы используете Linux, вам нужно установить Node-GYP. Установите его, используя следующую команду:

sudo npm install -g node-gyp

• Если вы используете Windows, то вам нужно установить инструменты Windows Build Tools для компиляции и создания некоторых DepedEntes. Установите его, используя следующую команду:

npm install --global --production windows-build-tools

Установка

1. Перейдите в пустую папку, где вы хотите, чтобы исходный код был размещен.
2. Клонировать репозиторий, используя следующую команду:

git clone https://github.com/zeus2198/node.ucp 

ИЛИ

Загрузите репозиторий вручную с кнопки зеленого Clone or Download расположенной в правой верхней части репозитория, и извлеките контент в пустой папке. 3. Убедитесь, что вы находитесь в корне проекта и введите следующую команду для установки пакетов, необходимых для приложения:

npm install

Установка пакетов может занять некоторое время. 5. Импортируйте образцы базы данных ( ./sample-database.sql ) в ваш сервер MySQL. 4. Откройте файл ./config/config.json и отредактируйте файл конфигурации в соответствии с настройками вашей системы.

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

Режим разработчика:

Для запуска приложения в режиме разработчика используйте следующую команду:

npm run start-dev

В режиме разработчика случаются следующие вещи:

• Приложение автоматически перезагружается всякий раз, когда происходит изменение в любом файле в папке ./src .
• Общая часть приложения клиента-сервер автоматически связана с началом приложения.
• Приложение использует global.css вместо global.min.css , который не кэшируется по умолчанию. Обратите внимание, что если вы решите использовать nginx для обслуживания статического файла (как описано позже), он может кэшировать файлы .css в зависимости от конфигурации Nginx.
• Автоматический разрыв кэша для файла пакета происходит при перезапуске приложения. Этот разрыв кэша обнаруживается работником службы ( ./public/js/sw.js ), а затем файл пакета заменяется в нашем кэше!

Производственный режим:

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

npm run make

Обратите ./public/css/global.min.css ./public/css/global.css что вышеуказанная команда также будет министерством файла.

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

npm start

В производственном режиме происходят следующие вещи:

• Приложение использует global.min.css , а не global.css который является кэшированным ресурсом.
• Разбивание кэша для файла пакета все равно будет происходить, но только для файла пакета, созданного с использованием команды npm run make .
• Производительный режим Express (наш веб-сервер, используемый в приложении).

Произведение искусства

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

Примечания

• Каталог ./src/shared/ содержит код, общий в клиентской и серверной части, поэтому убедитесь, что в этом разделе вы не раскрываете какую -либо конфиденциальную информацию.
• В приложении используются работники обслуживания, которые работают только на доменах с поддержкой LocalHost и HTTPS, поэтому убедитесь, что вы используете HTTPS -протокол с вашим доменом.
• Защищенные маршруты не отображаются на стороне сервера.
• Чтобы очистить кэш , откройте ./public/js/sw.js и отредактируйте строку версии. Затем закройте все вкладку «Приложение», открытая в браузере, и снова откройте приложение. Используйте это, чтобы очистить global.min.css из кеша при редактировании файла global.css .
• Получение бесплатного сертификата SSL и использования NGINX для обратного прокси -домена в вашем приложении.

Использование различных баз данных

Файл ./src/db/db.api.abstract.js содержит абстрактный класс для нашего API базы данных, прочитайте комментарии для спецификаций метода. Затем требуется этот файл в вашем пользовательском уровне API базы данных и переопределите абстрактные методы. См ./src/db/mysql.api.js Обратите внимание, что каждый метод должен вернуть обещание.

После того, как вы закончите с написанием API для своего DB, отправляйтесь в ./config/config.json и отредактируйте опцию databaseAPI , чтобы соответствовать имени файла, содержащего ваш слой API DB. Файл должен быть размещен в каталоге ./src/db/ .

Обслуживание статических файлов с использованием nginx

Я рекомендую использовать Nginx для обслуживания статических файлов вместо Nodejs. Для этого вы можете добавить следующий блок местоположения в конфигурацию блока севера:

 location /public {
	alias  /path/to/your/app/public;
}

Если вы решите пойти с Nginx для обслуживания статических файлов, вы можете переместить сжатие GZIP для вашего приложения на Nginx. Если вы сделаете это, что вы должны, отключите сжатие на стороне приложения, комментируя следующие две строки из файла ./node.ucp.js :

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;

Использование диспетчера процессов, чтобы убедиться, что приложение работает навсегда в производственном режиме

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

npm install pm2 -g

Теперь перед использованием PM2, чтобы запустить ваше приложение в производственном режиме, убедитесь, что приложение фактически запускается и работает, иначе ваше приложение застрянет в петле START и REART.

Я уже создал файл конфигурации для PM2, чтобы запустить приложение, чтобы запустить приложение в режиме производства с типом PM2:

pm2 start node.ucp.pm2.json