Gestionar un alojamiento web con Visual Studio Code a través de SFTP

Objetivo

Si tiene contratado un plan de hosting de OVHcloud, puede acceder a un espacio de almacenamiento desde el que podrá administrar su sitio web. Es posible acceder a este espacio de almacenamiento a través del protocolo SFTP. Aunque se puede conectar con un terminal, también se puede usar el entorno de desarrollo integrado (IDE) de Visual Studio Code para administrar las carpetas y archivos del sitio web.

Descubra cómo administrar su sitio web con Visual Studio Code.

Requisitos

• Tener contratado un plan de hosting de OVHcloud (https://www.ovhcloud.com/es-es/web-hosting/)
• Instalar Microsoft Visual Studio Code en el equipo

Acceso al área de cliente de OVHcloud

• Enlace directo: Web hosting
• Ruta de navegación: Web Cloud > Alojamientos > Seleccione su alojamiento web

Procedimiento

Instalar la extensión SFTP para Visual Studio Code

Después de iniciar Visual Studio Code, acceda al menú horizontal situado en la parte superior de la interfaz, haga clic en View y luego en Extensions.

Para realizar la misma acción con el método abreviado de teclado, seleccione:

• Ctrl + Shift + X si está en Windows,
• Maj + Command + X si está en macOS.

En la parte superior izquierda de la interfaz, introduzca el nombre de la extensión "SFTP/FTP sync" de Natizyskunk y haga clic en Install.

También puede instalar la extensión "SFTP/FTP sync" desde el marketplace de Visual Studio.

Inicializar el proyecto localmente

Para sincronizar los archivos de su sitio web presentes en el alojamiento web desde Visual Studio Code, introduzca la ubicación local del proyecto. Para ello, cree una carpeta en la ubicación que desee.

Vuelva a Visual Studio Code en el menú horizontal de la parte superior de la interfaz, haga clic en View y luego en Command Palette para ver el Editor de comandos.

Para realizar la misma acción con el método abreviado de teclado, seleccione:

• Ctrl + Shift + P si está en Windows,
• Maj + Command + P si está en macOS.

Introduzca el siguiente comando: SFTP: Config.

Con este comando, Visual Studio Code creará el archivo de configuración "sftp.json" en la raíz de la carpeta local creada anteriormente. Sin embargo, dado que Visual Studio Code aún no conoce la ubicación local del proyecto, debería aparecer el siguiente mensaje:

Haga clic en Open Folder, diríjase a la ubicación de la carpeta local que desee y haga clic en Select Folder para confirmar.

En Visual Studio Code, vuelva a escribir el comando SFTP: Config. En Visual Studio Code aparece un archivo de configuración denominado 'sftp.json'.

Este archivo se encuentra en la carpeta .vscode, que a su vez se sitúa en la raíz del proyecto local.

Configurar archivo sftp.json

Antes de trabajar en el proyecto, cárguelo en la carpeta local que creó anteriormente. No obstante, en primer lugar, asegúrese de que el archivo "sftp.json" está correctamente configurado. La información útil puede consultarse en el área de cliente de OVHcloud. En la sección Web Cloud, haga clic en Alojamientos. Seleccione el alojamiento correspondiente y abra la pestaña FTP - SSH.

En el archivo "sftp.json", introduzca los valores para las siguientes entradas:

name

Localícelo en las dos ranuras resaltadas en naranja.

host

En la pestaña FTP-SSH, el nombre de host (host) aparece bajo el epígrafe Servidor FTP y SFTP.

username

Localice el nombre de usuario (username) en la columna Usuario de la tabla.

remotePath

Encontrará la ruta remota (remotePath) en la entrada Acceso al directorio de la página principal. Sin embargo, si hay varios usuarios configurados, la ruta especificada puede ser diferente. En ese caso, sustituya el nombre de usuario que aparece a continuación de home/ por el de su elección en la lista Usuario de su alojamiento web.

Ejemplo: Si su nombre de usuario es "john-smith", obtendrá "home/john-smith"

Por último, no olvide añadir esta línea en el archivo sftp.json : "openSsh": true

A continuación se muestra un ejemplo de archivo "sftp.json":

{
    "name": "<name>",
    "host": "<host>",
    "protocol": "sftp",
    "port": 22,
    "username": "myusername",
    "password": "mypassword",
    "remotePath": "/home/myusername",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": true
}

Para más información sobre las opciones del archivo "sftp.json", consulte la documentación del proyecto.

Descargar el proyecto localmente

Una vez configurado el archivo "sftp.json", descargue el contenido del proyecto para recuperar todas las carpetas y archivos del sitio web. Para ello, vaya a Visual Studio Code e introduzca el siguiente comando: SFTP: Download Project.

Visual Studio Code le pide que seleccione la carpeta que desea cargar en el alojamiento web. Introduzca el valor de name anteriormente definido en el archivo "sftp.json" .

Si se le solicita, introduzca la contraseña asociada al usuario indicado en el archivo sftp.json y haga clic en enter. Después de la descarga, verá todas las carpetas y archivos del proyecto en el Explorador de archivos, en la columna izquierda de la interfaz de Visual Studio Code.

Realizar cambios en los archivos

Ahora que el proyecto se ha descargado localmente en el equipo, puede editar, agregar o eliminar fácilmente archivos en Visual Studio Code.

Si desea que los cambios locales se sincronicen cada vez que guarde un archivo, añada esta línea al archivo "sftp.json": "uploadOnSave": true

Para desactivar esta función, pero conservándola en el archivo sftp.json, cambie el valor true a false.

Hasta ahora solo hemos mencionado los comandos: SFTP: Config y SFTP: Download Project. Hay otros comandos que puede observar por autocompletado escribiendo SFTP: en el editor de comandos.

Consulte los comandos aquí.

Ahora puede acceder y editar el contenido del alojamiento web a través de Visual Studio Code. Esta guía explica cómo administrar un proyecto desde Visual Studio Code de forma eficaz. Es adecuado para un primer experimento. Sin embargo, si modifica varios archivos y estos están sincronizados en su alojamiento web, no podrá ver el historial de cambios para poder revertirlos o corregir un error.

Más información

Conectarse al espacio de almacenamiento FTP de un alojamiento web

Utilizar FileZilla con el alojamiento de OVHcloud

Utilizar el acceso SSH de un alojamiento web. Recuerde que para utilizar el SSH, debe disponer de un plan de hosting Profesional o Performance.

Para servicios especializados (posicionamiento, desarrollo, etc.), contacte con partners de OVHcloud.

Si quiere disfrutar de ayuda para utilizar y configurar sus soluciones de OVHcloud, puede consultar nuestras distintas soluciones pestañas de soporte.

Interactúe con nuestra comunidad de usuarios.