Introducción
Como desarrolladores, solemos crear proyectos juntos, ya sea por diversión o para aprender cosas nuevas. Estos proyectos también sirven como escaparate de nuestras habilidades.
Necesitas una prueba de trabajo. Además de tu código, los usuarios deben poder usar tu aplicación, y para ello, no debe estar solo en localhost:3000, sino que debe ser accesible mediante un enlace. Para lograrlo, debes implementar tu aplicación y asignarla a un dominio personalizado para una mejor legibilidad y fácil de compartir.
Requisitos previos
- Una cuenta DigitalOcean para acceder a la plataforma de aplicaciones.
- Una cuenta de GitHub
- Dominio personalizado disponible en NameCheap o plataforma similar.
¿Qué es la plataforma de aplicaciones DigitalOcean?
App Platform es una plataforma como servicio (PaaS) totalmente administrada que ayuda a los desarrolladores a crear, implementar y escalar aplicaciones fácilmente. Elimina gran parte de la gestión de la infraestructura y permite centrarse en el código y la implementación.
Puede analizar y compilar código automáticamente desde proveedores de Git como GitHub y GitLab, y publicar sus aplicaciones en la nube. También puede publicar usando imágenes de contenedor que haya subido previamente a DigitalOcean Container Registry o Docker Hub.
Con funciones como mitigación de DDoS, parcheo automático del sistema operativo, escalamiento vertical, soporte HTTP, CDN global y soporte de dominio, la plataforma de aplicaciones simplifica la publicación y administración de sus aplicaciones.
Paso 1: Implementación mediante la plataforma de la aplicación
Una vez que la aplicación esté lista, puedes implementarla desde monorepositorios, imágenes de contenedores o usando GitHub Actions.
Un monorepositorio es un repositorio de código con control de versiones que alberga numerosos proyectos. Si bien estos proyectos pueden estar relacionados, suelen ser lógicamente independientes y estar gestionados por equipos diferentes.
Veamos cómo podemos implementar aplicaciones usando la Plataforma de Aplicaciones con GitHub. Supongamos que tienes un repositorio privado de GitHub con un archivo index.html que contiene este sencillo código de "Hola Mundo":
<!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>Implementación mediante Github
Vaya a la página de Aplicaciones y haga clic en Crear aplicación.
Conecte su cuenta de GitHub y luego seleccione el repositorio de GitHub que contiene su código fuente.
En la sección Directorio de origen, especifique la carpeta que contiene el código fuente, como se muestra en la imagen a continuación. Dado que nuestro repositorio de demostración consta únicamente de un archivo index.html en el directorio raíz, usaremos el directorio predeterminado /. Si su código sigue la estructura monorepo, asegúrese de seleccionar el directorio específico donde se encuentra el código.
Seleccione Implementar automáticamente, esto se volverá a implementar automáticamente cada vez que aplique un nuevo cambio:
Configura los recursos de tu aplicación y haz clic en Siguiente. Verás lo siguiente:
A continuación, realiza algunas comprobaciones antes de ejecutar la aplicación. Para aplicaciones más complejas, como las que usan API, es posible que deba agregar variables de entorno, que puede configurar en las páginas siguientes.
A continuación, puede editar el nombre de la aplicación y seleccionar el repositorio en el que se implementará su aplicación.
Luego haga clic en Siguiente para ver la página de revisión, donde puede ver otra información sobre la aplicación, como facturación, ubicación, etc. Finalmente, haga clic en Crear recurso para ejecutar la aplicación.
Esto tardará unos minutos. Una vez iniciada la aplicación, podrás ver su URL y otros detalles en la página de resumen.
Paso 2: Asignar la aplicación a un dominio personalizado
Ahora que su aplicación se implementó correctamente y tiene el dominio ondigitalocean.app, en este paso verá cómo puede asignarla a un dominio personalizado.
Hay dos formas de agregar un dominio personalizado a tu aplicación:
- Uso de la automatización
- Uso del panel de control
En este artículo verás cómo puedes configurar un dominio personalizado usando el panel de control.
- Inicie sesión en DigitalOcean Cloud y seleccione la aplicación a la que desea agregar el dominio, luego haga clic en la pestaña Configuración.
- A continuación, haga clic en el enlace Editar a la derecha de Dominios y luego en el botón Agregar dominio.
Una vez que comience a escribir su nombre de dominio en el campo de texto a continuación, tendrá dos opciones para agregar su dominio personalizado.
Puede agregar un dominio personalizado utilizando los servidores de nombres de DigitalOcean o utilizar un proveedor CNAME.
Para usar los servidores de nombres de DigitalOcean, cópielos y péguelos (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) en los registros de servidores de nombres de su registrador de dominios. Para obtener instrucciones sobre cómo asignar su dominio a servidores de nombres de DigitalOcean desde registradores populares, consulte nuestro tutorial sobre cómo apuntar servidores de nombres a DigitalOcean desde registradores de dominios 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 de tu proveedor de DNS para apuntar tu dominio personalizado a tu aplicación de App Platform. Al terminar, haz clic en el botón Agregar dominio.
Agregar dominios comprados en Namecheap
Puedes seguir los pasos anteriores para agregar dominios personalizados adquiridos en cualquier plataforma. En este ejemplo, veamos cómo configurar un dominio adquirido en Namecheap.
- Inicia sesión en tu cuenta de Namecheap. Haz clic en Lista de dominios, selecciona el dominio que quieres añadir y haz clic en Administrar.
- Luego vaya a la pestaña DNS avanzado y haga clic en Agregar nuevo registro.
Luego, vaya al panel de control de DigitalOcean y copie el enlace de abajo.
Péguelo en Namecheap y guarde los cambios.
Resultado
En este artículo, aprendió cómo implementar sus aplicaciones y administrar dominios personalizados utilizando DigitalOcean.
