Construye y despliega aplicaciones en la plataforma de aplicaciones de DigitalOcean con un dominio personalizado

Tutoriales
DNS

Introducción

Como desarrolladores, a menudo construimos proyectos por nuestra cuenta, ya sea por diversión o para aprender algo nuevo. Estos proyectos también sirven como prueba de nuestras habilidades.

Deberías tener evidencia de trabajo. Más allá de tu código, los usuarios deberían poder usar tu aplicación, y para eso, no debería estar solo en localhost:3000, sino accesible a través de un enlace. Para lograr esto, necesitas desplegar tu aplicación y asignarle un dominio personalizado para una mejor legibilidad y fácil compartición.

En este artículo, te presentaré la Plataforma de Aplicaciones de DigitalOcean, y verás lo fácil que es pasar de desplegar una aplicación a asignarle un dominio personalizado en solo unos pocos clics.

Requisitos previos

  1. Una cuenta de DigitalOcean para acceder a la Plataforma de Aplicaciones.

  2. Una cuenta de GitHub.

  3. Dominio personalizado disponible en NameCheap u otra plataforma similar.

¿Qué es la Plataforma de Aplicaciones de DigitalOcean?

App Platform es una plataforma como servicio (PaaS) completamente gestionada que ayuda a los desarrolladores a construir, implementar y escalar aplicaciones con facilidad. Abstrae gran parte de la gestión de infraestructura, permitiéndote centrarte en el código y la implementación.

Puede analizar y construir código automáticamente a partir de proveedores de git como GitHub y GitLab, y publicar sus aplicaciones en la nube. También puede publicar utilizando imágenes de contenedor que ya haya subido a DigitalOcean Container Registry o Docker Hub.

Con características como mitigación de DDoS, parches automáticos del sistema operativo, escalado vertical, soporte HTTP, CDN global y soporte de dominios, la App Platform facilita la publicación y gestión de sus aplicaciones.

Paso 1 – Despliegue utilizando App Platform

Una vez que la aplicación esté lista, puede desplegarla desde monorepos,imágenes de contenedor, o utilizando GitHub Actions.

Un monorepo es un repositorio de código controlado por versiones que contiene muchos proyectos. Si bien estos proyectos pueden estar relacionados, a menudo son lógicamente independientes y son gestionados por diferentes equipos.

Veamos cómo podemos implementar aplicaciones utilizando la Plataforma de Aplicaciones con GitHub. Digamos que tienes un repositorio privado en GitHub con un archivo index.html que contiene este simple código de hola mundo:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

Implementar usando GitHub

  • Ve a la página de Aplicaciones y haz clic en Crear Aplicación.

  • Conecta tu cuenta de GitHub y luego selecciona el repositorio de GitHub que contiene tu código fuente.

  • En el campo Directorio de Origen, especifica la carpeta que contiene el código fuente como se muestra en la imagen a continuación. Dado que nuestro repositorio de demostración solo consta de un archivo index.html en el directorio raíz, continuaremos con el valor predeterminado /. Si tu código sigue una estructura de monorepositorio, asegúrate de elegir el directorio particular donde se encuentra el código.

Selecciona implementación automática, esto se implementará automáticamente cada vez que realices un nuevo cambio:

  • Configura los recursos para tu aplicación y haz clic en Siguiente. Esto es lo que verás:

  • A continuación, pasará por algunas comprobaciones antes de implementar la aplicación finalmente. Para aplicaciones más complicadas, como aquellas que utilizan una API, es posible que necesites agregar variables de entorno, en las siguientes páginas, podrás configurarlas.

  • En el siguiente paso, puedes editar el nombre de la aplicación y elegir el recurso bajo el cual se implementará tu aplicación.

  • Luego haces clic en Siguiente para ver la página de Revisión, donde puedes ver otra información relacionada con la aplicación como facturación, ubicación, etc. Luego, finalmente haz clic en Crear recurso para desplegar la aplicación.

  • Esto tomará unos minutos. Una vez que la aplicación se despliegue, podrás ver la aplicación en la URL y otros detalles en la página de Resumen.

Si sigues todos los pasos anteriores, así es como se verá tu aplicación: https://sea-lion-app-l8cvv.ondigitalocean.app/.

Paso 2: Mapeando la aplicación a un dominio personalizado

Ahora que tu aplicación está desplegada con éxito y tiene un dominio ondigitalocean.app, en este paso verás cómo puedes mapearlo a un dominio personalizado.

Hay dos formas en las que puedes agregar un dominio personalizado a tu aplicación:

  1. Usando automatización

  2. Usando el panel de control

En este artículo, verás cómo puedes configurar un dominio personalizado usando el panel de control.

  • Inicia sesión en DigitalOcean Cloud y selecciona la aplicación a la que deseas agregar el dominio, luego haz clic en la pestaña Configuración.

  • Luego, haz clic en el enlace Editar a la derecha de Dominios, y luego haz clic en el botón Agregar Dominio.

  • Tan pronto como empieces a escribir el nombre de tu dominio en el campo de texto a continuación, obtendrás dos opciones para agregar tu dominio personalizado.

  • Puedes agregar el dominio personalizado utilizando los servidores de nombres de DigitalOcean o usando un proveedor de CNAME.

  • Para usar los servidores de nombres de DigitalOcean, copia y pégalos (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) en los registros de servidores de nombres de tu registrador de dominios. Consulta nuestro tutorial sobre Apuntar a los Servidores de Nombres de DigitalOcean Desde Registradores de Dominios Comunes para obtener orientación sobre cómo delegar tu dominio a los servidores de nombres de DigitalOcean desde registradores populares.

  • También puedes agregar un registro CNAME a tu dominio. Si tu proveedor de DNS no es DigitalOcean, consulta su documentación para obtener instrucciones. Usa el botón copiar para copiar el alias ondigitalocean.app y pégalo en el registro CNAME en tu proveedor de DNS para apuntar tu dominio personalizado a tu aplicación de App Platform. Una vez hecho esto, haz clic en el botón Agregar Dominio.

Para configuraciones más avanzadas relacionadas con el dominio, consulta nuestra documentación sobre Cómo gestionar dominios en App Platform.

Agregar dominios comprados en Namecheap

Puedes seguir los pasos anteriores para agregar dominios personalizados comprados en cualquier plataforma. En este ejemplo, veamos cómo configurar los ajustes para un dominio comprado en Namecheap.

  • Inicia sesión en tu cuenta de Namecheap. Haz clic en Lista de dominios, selecciona el dominio que deseas agregar y luego haz clic en Administrar.

  • Luego, ve a la pestaña DNS avanzado y haz clic en Agregar nuevo registro.

  • Luego, dirígete al panel de control de DigitalOcean y copia el enlace del campo que se muestra a continuación.

  • Pégalo en Namecheap y guarda tus cambios.

¡Eso es todo! Ahora, tienes tu aplicación mapeada a tu dominio personalizado.

Conclusión

En este artículo, aprendiste cómo implementar tus aplicaciones y gestionar dominios personalizados utilizando DigitalOcean.

Los dominios personalizados pueden ayudar a que tu sitio web se posicione mejor en los motores de búsqueda porque son únicos y relevantes para tu marca. También facilita que las personas recuerden la URL y accedan a tu aplicación.

Aquí tienes algunas mejores prácticas a seguir para un dominio personalizado:

  • Asegurar la seguridad SSL/TLS, ya que cifra los datos y mejora el SEO al proporcionar una conexión segura.

  • Monitorear regularmente la salud del dominio para detectar problemas y mantener un rendimiento óptimo para los usuarios.

  • Crear copias de seguridad para protegerse contra la pérdida de datos y permitir una rápida recuperación si tu dominio o sitio experimentan problemas.

Próximos pasos

Si decides discontinuar tu aplicación por alguna razón, asegúrate de eliminar el dominio personalizado antes de borrar la aplicación. Para eliminarlo, ve al panel de control, haz clic en tu aplicación, y luego haz clic en Configuración. A continuación, haz clic en el enlace Editar a la derecha de Dominios y en el menú de tres puntos (…), y finalmente, haz clic en Eliminar dominio para quitar el dominio.

Aquí tienes una lista de recursos que pueden ser útiles:

Source:
https://www.digitalocean.com/community/tutorials/deploy-apps-with-custom-domain