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

Administrar un sitio web en un alojamiento web con Visual Studio Code gracias a una extensión 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.

Info

Si desea administrar su sitio web de forma remota sin utilizar Visual Studio Code, puede instalar el cliente FTP FileZilla. Para más información, consulte nuestra guía "Utilizar FileZilla con el alojamiento de OVHcloud". Si desea conectarse a su sitio web por SSH, consulte nuestra guía "Utilizar el acceso SSH de un alojamiento web".

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

Requisitos

Tener contratado un plan de hosting de OVHcloud
Instalar Microsoft Visual Studio Code en el equipo

Acceso al área de cliente de OVHcloud

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

Procedimiento

Información sobre la administración de los servicios de OVHcloud y cómo encontrar la asistencia adecuada

Al utilizar las guías de OVHcloud, tenga en cuenta las siguientes condiciones:

Las instrucciones pretenden ofrecer el mayor detalle posible, pero no pueden cubrir todos los casos de uso individuales. Es posible que deba adaptar las acciones descritas a sus necesidades.
El ecosistema de OVHcloud está diseñado para ofrecer flexibilidad y libertad de elección. Por lo tanto, los clientes son responsables de la configuración correcta y segura de sus servicios. Para evitar la pérdida de datos, recomendamos encarecidamente aplicar estrategias de copia de seguridad a todos sus datos importantes.
Nuestras guías y tutoriales pueden hacer referencia a software o servicios de terceros en combinación con las soluciones de OVHcloud. El soporte técnico de OVHcloud no incluye la configuración de sistemas o productos fuera de nuestra responsabilidad. Esto incluye, entre otros:
- Sistemas operativos e interfaces de usuario (Windows, Debian, Plesk, etc.).
- Cualquier otro software de terceros (clientes FTP, software de correo electrónico, etc.).
- Servicios ofrecidos por otros proveedores (DNS, API, interfaces de usuario, etc.).

Para recibir la asistencia adecuada ante cualquier problema, siga estas recomendaciones:

¿Busca asesoramiento personalizado o desea tratar un tema que no se aborda en detalle en nuestra documentación?
Únase a la comunidad de OVHcloud para buscar su tema y contactar con otros usuarios.
¿Necesita informar de un incidente relacionado con su servicio de OVHcloud o tiene dificultades en el área de cliente de OVHcloud?
Cree una solicitud de soporte en nuestro centro de ayuda.
¿Necesita asistencia profesional para su proyecto o ayuda con tareas fuera de nuestro ámbito de soporte?
Visite nuestro portal de partners para encontrar expertos familiarizados con las soluciones de OVHcloud.
¿Busca información más detallada sobre nuestros niveles de soporte y Professional Services?
Visite nuestras páginas web sobre los niveles de soporte de OVHcloud y los OVHcloud Professional Services.

Puede participar en la mejora de nuestra documentación:

¿Desea enviar comentarios para mejorar una guía o informar de información insuficiente en una página concreta?
Utilice los botones «¿Le ha resultado útil esta página?» al final de la página para hacérnoslo saber.
¿Desea proponer una actualización concreta de la documentación?
Utilice la función «Editar esta página», disponible al final de la página y en la barra lateral.

Warning

Este tutorial le ayudará a realizar las tareas más habituales. No obstante, si necesita ayuda, le recomendamos que contacte con un proveedor especializado o con el editor del IDE de Visual Studio Code. Nosotros no podremos asistirle.

Instalar la extensión SFTP para Visual Studio Code

Warning

En este tutorial hemos elegido la extensión "SFTP/FTP sync" de Natizyskunk. Usted puede elegir otra. Sin embargo, tenga en cuenta que una extensión de Visual Studio Code es software que suele crear un desarrollador independiente, que puede detener su desarrollo en cualquier momento.

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. Consulte nuestra guía "Conectarse al espacio de almacenamiento FTP de su alojamiento web" para encontrar la información útil.

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

name

Haga clic en las fichas siguientes para ver cada una de las 2 etapas.

Paso 1

Paso 2

Acceda a la página y seleccione el alojamiento web correspondiente.

Info

El valor name (nombre) puede personalizarse, por lo que podrá asignarle el que desee. Sin embargo, si configura varios archivos "sftp.json", es preferible tomar como referencia los valores visibles anteriormente por motivos de organización.

host

Haga clic en las fichas siguientes para ver cada una de las 2 etapas.

Paso 1

Paso 2

Acceda a la página y seleccione el alojamiento web correspondiente.

username

Haga clic en las fichas siguientes para ver cada una de las 2 etapas.

Paso 1

Paso 2

Acceda a la página y seleccione el alojamiento web correspondiente.

remotePath

Haga clic en las fichas siguientes para ver cada una de las 2 etapas.

Paso 1

Paso 2

Acceda a la página y seleccione el alojamiento web correspondiente.

En la pestaña FTP - SSH, 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 columna Usuario de la tabla.

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

Info

Para evitar escribir la contraseña después de cada comando en Visual Studio Code, guárdela en el archivo "sftp.json" agregando la línea: "password": "<password>"

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.

Info

Le recordamos que la configuración correcta del archivo "sftp.json" es fundamental. Si encuentra un error antes de descargar el proyecto, suele deberse a un error de configuración del archivo "sftp.json". Para más información, consulte FAQ de la extensión.

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 Pro, Performance, Agency, Agency Plus o Agency Max.

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 ofertas de soporte.

Interactúe con nuestra comunidad de usuarios.

¿Le ha resultado útil esta página?