100x Builder Playbook : Next.js auto-hébergé avec Kamal 2 et VMs Cloud

Expédiez vos produits en quelques jours. Dites adieu à la Server-phobie !

Ce cours a été traduit automatiquement en Français

screenshot

Bonjour ! Merci de prendre le temps de lire ce livre.
Nous sommes à la fin de l'année 2024 et, évidemment, nous avons beaucoup de défis à relever dans le monde : L'inflation n'a pas cessé. L'argent est plus difficile à emprunter. Les entreprises technologiques ont des budgets plus serrés.

Mais une chose reste inchangée : Les gens s'attendent à plus de valeur de la part des choses ou des services qu'ils achètent.
En tant que travailleur technologique et créateur, je crois que nous devons nous adapter à ces défis et construire plus avec moins d'efforts.
Au lieu de simplement expédier rapidement, nous devons vraiment construire, itérer avec une pile technologique mature, avec un coût de calcul inférieur, c'est-à-dire des serveurs bare metal ou des VM cloud.

Développer des applications logicielles n'est pas aussi coûteux et lent qu'auparavant, avec la croissance des grands modèles de langage.
Pendant ce temps, de plus en plus de nouvelles piles technologiques sont créées pour faciliter le développement.
Cependant, nous avons été éduqués à penser que "DevOps est coûteux et risqué", "Vous devriez être sans serveur".
J'ai été convaincu une fois. J'ai essayé de nombreuses piles sans serveur différentes de Google App Engine mais je n'en ai trouvé aucune adaptée à mon entreprise. Ces dernières années, nous avons beaucoup d'autres options comme Vercel. Avec tout le respect que j'ai pour leurs efforts en matière d'expérience développeur, je crois toujours que le sans serveur n'est pas une manière durable de construire des choses.

Plus tôt le mois dernier, DHH de 37signals/basecamp a publié Kamal 2, basé sur Kamal (MSRK) publié l'année dernière. Il a une énorme nouvelle fonctionnalité, qui vous permet de déployer plusieurs applications web différentes sur une seule machine Linux. Cela était en fait possible avec Kamal 1 mais nécessitait de nombreux hacks.
Pour une personne ou des équipes de quelques personnes, c'est un changement utile. Parce que vous pouvez même économiser davantage dans les projets en phase de démarrage.

En même temps, Sahil Lavingia, le PDG de Gumroad, a eu plusieurs diffusions de codage en direct avec Cursor et Next.js avec des exemples en production, ce qui est super productif, tant que vous avez des connaissances de base en TypeScript (ou JavaScript), CSS, et un peu de ligne de commande.

Actuellement, l'une des piles parfaites pour les projets en croissance pour les petites équipes, qui peuvent être livrées rapidement, est Next.js, livré dans Docker, utilisant Kamal 2.
Avant de commencer, je veux me présenter. Je suis né dans les années 1990 et j'ai commencé à coder et à utiliser Internet assez tôt, en 1999, lorsque mon père a commencé à postuler pour un master. À cette époque, nous ne possédions aucun ordinateur à la maison. Mon père et moi allions au cybercafé pour obtenir des informations.
Après avoir obtenu mon diplôme, je suis allé chez Microsoft, où j'ai travaillé sur plusieurs projets différents, y compris Outlook iOS, Android, Mac, Web, et OneDrive/Sharepoint Web. J'ai vu de nombreux projets de code de plusieurs millions de lignes (évidemment, à la fois Outlook et OneDrive). Et un fait amusant est que vous pouvez trouver toutes les cartes sources pour le code client sur photos.onedrive.com. Ces projets sont des vaches à lait pour l'entreprise. Mais je ne pense pas qu'ils soient sur la bonne voie pour le développement logiciel. En résumé, l'exécution est trop lente et vous ne pouvez pas voir la technologie contribuer au succès, du moins jusqu'à aujourd'hui. Ces projets ont un bon code, un design relativement moderne. Mais je sens que c'est faux, surtout avec l'évolution de l'IA. Alors j'ai quitté Microsoft pour créer ma propre entreprise.

Ce tutoriel (également une communauté) est la toute première partie de réflexions et de partages d'une pile technologique du monde réel qui est plus pragmatique que 99 % des autres. Il vise non seulement à expédier les choses rapidement, mais à faible coût (tant en termes de temps consommé que de dépenses cloud en temps d'exécution). Parce que comme l'a dit Jeff Bezos, "votre marge est mon opportunité". Si vos concurrents sont sur Vercel, ou Azure/AWS, vous aurez beaucoup plus d'opportunités en utilisant cette pile (Next.js + Kamal 2). Je suis convaincu que cela peut fonctionner même avant nos IPO : )
Merci d'avoir lu cette partie initiale. J'espère que vous l'apprécierez.

Maintenant, concentrons-nous sur la technologie.

Exigences techniques

Ce livre porte principalement sur des éléments techniques. Voici quelques exigences :

  • Matériel : Un ordinateur capable d'exécuter Ruby, Docker, Node.js, généralement Windows/Mac/Linux sont tous parfaits pour cela.
  • Connaissances :
    • Connaissances minimales ou aucune en Ruby
    • Node.js (nécessaire pour construire des produits avec Next.js)
    • Next.js ou d'autres frameworks Node.js comme Express.js
    • Linux/Docker de base

Veuillez vous assurer que vous avez Docker (ou Docker Desktop) installé sur votre machine locale. Si ce n'est pas le cas, il est également acceptable d'utiliser un environnement docker distant sur une machine Linux comme "builder" (nous aborderons ce concept dans la partie Kamal 2).

Si vous pensez que ce livre pourrait ne pas vous convenir, ne vous inquiétez pas, tant que vous n'avez pas terminé plus de 30 % de ce livre, vous pouvez demander un remboursement dans les 7 jours suivant l'achat.
Si vous souhaitez garder ce livre accessible, mais que vous avez encore des suggestions ou des difficultés, veuillez commenter sous cette page et nous vous aiderons.

Démarrage rapide : Next.js minimal en production, en 15 minutes

Nous ne voulons pas vous retenir trop longtemps avant de passer à la production. Donc, pour le tout premier projet, commençons un projet Next.js minimal et déployons-le en production instantanément. En général, dans de nombreux livres, la dernière section concerne le déploiement en production. De cette manière, nous ne pouvons pas expédier rapidement.
Je crois que le meilleur rythme pour le développement est d'expédier en production instantanément après vous être assuré que le code est terminé et a peu de chances de régression.
En supposant que vous ayez tous les environnements de développement prêts et un serveur cloud (comme une machine virtuelle sur DigitalOcean, OVH, Hetzner, etc.), nous pouvons 100 % le déployer en 15 minutes. Pour la deuxième fois, vous n'aurez peut-être besoin que de 5 minutes pour le faire fonctionner. Une fois que vous vous y serez habitué, vous ne perdrez aucun élan dans la construction de produits!

Alors déployons d'abord !

Démarrer un projet Next.js

Vous pouvez démarrer un projet Next.js en utilisant cette commande : npx create-next-app@latest next-kamal-playbook-minimal-demo
Si vous n'êtes pas familier avec ce processus, vous pouvez lire la documentation officielle de Next.js, https://nextjs.org/docs/getting-started/installation

La sortie serait comme

➜  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? … @/\*

Vous pouvez choisir de personnaliser l'alias d'importation par défaut ou non. Cela n'a pas beaucoup d'importance pour l'état actuel et nous pouvons toujours le changer plus tard.

L'étape suivante consiste à s'assurer que la démo minimale fonctionne. Vous pouvez changer de répertoire vers next-kamal-playbook-minimal-demo (sur Linux/Mac/Windows, vous pouvez également exécuter cd next-kamal-playbook-minimal-demo dans le terminal), puis exécuter npm run dev.
Lorsque vous ouvrez http://localhost:3000, vous pouvez voir l'écran initial de Next.js. Cela signifie que ce projet fonctionne.
Nous ne voulons pas changer de code Next.js dans cette partie. Au lieu de cela, nous allons ajouter un Dockerfile à la racine de ce projet. Vous pouvez utiliser VSCode/Cursor ou Vim pour ajouter ce fichier avec ces contenus :