Hoy en día, es indispensable usar certificados SSL/TLS para cifrar la comunicación entre el usuario y tu sitio web. No solo por seguridad, sino porque también genera confianza al usuario y además puede influir en el posicionamiento SEO en algunos buscadores como Google.

En entornos de producción, los certificados son emitidos por entidades certificadoras y están asociados a dominios específicos. Sin embargo, en desarrollo local, la URL puede ser parecida a https://localhost, como estos no están validados por una autoridad reconocida, los navegadores los interpretan como inseguros y muestran una advertencia de privacidad antes de permitir el acceso.

En este artículo mostraremos cómo activar HTTPS en un proyecto Astro utilizando la librería @vitejs/plugin-basic-ssl. Con esta herramienta, podremos trabajar en local con conexiones HTTPS con un certificado auto-firmado.

Configuración del entorno

Instalación de la librería

Para incorporar la funcionalidad SSL en tu proyecto, primero instala la librería. Abre tu terminal y ejecuta el comando:

npm install --save-dev @vitejs/plugin-basic-ssl

Configuración en Astro

Una vez instalada la librería, se debe configurar Astro para que haga uso del plugin. Para ello, edita el archivo astro.config.mjs y añade el siguiente código:

import { defineConfig } from 'astro/config';
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
  vite: {
    plugins: [basicSsl()],
    server: {
      https: true,
    },
  },
});

Esta configuración indica a Vite (la herramienta de desarrollo que utiliza Astro) que active el servidor en modo HTTPS. La función basicSsl() se encarga de generar un certificado auto-firmado, permitiendo que el servidor local use el protocolo seguro.

Al iniciar el servidor de desarrollo npm run dev y dirigirte a https://localhost:4321, es probable que el navegador muestre un mensaje de error de privacidad. Este mensaje es normal y se debe a que el certificado no ha sido emitido por una autoridad reconocida. En Chrome, para continuar, selecciona la opción Configuración avanzada y luego haz clic en Continuar para acceder a localhost (no seguro) y se cargará el sitio bajo https.

Conclusión

Configurar HTTPS en tu entorno local con Astro y @vitejs/plugin-basic-ssl es un proceso sencillo que te permite probar conexiones seguras durante el desarrollo en localhost. Aun con un certificado auto-firmado y con advertencias en el navegador podremos visualizar el sitio con https.