100x Builder Playbook: Next.js autoalojado con Kamal 2 y VMs en la nube

Envía tus productos en días. ¡Di adiós a la Server-fobia!

Este curso ha sido traducido automáticamente al Español

screenshot

¡Hola! Gracias por tomarte el tiempo de leer este libro.
Es finales de 2024 y, obviamente, tenemos muchos desafíos en todo el mundo: La inflación no ha parado. Es más difícil pedir dinero prestado. Las empresas tecnológicas tienen presupuestos más ajustados.

Pero una cosa no ha cambiado: La gente espera más valor de las cosas o servicios que compran.
Como trabajador y creador tecnológico, creo que necesitamos adaptarnos a estos desafíos y construir más con menos esfuerzo.
En lugar de solo enviar rápido, necesitamos realmente construir, iterar con una pila tecnológica madura, con un menor costo computacional, es decir, bare metal o VMs en la nube.

Desarrollar aplicaciones de software no es tan caro y lento como antes, con el crecimiento de los Modelos de Lenguaje Grande.
Mientras tanto, se están creando cada vez más nuevas pilas tecnológicas para facilitar el desarrollo.
Sin embargo, nos han educado con cosas como "DevOps es caro y arriesgado", "Deberías ser sin servidor".
Yo estuve convencido una vez. Probé muchas pilas sin servidor diferentes de Google App Engine, pero no encontré una adecuada para mi negocio. En los últimos años, tenemos muchas otras opciones como Vercel. Con todo respeto a sus esfuerzos por una gran experiencia de desarrollo, sigo creyendo que sin servidor no es una forma sostenible de construir cosas.

A principios del mes pasado, DHH en 37signals/basecamp lanzó Kamal 2, basado en Kamal (MSRK) lanzado el año pasado. Tiene una nueva característica enorme, que te permite desplegar múltiples aplicaciones web diferentes en una sola máquina Linux. Esto era posible con Kamal 1, pero requería muchos hacks.
Para equipos de una o pocas personas, este es un cambio útil. Porque incluso puedes ahorrar más en proyectos en etapa temprana.

Al mismo tiempo, Sahil Lavingia, el CEO de Gumroad, tuvo varias transmisiones en vivo de codificación con Cursor y Next.js con ejemplos en producción, lo cual es súper productivo, siempre que tengas conocimientos básicos de TypeScript (o JavaScript), CSS y un poco de línea de comandos.

Actualmente, una de las pilas perfectas para proyectos en crecimiento para pequeños equipos, que se puede entregar rápidamente, es Next.js, entregado en Docker, usando Kamal 2.
Antes de comenzar, quiero presentarme. Nací en la década de 1990 y comencé a programar y usar internet bastante temprano, en 1999, cuando mi padre comenzó a solicitar un máster. En ese momento, no teníamos computadoras en casa. Mi padre y yo íbamos a un cibercafé para obtener información.
Después de graduarme de la escuela, fui a Microsoft, trabajé en varios proyectos diferentes, incluyendo Outlook iOS, Android, Mac, Web y OneDrive/Sharepoint Web. He visto muchos proyectos de código de millones de líneas (obviamente tanto Outlook como OneDrive). Y un dato curioso es que puedes encontrar todos los mapas de origen para el código del cliente en photos.onedrive.com. Estos proyectos son vacas lecheras para la empresa. Pero no creo que estén en el camino correcto para el desarrollo de software. En resumen, la ejecución es demasiado lenta y no puedes ver que la tecnología está contribuyendo al éxito, al menos hasta hoy. Estos proyectos tienen buen código, un diseño relativamente moderno. Pero siento que está mal, especialmente con la evolución de la IA. Así que dejé Microsoft para comenzar mi propio negocio.

Este tutorial (también una comunidad) es la primera parte de pensamientos y comparticiones de una pila tecnológica del mundo real que es más pragmática que el 99% de las demás. No solo tiene como objetivo enviar cosas rápido, sino con un bajo costo (tanto en términos de tiempo consumido como de gastos en la nube en tiempo de ejecución). Porque como dijo Jeff Bezos, “tu margen es mi oportunidad”. Si tus competidores están en Vercel, o Azure/AWS, tendrás muchas más oportunidades al usar esta pila (Next.js + Kamal 2). Estoy seguro de que puede funcionar incluso antes de nuestras OPI : )
Gracias por leer esta parte inicial. Espero que lo disfrutes.

Ahora, enfoquémonos en la tecnología.

Requisitos técnicos

Este libro se centra principalmente en aspectos técnicos. Estos son algunos requisitos:

  • Hardware: Una computadora que pueda ejecutar Ruby, Docker, Node.js, generalmente Windows/Mac/Linux son perfectos para esto.
  • Conocimientos:
    • Conocimientos mínimos o nulos de Ruby
    • Node.js (requerido para construir productos con Next.js)
    • Next.js u otros frameworks de Node.js como Express.js
    • Linux/Docker básico

Asegúrate de tener Docker (o Docker Desktop) instalado en tu máquina local. Si no, también es aceptable usar un entorno docker remoto en una máquina Linux como "constructor" (entramos en este concepto en la parte de Kamal 2).

Si encuentras que este libro puede no ser adecuado para ti, no te preocupes, siempre que no termines más del 30% de este libro, puedes solicitar un reembolso dentro de los 7 días posteriores a la compra.
Si deseas mantener este libro accesible, pero aún tienes algunas sugerencias o dificultades, por favor comenta debajo de esta página y te ayudaremos.

Inicio Rápido: Next.js Mínimo en Producción, en 15 minutos

No queremos retenerte demasiado tiempo antes de llegar a producción. Así que para el primer proyecto, comencemos un proyecto mínimo de Next.js y despleguémoslo a producción al instante. Generalmente, en muchos libros, la última sección trata sobre el despliegue a producción. De esa manera no podemos enviar rápido.
Creo que el mejor ritmo para el desarrollo es enviar a producción instantáneamente después de asegurarte de que el código está terminado y tiene pocas posibilidades de regresión.
Suponiendo que tienes todos los entornos de desarrollo listos y un servidor en la nube (como una máquina virtual en DigitalOcean, OVH, Hetzner, etc.), podemos hacer que se despliegue dentro de 15 minutos. Para la segunda vez, es posible que solo necesites 5 minutos para hacerlo funcionar. Una vez que te acostumbres, no perderás ningún impulso en la construcción de productos!

¡Así que despleguemos primero!

Iniciar un Proyecto Next.js

Puedes iniciar un proyecto Next.js usando este comando: npx create-next-app@latest next-kamal-playbook-minimal-demo
Si no estás familiarizado con este proceso, puedes leer la documentación oficial de Next.js, https://nextjs.org/docs/getting-started/installation

La salida sería algo como

➜  next-playground npx create-next-app@latest next-kamal-playbook-minimal-demo
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use \`src/\` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/\*)? … No / Yes
✔ What import alias would you like configured? … @/\*

Puedes elegir personalizar el alias de importación predeterminado o no. No importa mucho para el estado actual y siempre podemos cambiarlo más tarde.

El siguiente paso es asegurarte de que la demostración mínima esté en funcionamiento. Puedes cambiar al directorio next-kamal-playbook-minimal-demo (en Linux/Mac/Windows, también puedes ejecutar cd next-kamal-playbook-minimal-demo en la terminal), luego ejecuta npm run dev.
Al abrir http://localhost:3000, puedes ver la pantalla inicial de Next.js. Eso significa que este proyecto está en funcionamiento.
No queremos cambiar ningún código de Next.js en esta parte. En su lugar, agregaremos un Dockerfile a la raíz de este proyecto. Puedes usar VSCode/Cursor o Vim para agregar este archivo con estos contenidos: