¿Que es un VPS?

Un Virtual Private Secure (servidor virtual privado) es una partición de un servidor privado que permite personalizarlo en espacio y recursos según la necesidades o requerimientos del usuario. Es una opción más flexible que un hosting pero menos que un servidor dedicado completo, ya que, un VPS no es más que un servidor completo dividido en varias particiones y que cada partición(VPS) se distingue porque cada una de ellas dispone de su propio sistema operativo y su propia IP, además permite contratar un conjunto de recursos que pueden modificarse, ya sea aumentar o disminuir si el usuario  lo requiere.

COPIA DE SEGURIDAD

Para preparar un proyecto Angular y subirlo a un VPS el primer paso a realizares una copia de seguridad del proyecto. 

COMPROBAR RUTAS Y PUERTOS

Antes de generar la producción es necesario asegurarse de que tanto el backend como el frontend coinciden en puerto y sustituir las rutas absolutas  por la IP o dominio del servidor. Es también recomendable revisar si el VPS incluye algún firewall y que éste permita el acceso a dicho puerto. En caso contrario será necesario modificar el puerto a otro distinto que se encuentre en la lista del firewall o, si es posible, incluirlo en la lista desde el panel de control del VPS contratado.

ESTRUCTURA DEL PROYECTO

A continuación se copia todo el contenido del directorio backend, se pega en el directorio raíz y se elimina el directorio que contenía el backend puesto que ya no será necesario.

El siguiente paso es renombrar el directorio que contiene el frontend con el nombre client.

BUILD

Ésta es la estructura de un proyecto en producción. Sin embargo, Angular CLI dispone de métodos que preparan el frontend comprimiendo y optimizando, obteniendo un paquete listo para producción. Con este proceso se consigue reducir el tiempo de carga y ocupar menos espacio en el servidor. Para realizarlo, es necesario duplicar el directorio renombrado anteriormente como client, asignándole cualquier otro nombre que lo distinga del original. Este duplicado con otro nombre es el que se utilizará para realizar el proceso de producción. 

Por tanto, el directorio copia del client  se renombra con otro nombre, como por ejemplo, client_pruebas y desde la terminal se accede a este directorio  y se ejecuta el proceso de construcción destinado a producción:

ng build --prod

Durante la ejecución del proceso es probable que la terminal muestre errores y detenga el proceso, esto es debido a que el test de Angular es más exigente en la fase de producción que en la fase de desarrollo.

ERROR in src/app/admin/components/add/add.component.html(28,10): : Property 'is_edit' does 
not exist on type 'AddComponent'.

Suelen ser errores comunes como la presencia de variables en la vista que no han sido declaradas en el componente, como también la ausencia de algún parámetro en alguno de los métodos. Deberán ser solucionados y volver a repetir el proceso build.

Este proceso genera un directorio con nombre dist que contiene a su vez otro directorio (con el nombre del proyecto) que es el que contiene todos los directorios y todos los archivos.

A continuación se elimina todo el contenido de la carpeta client, "la original" y se copian en ella todos estos archivos generados ya solo queda subir el proyecto completo al servidor, ya sea con un gestor o con GitHub.

MODIFICACIONES DESDE EL SERVIDOR

Una vez subido es necesario realizar algunos cambios desde el servidor.

Si durante el desarrollo se ha hecho uso de nodemon es indispensable acceder al archivo package.json que se encuentra en la raíz.

"scripts": {
    "start": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Y sustituir nodemon por node.

"scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Si la subida de archivos se realiza mediante GitHub éste no incluye el directorio node_modules que incluye las dependencias, en consecuencia será necesario actualizar las dependencias desde el servidor.

npm update

Con todos los pasos anteriores realizados debe ser posible cargar el proyecto desde el servidor

npm start