Configurar el módulo SFTP en VSCode

Mantener nuestra versión en local sincronizada y totalmente actualizada con la versión en el servidor (producción, pre-producción o desarrollo) es muy sencillo gracias al módulo SFTP para VSCode.

Una vez instalado el módulo deberemos proceder a configurarlo gracias a un fichero (sftp.json) que deberemos colocar dentro de nuestro proyecto en la carpeta .vscode.

Configuración básica

{
  "name": "[Nombre del proyecto]",
  "context": ".",
  "protocol": "[sftp || ftp]",
  "host": "[url o ip del servidor]",
  "username": "[usuario]",
  "password": "[contraseña]",
  "interactiveAuth": false,
  "secure": false,
  "remotePath": "[ruta remota]",
  "uploadOnSave": true,
  "downloadOnOpen": true,
  "syncMode": "full",
  "ignore": [
    ".vscode/",
    ".vscode/**",
    "README.md"
  ],
  "watcher": {
    "files": "css/*.{map,css}",
    "autoUpload": true,
    "autoDelete": true
  },
  "concurrency": 4
}

La configuración básica nos permite conectarnos a un servidor FTP o SFTP y, gracias a las propiedades uploadOnSave, downloadOnOpen y syncMode, mantener el código actualizado y sincronizado en todo momento.

La propiedad ignore nos permite establecer en un array todos los elementos que no queremos que se sincronizen o suban al servidor. Es muy últil para evitar enviar la propia configuración del SFTP y esponer la contraseña o ip del servidor.

Con la propiedad watcher nos aseguramos que, en este caso, los archivos css se sincronizen (por si usamos alguna herramienta tipo SASS).

Conexión SSH

{
  "name": "[Nombre del proyecto]",
  "context": ".",
  "host": "[dirección del servidor]",
  "protocol": "sftp",
  "port": 22,
  "username": "[usuario]",
  "agent": "ssh-agent",
  "privateKeyPath": "[ruta al fichero rsa]",
  "passphrase": "[contraseña del certificado]",
  "interactiveAuth": false,
  "secure": false,
  "remotePath": "[ruta remota]",
  "ignore": [
    ".git",
    ".git/**",
    ".github",
    ".github/**",
    "debug.log"
  ],
  "connectTimeout": 10000,
  "uploadOnSave": true,
  "downloadOnOpen": true,
  "syncMode": "full",
  "watcher": {
    "files": "css/*.{map,css}",
    "autoUpload": true,
    "autoDelete": true
  },
  "concurrency": 4
}

En ocasiones trabajaremos con servidores que requieren de una conexión cifrada a través de una clave SSH con su correspondiente certificado.

La configuración base sería la misma; bastará con añadir tres propiedades: agent, privateKeyPath y passphrase.

Si trabajamos en un entorno Windows, deberemos recordar que la ruta al archivo rsa mantendrá una sintaxis como la del siguiente ejemplo:

D:\\dir1\\dir2\\id_rsa

Múltiples servidores en la misma configuración

{
  "name": "[Nombre del proyecto]",
  "context": ".",

  "defaultProfile": "prod",

  "profiles": {

    "dev": {
      "host": "[dirección del servidor]",
      "protocol": "sftp",
      "port": 22,
      "username": "[usuario]",
      "password": "[contraseña]",
      "interactiveAuth": false,
      "secure": false,
      "remotePath": "[ruta remota]"
    },

    "prod": {
      "host": "[dirección del servidor 2]",
      "protocol": "sftp",
      "port": 22,
      "username": "[usuario]",
      "agent": "ssh-agent",
      "privateKeyPath": "[ubicación del fichero rsa",
      "passphrase": "[contraseña del fichero]",
      "interactiveAuth": false,
      "secure": false,
      "remotePath": "[ruta remota]"
    }
  },

  "ignore": [
    ".git",
    ".git/**",
    ".github",
    ".github/**",
    "debug.log"
  ],
  "connectTimeout": 10000,
  "uploadOnSave": true,
  "downloadOnOpen": true,
  "syncMode": "full",
  "watcher": {
    "files": "css/*.{map,css}",
    "autoUpload": true,
    "autoDelete": true
  },
  "concurrency": 4
}

Gracias a la propiedad profiles, podemos establecer varios perfiles de servidores a los que queremos conectarnos (uno de cada vez). De esta manera podemos tener ya configurados nuestros servidores de desarrollo y de producción al mismo tiempo.

Cada servidor puede tener su configuración específica pero, si es compartida por todos los servidores podemos ponerla "fuera" de cada perfil.

En la propiedad defaultProfile estableceremos qué perfil queremos que se active por defecto.

Para intercambiar el perfil de conexión bastará con pulsar F1, escribir SFTP: Set Profile y elegir el perfil deseado.

Descarga

Actualmente mantengo un proyecto activo en GitHub con el que podrás empezar a desarrollar para Drupal 8|9 en el que incluyo una configuración actualizada para este módulo.

Si quieres, puedes ver este proyecto aquí.