Despliega Tu Código de IA en Minutos

Hola a todos. Shifra de Render aquí para mostrarles cómo migrar su aplicación de Repl.it codificada en VIVE a Render, paso a paso. Así que comencemos entrando directamente en la página de inicio de Repl.it, y nos va a preguntar qué queremos hacer. Y queremos hacer algo que sea realmente, realmente simple. Tengo una aplicación reciente listada aquí, pero deberías ver una opción que dice Websites. Deberías poder hacer clic en eso y ver la opción para páginas de destino.

Y luego, si haces clic en Páginas de Destino, va a autocompletar el aviso de la aplicación con algo que se ve un poco así, solo un aviso de aplicación muy genérico. Lo que voy a recomendar es que agregues una línea más a esto, que es usar datos simulados para que este proyecto no requiera una base de datos. Así que si presionamos iniciar, explicaré un poco más sobre por qué realmente voy a hacer eso. Así que al agregar ese último detalle sobre la base de datos, va a mantener nuestro ejemplo realmente, realmente simple para que sea fácil de implementar en Render porque solo tendremos que preocuparnos por un recurso de Render, que es el servicio web real para nuestro sitio web.

Si no hiciéramos esto, entonces la aplicación generaría un montón de datos con una conexión a la base de datos, y luego tendríamos que aprovisionar un recurso de base de datos en Render mismo, que es algo de lo que no queremos tener que preocuparnos. Queremos mantener esto realmente simple y factible. Así que solo vamos a usar datos simulados por ahora. Pero, por supuesto, si quieres usar una base de datos y es algo con lo que te sientes cómodo y listo para hacer para tu aplicación, por favor adelante.

Genial. Ahora la IA va a trabajar en esto por un tiempo. Va a construir esa página de destino de alta conversión para nosotros. Y una vez que la IA haya terminado, vamos a querer probar la funcionalidad y hacer cualquier cambio hasta que estemos contentos con ella. Increíble. Así que esta es nuestra página de destino súper genial que acabamos de generar. Quiero decir que tomó un poco más de tres minutos. Y algo que realmente quería destacar aquí fue que la IA en realidad encontró un error y lo resolvió por sí misma en una especie de, ya sabes, bucle de retroalimentación bien diseñado. Así que es bastante impresionante. Y ahora probemos alguna funcionalidad.

Así que si hacemos clic en el botón Get Early Access, va a simular algunas cosas. Esto se ve bastante como quiero que se vea por ahora. Si deseas hacer cambios aquí, definitivamente hazlo. Pero voy a pasar a los requisitos de render que vamos a necesitar para desplegar nuestra aplicación en render.

Así que para aquellos que han desplegado en render antes, saben que necesitamos algo como un requirements.txt o un package.json para anotar las dependencias de las que Render necesita preocuparse para el proyecto. Así que solo voy a tener el proyecto, asegurarme de que tengamos eso. Y luego también asegurarme de que la aplicación esté escuchando en la dirección 0.0.0.0, no en otras direcciones predeterminadas. Así que tengo un aviso listo para ustedes para eso. Y solo voy a pegar eso aquí para decir, asegúrate de que tengamos algún tipo de dependencias especificadas aquí y asegúrate de que la aplicación esté escuchando en la dirección correcta. Genial.

Ambos requisitos ya están en su lugar. Solo estamos haciendo algunas comprobaciones aquí. Y luego las otras cosas que vamos a necesitar para nuestra configuración de render es que vamos a necesitar saber el directorio raíz donde se está construyendo el sitio web. Vamos a necesitar el comando para esa construcción y el comando de inicio. También queremos asegurarnos de que se va a ejecutar el puerto correcto, y queremos saber si hay otras variables de entorno de las que necesitamos preocuparnos. Así que tengo un aviso listo para eso también. Vamos a pedirle a la IA esa información. Y de nuevo, esto es solo para nuestras propias notas para usar más tarde.

Y de nuevo, esto es solo para nuestras propias notas para usar más tarde. Genial. Así que tenemos un npm run build, un npm run start. El directorio raíz es solo la raíz del proyecto, haciendo las cosas súper, súper simples. A veces te dice lo incorrecto y tienes que cambiar a un dist en lugar de la raíz del proyecto. Así que probaremos ambos si es necesario. No hay almacenamiento en memoria, ni base de datos, como especificamos, por lo que no necesitamos una URL de base de datos ni nada por el estilo. Opcionalmente, puedes instruir a la IA para que agregue un readme si quieres ponerte elegante aquí, cualquier otra documentación que desees. Voy a omitir eso.

Voy a ir directamente a poner esto en mi GitHub. Así que lo que vamos a hacer aquí es mirar la pestaña de vista previa en la parte superior izquierda y simplemente salir de eso. Podemos buscar herramientas y archivos aquí. Y la herramienta que vamos a querer es Git, que es obviamente nuestro control de versiones para nuestra aplicación aquí. Ya me he conectado a Git, así que si no te has conectado a Git, vas a seguir algunos pasos aquí para ir a la configuración, vas a seleccionar tu proveedor de Git, elegir GitHub, y luego seguir los pasos de autorización para conectarte a tu proveedor de Git.

Y una vez que hayas hecho eso, deberías ver una pantalla similar aquí. Ya estoy conectado a GitHub, así que no tengo que seguir esos pasos adicionales. Lo que necesito hacer es hacer clic en crear remoto aquí mismo y luego darle un nombre al repo. Voy a usar una página de aterrizaje de muestra. Y solo decir, no sé, página de aterrizaje de muestra para mostrar implementaciones fáciles en regular perfecto. Luego solo voy a hacer clic en crear repositorio en GitHub. Puede que ya tenga una página de aterrizaje para esto. Digamos simplemente demo de página de aterrizaje de muestra, luego crearemos este repositorio. Y recibimos una notificación aquí de que se creó el repositorio.

Parece que todo se ha transferido desde donde dice actualizaciones remotas. Ahora tenemos una URL del repositorio, así que podemos hacer clic en esta URL aquí mismo y nos llevará a la página de GitHub. Creo que un paso realmente bueno aquí es simplemente confirmar que hay código aquí. No es solo un repositorio vacío con el que estás tratando y todo funcionó como se esperaba. Nada se rompió en el camino. Así que como puedes ver, todo el código está correctamente poblado aquí. Y eso significa que estamos realmente listos para desplegar porque tenemos nuestro código listo para usar. Así que voy a ir al dashboard de Render. Esto es simplemente dashboard.render.com. Si no tienes una cuenta de Render, ahora es el momento de crear una. Y ahora que estamos en el dashboard de Render, todo lo que tenemos que hacer es hacer clic en nuevo o agregar nuevo, y haremos clic en web service como discutimos anteriormente. No hagas clic en static site, haz clic en web service. Así que ahora podemos simplemente seleccionar uno de nuestros repositorios que está conectado a nuestro proveedor de Git. Si aún no te has conectado a GitHub o a tu proveedor de Git, ahora es el momento de hacerlo. Y voy a hacer clic en esa demo de página de aterrizaje de muestra que acabamos de ver. Genial. Puedes seleccionar no project solo para mantener esto rápido, pero también puedes crear un proyecto o agregar este web service a un proyecto existente. Voy a omitir eso, y podemos desplazarnos hasta nuestro directorio raíz, que dijimos que era solo el punto que representa el directorio raíz principal del repositorio. Dijimos que el comando de build era npm install npm run build, y eso ya está configurado para nosotros aquí. Luego vas a seleccionar un tipo de instancia de Render. Vamos a usar el tipo de instancia starter aquí que tiene algunas características de gran fiabilidad por solo $7 al mes. Y luego no necesitamos realmente ninguna variable de entorno adicional. Si tienes otras variables de entorno asociadas con tu proyecto con claves de API o cualquier otra cosa de la que debas preocuparte, asegúrate de agregar esos secretos aquí de manera segura. Eso es prácticamente todo. Así que creo que vamos a desplegar nuestro web service, y tendremos nuestra aplicación funcionando en poco tiempo. Genial. Dice que todo está disponible en nuestra URL principal, así que vamos a comprobarlo. Increíble. Si estuviste siguiendo, acabas de Vive-codificar una aplicación en Repl.it y la desplegaste con éxito en Render para todo Internet. Así que gran trabajo, y estamos ansiosos por ver qué construyes a continuación con Render.