Conexión de un Dominio Personalizado a Netlify y Cloudflare

Clase 21 de 22Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Webpack en el Frontend

Resumen

Tener un proyecto desplegado en producción es solo la mitad del camino. Para compartirlo con cualquier persona necesitas un dominio personalizado que sea fácil de recordar y profesional. Aquí se explica paso a paso cómo comprar un dominio, configurar los DNS con Cloudflare y conectar todo con Netlify para que tu sitio esté disponible en internet.

¿Cómo comprar un dominio en Namecheap?

Namecheap es una de las plataformas más populares para registrar dominios [0:38]. El proceso es sencillo: creas una cuenta, buscas el nombre que deseas y revisas las extensiones disponibles.

Existen muchas extensiones entre las que puedes elegir:

  • .com, la más común y reconocida.
  • .net, .org, .tv, .io, .xyz, entre otras.
  • Extensiones más económicas como .club, que pueden costar poco más de un dólar.

Una vez que encuentras el dominio que se adapta a tu presupuesto, lo agregas al carrito y procedes al checkout [1:35]. Es importante saber que se añade un pequeño impuesto de la ICANN, que es la organización que regula todos los dominios a nivel global. Namecheap también incluye protección de privacidad (domain privacy), lo que significa que tus datos personales no quedarán expuestos en los registros públicos [1:54].

Completas el pago con tu tarjeta, confirmas la orden y en pocos segundos ya eres propietario del dominio.

¿Por qué configurar Cloudflare como servidor DNS?

Una vez que tienes el dominio, el siguiente paso es configurar los name servers [3:08]. En lugar de usar los DNS por defecto de Namecheap, se recomienda utilizar Cloudflare, una herramienta que ofrece múltiples ventajas:

  • Caché del contenido para mejorar la velocidad.
  • Certificado HTTPS gratuito para mayor seguridad.
  • Minificación del contenido para optimizar la carga.
  • Estadísticas y protección contra ataques.

¿Cómo se conectan los name servers?

En Cloudflare agregas tu dominio como un nuevo sitio y seleccionas el plan gratuito, que es suficiente para proyectos con tráfico moderado [3:42]. Cloudflare realiza un escaneo inicial para detectar los registros DNS existentes y luego te entrega dos name servers personalizados.

Esos valores los copias y los pegas en Namecheap, cambiando la opción de Basic DNS a Custom DNS [4:24]. Una vez guardados, comienza el proceso de propagación de DNS, que puede tardar entre unos minutos y hasta 48 horas [4:44]. Durante ese tiempo, tu sitio podría no estar disponible en todas las regiones del mundo, pero es completamente normal.

¿Qué configuraciones adicionales ofrece Cloudflare?

Dentro de Cloudflare puedes habilitar opciones importantes [5:09]:

  • Forzar el uso de HTTPS en todas las conexiones.
  • Activar la minificación de HTML, CSS y JavaScript.
  • Configurar reglas de caché desde la propia herramienta.

Estas configuraciones mejoran tanto el rendimiento como la seguridad de tu sitio sin necesidad de un servidor dedicado.

¿Cómo conectar el dominio con Netlify?

Con los DNS apuntando a Cloudflare, ahora necesitas vincular tu dominio con el proyecto desplegado en Netlify [5:42]. Dentro del panel de Netlify, en la sección Domain, seleccionas Add custom domain y escribes tu dominio.

Netlify te ofrece varias formas de verificar la conexión. La opción recomendada es agregar un registro de tipo A en los DNS, apuntando a la dirección IP que Netlify te asigna [6:14].

Para completar la configuración en Cloudflare:

  • Creas un registro A con el símbolo @ como nombre y la IP de Netlify como destino.
  • Creas un registro CNAME con www apuntando a @, para que ambas versiones del dominio funcionen correctamente [6:50].

Si en el futuro necesitas configurar correo electrónico, agregarás registros MX en la misma sección de DNS.

Una vez que la propagación se completa, puedes abrir tu dominio en el navegador y verificar que todo funciona [7:28]. Puedes inspeccionar el network del navegador para confirmar que los archivos como vendor, commons, home y header cargan correctamente y que la optimización está aplicada.

Comparte tu dominio personalizado para que otros puedan conocer tu proyecto y darte retroalimentación.