node.ucp

node.ucp

Este es un panel de control isomórfico de JavaScript de pleno derecho escrito en la parte superior de NodeJS y React. El propósito de este panel de control es servir como un ejemplo o código de calderas para otros, ya que es completamente pleno y muy flexible. Escribí el código para ser fácilmente adaptable para diferentes casos de uso y tipos y estructuras de bases de datos.

Puede encontrar soluciones escritas por mí a muchos problemas relacionados con la representación del lado del servidor, reaccionar, manejar la interrupción de los recursos volátiles en los trabajadores de servicios y las sesiones de manejo manualmente en el código fuente de esta aplicación.

El código usa las funciones de flecha de ES6 y promete enormemente, ¡así que familiarícese con estos conceptos si aún no está!

He tratado de comentar tanto como sea posible para explicar el funcionamiento de la aplicación en el código fuente, sin embargo, si las cosas no están claras, no dude en preguntar.

Manifestación

Información de inicio de sesión:

Nombre de usuario: Jonas

Contraseña: prueba

Haga clic aquí para la demostración.

Haga clic aquí para ver las imágenes en caso de que la demostración no funcione.

Requisitos previos

• NodeJS v6.11.3 o posterior
• MySQL versión 5.6.5 o posterior si desea usar la base de datos de muestra.
• Si está utilizando Linux, debe instalar Node-Gyp. Instálelo usando el siguiente comando:

sudo npm install -g node-gyp

• Si está utilizando Windows, también debe instalar herramientas de compilación de Windows para compilar y construir algunas de las depedencias. Instálelo usando el siguiente comando:

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

Instalación

1. Navegue a una carpeta vacía donde desea que se coloque el código fuente.
2. Clone el repositorio usando el siguiente comando:

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

O

Descargue el repositorio manualmente del Clone or Download ubicado en la parte superior derecha del repositorio y extrae el contenido en una carpeta vacía. 3. Asegúrese de estar en la raíz del proyecto y escriba el siguiente comando para instalar los paquetes necesarios por la aplicación:

npm install

La instalación de paquetes puede llevar algún tiempo. 5. Importe la base de datos de muestra ( ./sample-database.sql ) en su servidor MySQL. 4. Abra ./config/config.json archivo y edite el archivo de configuración según la configuración de su sistema.

Inicio de la aplicación

Modo de desarrollador:

Para iniciar la aplicación en modo desarrollador, use el siguiente comando:

npm run start-dev

En modo de desarrollador, suceden las siguientes cosas:

• La aplicación se reinicia automáticamente cada vez que hay un cambio en cualquier archivo dentro de la carpeta ./src .
• La parte compartida del cliente cliente de la aplicación se agrupa automáticamente en el inicio de la aplicación.
• La aplicación utiliza global.css en lugar de global.min.css , que no se almacena en caché de forma predeterminada. Tenga en cuenta que si decide usar nginx para servir un archivo estático (como se describe más adelante) puede almacenar en caché los archivos .css dependiendo de la configuración de Nginx.
• La ruptura automática de caché para el archivo del paquete se lleva a cabo en el reinicio de la aplicación. ¡Este trabajo de almacenamiento en caché es detectado por el trabajador de servicio ( ./public/js/sw.js ) y el archivo del paquete se reemplaza en nuestro caché!

Modo de producción:

Antes de comenzar la aplicación en modo de producción, debe agrupar la parte compartida del cliente cliente de la aplicación en un archivo para que pueda servirse al cliente, para hacerlo, use el siguiente comando:

npm run make

Tenga en cuenta que el comando anterior también minificará el contenido del archivo ./public/css/global.css y lo almacenará como ./public/css/global.min.css .

Después de que se realice la agrupación, use el siguiente comando para iniciar la aplicación:

npm start

En el modo de producción, suceden las siguientes cosas:

• La aplicación utiliza global.min.css y no global.css , que es un recurso en caché.
• La ruptura de la memoria caché para el archivo de paquete aún se llevará a cabo, pero solo para el archivo de paquete creado usando el comando npm run make .
• El modo de producción de express (nuestra API de servidor web utilizada en la aplicación) está habilitado.

Obra de arte

Puede encontrar los archivos de Photoshop de la obra de arte utilizada en este proyecto desde aquí.

Notas

• El directorio ./src/shared/ contiene el código común en la parte del cliente y del servidor, así que asegúrese de no exponer ninguna información confidencial en esta sección.
• La aplicación utiliza trabajadores de servicio que solo funciona en dominios LocalHost y HTTPS habilitados, así que asegúrese de estar utilizando el protocolo HTTPS con su dominio.
• Las rutas protegidas no se representan en el lado del servidor.
• Para borrar caché , abra ./public/js/sw.js y edite la cadena de versión. Luego cierre toda la pestaña de la aplicación abierta en el navegador y abra la aplicación nuevamente. Use esto para borrar global.min.css fuera de caché cuando edite el archivo global.css .
• Obtener un certificado SSL gratuito y usar NGINX para revertir el proxy de un dominio a su aplicación.

Uso de diferentes bases de datos

El archivo ./src/db/db.api.abstract.js contiene una clase abstracta para nuestra API de base de datos, lea los comentarios para especificaciones del método. Luego requiera este archivo en la capa API de su base de datos personalizada y anule los métodos abstractos. Consulte ./src/db/mysql.api.js Ejemplo de implementación. Tenga en cuenta que cada método debe devolver una promesa.

Una vez que haya terminado de escribir API para su DB, diríjase a ./config/config.json y editar la opción databaseAPI para que coincida con el nombre del archivo que contiene su capa API de DB. El archivo debe colocarse en el directorio ./src/db/ .

Servir archivos estáticos usando NGINX

Recomiendo usar NGINX para servir archivos estáticos en lugar de NodeJs. Para hacerlo, puede agregar el siguiente bloque de ubicación a su configuración de bloqueo de bloque:

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

Si decide ir con Nginx para servir archivos estáticos, es posible que también desee cambiar la compresión GZIP para su aplicación a Nginx. Si lo hace, lo que debería, entonces deshabilite la compresión en el lado de la aplicación comentando las siguientes dos líneas desde el archivo ./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 ( ) ) ;

Uso de Process Manager para asegurarse de que la aplicación se ejecute para siempre en el modo de producción

En el modo de producción, es posible que desee tener un administrador de procesos que pueda reiniciar la aplicación si se bloquea, recomiendo usar PM2 para este propósito. Instale el PM2 usando el siguiente comando:

npm install pm2 -g

Ahora, antes de usar PM2 para iniciar su aplicación en el modo de producción, asegúrese de que la aplicación realmente comience y se ejecute, de lo contrario, su aplicación se atascará en Start and Reinsart Loop.

Ya he creado un archivo de configuración para PM2 para iniciar la aplicación, para iniciar la aplicación en modo de producción con el tipo PM2:

pm2 start node.ucp.pm2.json