Automatizar despliegue por FTP en un proyecto Angular

Desplegar un proyecto Angular manualmente por FTP puede ser tedioso y propenso a errores. En este post te muestro cómo automatizar el proceso utilizando un sencillo script en Node.js y un comando en package.json. Esta solución es ideal para proyectos que se alojan en un servidor compartido o donde no puedes hacer despliegue continuo desde Git.

¿Qué vamos a lograr?

Un único comando que:

1. Compila el proyecto Angular en modo producción.

2. Copia el archivo .htaccess necesario.

3. Sube los archivos al servidor por FTP.

4. Limpia el contenido anterior del servidor remoto si es necesario.

Librerías necesarias

Antes de empezar, necesitas instalar estas dependencias:

npm install ftp-deploy dotenv copyfiles --save-dev

¿Para qué sirve cada una?

• ftp-deploy: Permite subir archivos por FTP desde Node.js.

• dotenv: Para cargar tu contraseña FTP desde un archivo .env (mejor práctica de seguridad).

• copyfiles: Nos permite copiar el .htaccess al directorio de salida del build (dist).

No es necesario usar el paquete copyfiles, pero yo lo uso para copiar el fichero .htaccess al directorio.

Configura tus variables de entorno

Crea un archivo .env en la raíz del proyecto y añade:

FTP_PASSWORD=tu_contraseña_secreta

Estructura de tu script de despliegue

Crea un archivo llamado deploy.js en la raíz del proyecto y pega este contenido:

require("dotenv").config();
const FtpDeploy = require("ftp-deploy");
const ftpDeploy = new FtpDeploy();const config = {
user: "*****",
password: process.env.FTP_PASSWORD,
host: "modestocabraldev.com",
port: 21,
localRoot: __dirname + "/dist/mcpmodesto-portfolio/browser",
remoteRoot: "/public_html/portfolio",
include: ["*", "**/*", ".htaccess"],
deleteRemote: true,
forcePasv: true
};

ftpDeploy
.deploy(config)
.then(res => console.log("✅ Deploy completado:", res))
.catch(err => console.error("❌ Error en el deploy:", err));

🔍 ¿Qué hace este script?

• Usa la contraseña del .env.

• Sube todo el contenido de la carpeta dist/mcpmodesto-portfolio/browser a tu servidor FTP, dentro de /public_html/portfolio. Esto debes reemplarzalo por el directorio donde tu proyecto de Angular genere los archivos estáticos para la subida.

• Borra el contenido previo remoto antes de subir (deleteRemote: true).

• Sube también el archivo .htaccess.

Script en package.json

Agrega los siguientes comandos a tu package.json:

"scripts": {
"build": "ng build",
"deploy": "node deploy.js",
"build-and-deploy": "ng build --configuration production && copyfiles .htaccess dist/mcpmodesto-portfolio/browser && npm run deploy"
}

Ahora puedes ejecutar:

npm run build-and-deploy

Y en unos segundos, tu proyecto Angular estará desplegado en tu servidor remoto 🎉

Ventajas de este sistema

• Evitas subir archivos manualmente por FileZilla o similares.

• Control total del proceso de build y despliegue.

• Mejores prácticas de seguridad (con .env).

• Integrable fácilmente con Git hooks o tareas CI básicas.