Dans le tutoriel d'aujourd'hui, nous allons apprendre à auto-héberger et configurer notre serveur, ce qui nous permettra de déployer n'importe quelle application Web en ligne. Il existe plusieurs façons de déployer des applications en ligne. Deux stratégies impliquent l'utilisation d'un VPS, d'un serveur privé virtuel et d'une plateforme d'hébergement géré partagé comme Vercel, Netlify, WordPress, GoDaddy, etc.
Un VPS est une machine virtuelle qui fournit des ressources de serveur dédiées sur un serveur physiquement partagé avec d'autres utilisateurs. Il s'agit en fait d'un hébergement de niveau intermédiaire pour les sites Web et les applications, offrant plus de contrôle et de personnalisation par rapport à l'hébergement partagé. Des exemples de certaines plates-formes d'hébergement VPS incluent Hetzner, Akamai, Vultr, Cloudcone.
D'un autre côté, il est plus facile d'héberger des sites Web en utilisant une plateforme d'hébergement géré. Ces plates-formes fournissent des outils, des flux de travail et une infrastructure pour créer et déployer des applications Web. Ces plates-formes effectuent elles-mêmes l’équilibrage de charge et la mise en cache. Ils fonctionnent bien pour tout développeur cherchant à créer et déployer des applications Web rapidement sans configuration supplémentaire.
Comme toujours, il y a des avantages et des inconvénients à utiliser chaque stratégie. L'une des différences les plus significatives est que lorsque vous utilisez un VPS, vous bénéficiez d'une personnalisation complète puisque vous contrôlez l'ensemble du serveur et tout ce qui l'accompagne. Cela signifie configurer l'environnement de développement, les règles de pare-feu, l'hébergement, etc. Cette personnalisation ajoute à la complexité et vous avez besoin de plus de support technique puisque vous faites tout vous-même. Il faut savoir qu'une plateforme d'hébergement géré est vraiment conviviale pour les débutants puisque la plupart des outils sont prédéfinis et que vous bénéficiez d'une assistance et d'une documentation. Parce qu'il est déjà configuré et géré, vous n'obtiendrez pas le niveau élevé de personnalisation que vous obtiendriez avec un VPS.
De plus, vous devez prendre en considération la différence de prix. La plupart des VPS sont payants, bien que vous puissiez entièrement personnaliser votre serveur pour le rendre léger ou aussi robuste que vous en aurez besoin. En termes de performances, cela la place au-dessus de toute plate-forme d'hébergement gérée. Ce dernier propose des forfaits gratuits, vous devez donc examiner les différences. Le grand public voudrait des plateformes d’hébergement gérées car elles sont gratuites. Cependant, si vous désirez plus de puissance et souhaitez héberger des applications avancées dans une seule application, alors VPS est la voie à suivre.
Notre application Watchlist Tracker est une application CRUD full-stack simple mais puissante qui sera utilisée pour suivre les listes de surveillance de films. Cette application permettra également à ses utilisateurs d'ajouter facilement des films ou des séries qu'ils souhaitent regarder, de mettre à jour le titre ou la classification du film et de supprimer les films qu'ils ont déjà regardés ou qu'ils ne souhaitent plus suivre. L'application donne aux utilisateurs accès à une interface simple pour organiser et suivre les films d'intérêt, ce qui en fait un outil idéal pour les cinéphiles qui souhaitent garder une longueur d'avance en gardant un œil sur leur liste de surveillance.
Vous pouvez voir à quoi ressemble l'application ci-dessous :
Page d'accueil
Page des éléments de film/série
Page Ajouter un nouvel article
Avant de commencer à créer l'application, il est essentiel que votre environnement de développement soit configuré et fonctionnel. Assurez-vous que les éléments suivants sont installés sur votre ordinateur :
Il existe une excellente extension gratuite SQLite Viewer pour VS Code, qui peut également être utile en plus de l'utilisation de la ligne de commande. C'est bon pour visualiser rapidement les données à l'intérieur de votre base de données.
Notre application Watchlist Tracker est construite à l'aide d'une pile technique très moderne et avant-gardiste, qui offre une excellente expérience de développement. J'ai choisi d'utiliser des outils comme Bun, Hono, Vite, TanStack, Hetzner et DeployHQ car ils offrent tous aux développeurs une expérience de construction moderne.
Jetons un coup d'œil aux technologies que nous utiliserons dans ce projet :
Backend
Frontend
Hébergement et déploiement
D'accord, commençons à créer notre application ! Cette section sera divisée en deux parties : d'abord, nous réaliserons le backend, puis nous créerons le frontend.
Veuillez créer un nouveau dossier sur votre ordinateur pour le projet appelé watchlist-tracker-app, puis placez-y un CD. Maintenant, créez un nouveau projet Bun pour le backend en utilisant ces commandes affichées ici :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Notre projet devrait maintenant être mis en place. Il suffit d'installer les dépendances, de travailler sur la configuration et d'écrire du code serveur. Ouvrez le projet dans votre éditeur de code.
Installez maintenant les dépendances de notre serveur en utilisant cette commande :
bun add hono prisma @prisma/client
Nous avons ajouté Bun comme environnement d'exécution, Hono comme serveur API et Prisma comme ORM de base de données.
Configurons maintenant Prisma ORM et SQLite avec cette commande :
npx prisma init
Prisma devrait maintenant être configuré pour fonctionner sur notre serveur, donc dans la prochaine étape, nous configurerons notre schéma de base de données. Remplacez donc tout le code dans prisma/schema.prisma par ce code :
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Notre schéma de base de données est configuré et il est connecté à notre fichier de base de données SQLite.
Exécutez maintenant ce script de migration pour créer la base de données SQLite :
npx prisma migrate dev --name init
Super, maintenant que la migration Prisma est terminée, nous pouvons travailler sur notre fichier API.
Créons maintenant notre fichier API principal, qui utilisera Hono. Accédez au fichier serveur à l’intérieur de src/server.ts et ajoutez ce code au fichier :
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Avec ce fichier, notre serveur utilisera Bun et Hono et fonctionnera sur le port 8000. Nous avons également tous les points de terminaison CRUD (Créer, Lire, Mettre à jour, Supprimer) pour notre tracker de liste de surveillance. Toutes nos données sont enregistrées dans une base de données SQLite.
Il ne reste plus qu'à créer les scripts d'exécution et de construction pour notre serveur. Ensuite, nous pouvons tester les points de terminaison pour nous assurer qu’ils fonctionnent comme prévu. Ajoutez ces scripts d'exécution à notre fichier package.json :
"scripts": {
"start": "bun run src/server.ts",
"build": "bun build src/server.ts --outdir ./dist --target node"
},
Ok, maintenant si vous exécutez la commande bun run start, vous devriez voir ceci dans votre terminal confirmant que le serveur est en cours d'exécution :
Server is running on http://localhost:8000
Si vous exécutez la commande bun run build, cela devrait créer un dossier dist prêt pour la production. Nous en aurons besoin lorsque nous déploierons notre application sur Hetzner ou sur n'importe quel serveur en ligne.
Très bien, testons rapidement nos points de terminaison backend pour nous assurer qu'ils fonctionnent comme prévu. Ensuite, nous pouvons commencer à travailler sur notre front-end. Nous avons cinq points de terminaison à tester : deux GET, un POST, un PUT et un DELETE. Je vais utiliser Postman pour tester l'API.
Point de terminaison POST de l'API de la liste de surveillance
Méthode : POST
Point de terminaison : http://localhost:8000/watchlist
Il s'agit de notre point de terminaison POST, qui est utilisé pour envoyer un objet JSON avec les données du film/série à notre base de données.
API de l'application Watchlist OBTENIR tous les points de terminaison
Méthode : GET
Point de terminaison : http://localhost:8000/watchlist
Il s'agit de notre point de terminaison GET principal, qui renverra un tableau d'objets que notre frontal récupérera. Il renvoie un tableau d'objets avec nos données ou un tableau vide si nous n'avons pas encore publié de données dans notre base de données.
API de l'application Watchlist OBTENUE par point de terminaison d'ID
Méthode : GET
Point de terminaison : http://localhost:8000/watchlist/3
Il s'agit de notre point de terminaison GET pour obtenir les éléments par leur identifiant. Il renvoie uniquement cet objet et affiche une erreur si l'élément n'existe pas.
Point de terminaison PUT de l'API de l'application Watchlist
Méthode : METTRE
Point de terminaison : http://localhost:8000/watchlist/3
Il s'agit de notre point de terminaison PUT pour mettre à jour les éléments à l'aide de leur identifiant. Il renvoie uniquement cet objet et affiche une erreur si l'élément n'existe pas.
API de l'application Watchlist SUPPRIMER le point de terminaison
Méthode : SUPPRIMER
Point de terminaison : http://localhost:8000/watchlist/3
Il s'agit de notre point de terminaison DELETE pour supprimer des éléments à l'aide de leur identifiant. Il renvoie un objet de réussite et affiche une erreur si l'élément n'existe pas.
Autrement dit, notre API est opérationnelle. Nous pouvons commencer par le code front-end maintenant.
Assurez-vous que vous vous trouvez dans le dossier racine de watchlist-tracker-app, puis exécutez ces scripts ci-dessous pour créer un projet React à l'aide de Vite configuré pour TypeScript avec tous nos packages et dépendances :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Ce script utilise essentiellement l'environnement d'exécution Bun pour installer et configurer notre projet. Tous les fichiers et dossiers nécessaires ont été créés, il suffit donc d'ajouter le code. Nous avons configuré notre projet Vite pour utiliser Tailwind CSS pour le style et nous avons TanStack Router pour le routage des pages avec axios pour récupérer des données et dayjs pour effectuer des conversions de dates dans notre formulaire.
Grâce à ce script de build, notre travail est désormais beaucoup plus simple, alors commençons à ajouter le code à nos fichiers. Il y aura d’abord quelques fichiers de configuration. Remplacez tout le code du fichier tailwind.config.js par ce code :
bun add hono prisma @prisma/client
Ce fichier est assez explicatif. Nous avons besoin de ce fichier pour que Tailwind CSS fonctionne tout au long de notre projet.
Remplacez maintenant tout le code de notre fichier src/index.css par ce code, nous devons ajouter les directives Tailwind afin de pouvoir les utiliser dans nos fichiers CSS :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Avec ces directives ajoutées, nous pouvons accéder aux styles CSS Tailwind dans tous nos fichiers CSS. Supprimez ensuite tout le code CSS à l’intérieur du fichier App.css car nous n’en avons plus besoin.
Très bien, passons maintenant au fichier de configuration final, et ensuite nous pourrons travailler sur nos pages et nos composants.
Ajoutez ce code au fichier api.ts dans le dossier racine :
bun add hono prisma @prisma/client
Ce fichier exporte les points de terminaison auxquels notre frontend devra se connecter sur notre backend. N'oubliez pas que notre API backend se trouve à l'adresse http://localhost:8000.
Ok, bien, remplaçons tout le code de notre fichier App.tsx par ce nouveau code :
npx prisma init
Il s'agit de notre principal composant de point d'entrée pour notre application et ce composant contient les itinéraires de toutes nos pages.
Ensuite, nous travaillerons sur les principaux composants et pages. Nous avons trois fichiers composants et trois pages de fichiers. En commençant par les composants, ajoutez ce code à notre fichier dans composants/AddItemForm.tsx :
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Ce composant est utilisé pour ajouter des éléments à notre base de données. L'utilisateur utilisera ce composant de formulaire pour envoyer une requête POST au backend.
Ajoutons maintenant le code pour les composants/FormField.tsx :
npx prisma migrate dev --name init
Il s'agit d'un composant de champ de formulaire réutilisable pour notre formulaire. Cela garde notre code SEC car nous pouvons simplement utiliser le même composant pour plusieurs champs, ce qui signifie que notre base de code est plus petite.
Et enfin ajoutons le code pour composants/Header.tsx :
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Grâce à ce composant d'en-tête, chaque page a un en-tête avec une navigation principale.
Il ne nous reste plus que les trois pages et notre application est terminée. Ajoutez donc ce code suivant à pages/AddItem.tsx :
"scripts": {
"start": "bun run src/server.ts",
"build": "bun build src/server.ts --outdir ./dist --target node"
},
Il s'agit essentiellement de la page permettant d'ajouter des éléments à notre base de données qui contient le composant de formulaire.
Bien, ajoutons ensuite le code pour pages/Home.tsx :
Server is running on http://localhost:8000
Comme vous pouvez l'imaginer, ce sera notre page d'accueil, qui envoie une requête GET au backend, qui récupère ensuite un tableau d'objets pour tous les éléments de notre base de données.
Ajoutez enfin le code pour pages/ItemDetail.tsx :
bun create vite client --template react-ts
cd client
bunx tailwindcss init -p
bun install -D tailwindcss postcss autoprefixer tailwindcss -p
bun install @tanstack/react-router axios dayjs
cd src
mkdir components pages
touch api.ts
touch components/{AddItemForm,FormField,Header}.tsx pages/{AddItem,Home,ItemDetail}.tsx
cd ..
Cette page affiche les pages d'articles individuels par leur identifiant. Il existe également un formulaire pour modifier et supprimer des éléments de la base de données.
C'est tout. Notre application est prête à l'emploi. Assurez-vous que les serveurs backend et clients sont en cours d'exécution. Vous devriez voir l'application s'exécuter dans le navigateur ici : http://localhost:5173/.
Exécutez les deux serveurs avec ces commandes dans leurs dossiers :
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
Ok, bravo. Notre candidature est complète ! Déployons-le maintenant sur GitHub !
Le déploiement de notre application sur GitHub est assez simple. Tout d'abord, placez un fichier .gitignore dans le dossier racine de notre application watchlist-tracker. Vous pouvez simplement copier et coller le fichier .gitignore à partir des dossiers backend ou client. Allez maintenant sur votre GitHub (créez un compte si vous n'en avez pas) et créez un dépôt pour votre application de suivi de liste de surveillance.
À l'intérieur du dossier racine de watchlist-tracker-app, utilisez la ligne de commande pour télécharger votre base de code. Consultez cet exemple de code et adaptez-le à votre propre référentiel :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Il y a un dernier point très important dont il faut être conscient. Lorsque nous téléchargeons notre code sur Hetzner, nous ne pourrons plus accéder au backend via localhost, nous devons donc mettre à jour la route API. Il existe une variable appelée const API_URL = 'http://localhost:8000' ; dans deux fichiers en haut d'eux. Les fichiers sont api.ts et composants/AddItemForm.tsx. Remplacez l'URL de l'API variable par celle ci-dessous, puis téléchargez à nouveau votre base de code sur GitHub.
bun add hono prisma @prisma/client
C'est tout ce qu'il y a à dire. Votre base de code devrait maintenant être en ligne sur GitHub afin que nous puissions maintenant travailler sur son déploiement sur Hetzner.
Une fois notre application de suivi de liste de surveillance terminée, il est maintenant temps de déployer notre application sur la plateforme Hetzner VPS. Hetzner est une plateforme payante, mais la polyvalence qu'elle offre est inégalée. Le forfait le moins cher coûte environ 4,51 €/4,88 $/3,76 £ par mois. Cela vaut la peine d'avoir votre serveur en ligne auto-hébergé car, en tant que développeur, vous pouvez l'utiliser pour l'apprentissage, la pratique, les déploiements de production et bien plus encore. Vous pouvez toujours annuler l'abonnement au serveur et le récupérer en cas de besoin.
La plupart des VPS sont essentiellement les mêmes car ce sont tous des serveurs pouvant exécuter différents systèmes d'exploitation, comme Linux. Chaque fournisseur VPS a une interface et une configuration différentes, mais la structure fondamentale est sensiblement la même. En apprenant à auto-héberger une application sur Hetzner, vous pouvez facilement réutiliser ces mêmes compétences et connaissances pour déployer une application sur une autre plateforme VPS.
Certains cas d'utilisation d'un VPS incluent :
Vous pouvez voir à quoi ressemble le prix actuel de Hetzner ici :
Allez sur le site Hetzner et cliquez sur le bouton rouge S'inscrire au milieu de la page. Vous pouvez également cliquer sur le bouton Connexion dans le coin supérieur droit. Vous devriez voir un menu avec des options pour Cloud, Robot, konsoleH et DNS. Cliquez sur l'un d'entre eux pour accéder à la page du formulaire de connexion et d'inscription.
Maintenant, vous devriez voir la page du formulaire de connexion et d'inscription. Cliquez sur le bouton d'inscription pour créer un compte et terminer le processus d'inscription. Vous devrez probablement passer l'étape de vérification en utilisant votre compte PayPal ou en préparant votre passeport.
Vous devriez maintenant pouvoir vous connecter à votre compte et créer et acheter un serveur. Choisissez un emplacement proche de chez vous, puis sélectionnez Ubuntu comme image. Voir cet exemple pour référence.
Sous Type, choisissez vCPU partagé, puis sélectionnez une configuration pour votre serveur. Nous déployons une application simple qui ne nécessite que quelques ressources. Si vous le souhaitez, n'hésitez pas à vous procurer un meilleur serveur, c'est à vous de décider. Un processeur virtuel dédié est plus performant mais coûte plus cher. Vous pouvez également choisir entre des processeurs x86 (Intel/AMD) et Arm64 (Ampère).
La configuration par défaut devrait être acceptable. Voir l'exemple ci-dessous. Pour des raisons de sécurité, il est cependant important d'ajouter une clé SSH.
Les clés SSH offrent un moyen plus sécurisé de s'authentifier sur votre serveur qu'un mot de passe traditionnel. La clé doit être au format OpenSSH, garantissant un haut niveau de sécurité pour votre serveur. En fonction de votre système d'exploitation, vous pouvez effectuer une recherche Google sur « Générer une clé SSH sur Mac » ou « Générer une clé SSH sur Windows ». Je vais vous donner un guide rapide pour générer une clé SSH sur un Mac.
Ouvrez d'abord votre application de terminal, puis tapez la commande suivante en remplaçant "votre_e-mail@exemple.com" par votre adresse e-mail réelle :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
La partie -b 4096 garantit que la clé est de 4096 bits pour une sécurité accrue. Enregistrez ensuite la clé après y avoir été invité. Vous pouvez accepter l'emplacement par défaut ou en choisir un personnalisé :
bun add hono prisma @prisma/client
La définition d'une phrase secrète est facultative, vous pouvez ignorer cette étape. Maintenant, chargez la clé SSH dans votre agent SSH en exécutant les commandes suivantes :
Tout d'abord, démarrez l'agent :
npx prisma init
Ensuite, ajoutez la clé SSH :
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Pour copier votre clé publique SSH dans votre presse-papiers, exécutez :
npx prisma migrate dev --name init
Cela copie la clé publique afin que vous puissiez l'ajouter à Hetzner ou à tout autre service nécessitant une clé SSH. Collez votre clé SSH dans cette zone de formulaire et ajoutez-la.
Vous n'avez pas à vous soucier des volumes, des groupes de placement, des étiquettes ou de la configuration Cloud, car ils sortent du cadre de ce projet. Les sauvegardes peuvent être utiles, mais elles entraîneront un coût supplémentaire et sont donc facultatives pour ce projet. Nous ferons le pare-feu plus tard, vous n'avez donc pas à vous en soucier maintenant. Choisissez un nom pour votre serveur, puis créez et achetez le serveur avec vos paramètres actuels, et votre compte Hetzner sera prêt à fonctionner.
D'accord, bien. Nous avons désormais un compte sur Hetzner. Dans la section suivante, nous allons installer notre pare-feu, configurer notre système d'exploitation Linux et mettre notre application en ligne.
Avant de nous connecter en SSH à notre système d'exploitation Linux, configurons d'abord nos règles de pare-feu. Nous avons besoin du port 22 ouvert pour pouvoir utiliser SSH, ainsi que du port 80, car le port 80 est un port TCP qui est le port réseau par défaut pour les serveurs Web utilisant HTTP (Hypertext Transfer Protocol). Il est utilisé pour communiquer entre les navigateurs Web et les serveurs, en diffusant et en recevant du contenu Web. C'est ainsi que nous faisons fonctionner notre candidature en ligne.
Accédez à Pare-feu dans le menu principal, puis créez un pare-feu avec les règles entrantes indiquées ci-dessous :
Maintenant, avec notre pare-feu fonctionnel, nous pouvons configurer un environnement Linux et déployer notre application, alors faisons-le ensuite.
La connexion à notre serveur Hetzner distant devrait être assez simple car nous avons créé une clé SSH pour nous connecter. Nous pouvons nous connecter à l'aide du terminal ou même d'un éditeur de code comme VS Code, ce qui nous donnera la possibilité de voir et de parcourir nos fichiers beaucoup plus facilement sans avoir à utiliser la ligne de commande. Si vous souhaitez utiliser l'extension Visual Studio Code Remote - SSH, vous pouvez le faire. Pour ce projet, nous nous en tiendrons au terminal.
Ouvrez votre terminal et tapez cette commande SSH pour vous connecter à votre serveur distant. Remplacez l'adresse 11.11.111.111 par votre adresse IP Hetzner réelle, que vous pouvez trouver dans la section serveurs :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Vous devriez maintenant être connecté à votre serveur, qui affiche l'écran de bienvenue et d'autres informations privées comme votre adresse IP. Je montre juste la partie de bienvenue de l'écran ici :
bun add hono prisma @prisma/client
D'accord, super. Maintenant, nous pouvons enfin commencer à exécuter certaines commandes qui configureront notre environnement de développement avant de mettre notre application en ligne. D'ailleurs, si vous souhaitez quitter et fermer la connexion SSH à votre serveur, vous pouvez soit taper exit suivi d'un clic sur le bouton Entrée, soit utiliser le raccourci clavier Ctrl D.
La première chose que nous devons faire est de mettre à jour et de mettre à niveau les packages sur notre système Linux. Nous pouvons le faire avec une seule commande, alors tapez cette commande dans le terminal et appuyez sur Entrée :
npx prisma init
Maintenant, nous devons installer le reste de nos packages de développement et dépendances. Le premier est Node.js et npm, alors installez-les avec cette commande :
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Vient ensuite Nginx, que nous devrons utiliser comme proxy inverse. Un proxy inverse est un serveur situé entre les clients et les serveurs back-end, transmettant les requêtes des clients au serveur back-end approprié, puis renvoyant la réponse du serveur au client. Il agit comme intermédiaire, gérant et acheminant les demandes entrantes pour améliorer les performances, la sécurité et l'évolutivité. Alors installez-le avec cette commande :
npx prisma migrate dev --name init
Nous aurons besoin de Git, pour lequel nous devons extraire notre code de GitHub et le télécharger sur notre serveur distant. Alors installez-le avec cette commande :
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Le runtime Bun sera utile pour exécuter nos applications. Tout d’abord, nous devons installer le package de décompression comme requis avant d’installer Bun. Ensuite, nous pouvons installer Bun. Voici les commandes dont nous avons besoin :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
bun add hono prisma @prisma/client
Pour exécuter à la fois le frontend et le serveur backend React sur le même serveur Hetzner, nous devons gérer les deux services simultanément. Cela implique généralement la configuration d'un gestionnaire de processus tel que PM2 pour exécuter le serveur backend et l'utilisation de Nginx comme proxy inverse pour gérer les demandes entrantes vers le front-end et le back-end.
Installez PM2 en utilisant cette commande ici :
npx prisma init
Bien, cela s'occupe de la configuration de notre environnement Linux. Dans la section suivante, nous téléchargerons notre base de code depuis GitHub sur notre serveur distant et configurerons notre serveur Nginx pour que notre application fonctionne en ligne.
Je vais supposer que vous savez déjà comment naviguer dans la ligne de commande. Sinon, vous pouvez le rechercher sur Google. Nous allons changer de répertoire et gérer les fichiers. Commencez par cloner le dépôt GitHub avec votre projet et copiez-le sur le serveur distant. Utilisez la commande ci-dessous pour référence :
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Nos fichiers d'application Web seront stockés dans /var/www. Vous pouvez voir tous les fichiers sur votre système d'exploitation Linux en utilisant les commandes ls qui sont utilisées pour lister les fichiers et pwd qui sont utilisées pour imprimer le répertoire de travail. Pour en savoir plus sur la ligne de commande Linux, jetez un œil à ce tutoriel pour La ligne de commande Linux pour les débutants.
Alors maintenant que nous avons notre application sur notre serveur distant, nous pouvons créer une version de production du backend et du frontend. Pour ce faire, il nous suffit d'accéder à la racine du dossier backend et client à l'intérieur de notre projet watchlist-tracker-app et d'exécuter les commandes ci-dessous :
npx prisma migrate dev --name init
Nous utilisons Bun comme environnement d'exécution, nous utiliserons donc les commandes bun pour les étapes d'installation et de construction.
Très bien, configurons maintenant notre serveur Nginx. Nous utiliserons l'éditeur de terminal nano pour écrire le code à l'intérieur du fichier. Exécutez cette commande dans le terminal pour ouvrir un fichier Nginx pour notre application de suivi de liste de surveillance :
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Si vous n'êtes pas familier avec l'éditeur de code nano, consultez cette aide-mémoire.
Il vous suffit de copier et coller cette configuration dans le fichier et de l'enregistrer. Assurez-vous de remplacer l'adresse IP server_name par votre propre adresse IP Hetzner :
"scripts": {
"start": "bun run src/server.ts",
"build": "bun build src/server.ts --outdir ./dist --target node"
},
Nginx est très souvent utilisé pour jouer le rôle de serveur proxy inverse. Un proxy inverse se situe entre le navigateur client de votre utilisateur et votre serveur backend. Il reçoit les requêtes du client et les transmet à un ou plusieurs serveurs backend. Une fois que le backend traite la demande, le proxy inverse transmet la réponse au client. Dans une telle configuration, Nginx serait le point d'entrée du trafic entrant et acheminerait les demandes vers des services spécifiques, par exemple le frontend Vite ou le backend API.
Les versions préliminaires de production de Vite s'exécutent sur le port 4173 et notre serveur backend s'exécute sur le port 8000. Si vous modifiez ces valeurs, assurez-vous de les mettre également à jour dans ce fichier de configuration Nginx ; sinon, les serveurs ne fonctionneront pas.
Activez le site Nginx s'il n'est pas déjà activé avec cette commande :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Testez maintenant la configuration de Nginx pour vous assurer qu'il n'y a pas d'erreurs de syntaxe et redémarrez Nginx pour appliquer les modifications avec ces commandes :
bun add hono prisma @prisma/client
Nous avons presque terminé. Il ne reste plus qu'un pas. Si vous accédez maintenant à votre adresse IP Hetzner dans un navigateur, vous devriez voir une erreur telle que 502 Bad Gateway. C'est parce que nous n'avons pas encore de serveur en cours d'exécution ; tout d’abord, nous devons exécuter les deux serveurs simultanément à l’aide de PM2. Nous devons donc configurer PM2 pour qu'il démarre au démarrage du système afin que notre application soit toujours en ligne. Faites-le en exécutant ces commandes dans le terminal :
npx prisma init
Maintenant, nous devons faire fonctionner les serveurs backend et frontend. Exécutez ces commandes depuis la racine de leurs dossiers.
Commençons par le serveur backend, alors exécutez cette commande dans le terminal :
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Enfin, lançons le serveur frontal client, alors exécutez cette commande dans le terminal :
npx prisma migrate dev --name init
Vous pouvez exécuter la commande pm2 status pour vérifier si les deux serveurs sont en ligne et en cours d'exécution, comme indiqué ci-dessous. Pour en savoir plus sur toutes les autres commandes PM2, lisez la documentation sur le démarrage rapide de PM2 Process Management :
Vous pouvez tester si les serveurs sont accessibles en exécutant ces commandes curl dans le terminal. Vous devriez récupérer le code HTML s'ils fonctionnent :
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Accédez à l'adresse IP de votre serveur Hetzner. Si vous avez tout fait correctement, vous devriez voir votre application déployée et en ligne ! Les sites Web ont généralement des noms de domaine et l'adresse IP reste masquée dans la barre de recherche. Il est assez courant que les développeurs achètent des domaines, puis modifient les serveurs de noms pour les connecter au serveur d'un hôte. Cela dépasse le cadre de ce didacticiel, mais vous pouvez facilement apprendre comment procéder en effectuant une recherche sur Google. Namecheap est mon registre de domaine préféré.
C'est vrai, nous sommes très proches de l'achèvement. Désormais, la dernière étape consiste à utiliser DeployHQ pour rationaliser le processus de déploiement. DeployHQ facilite les déploiements et est bien meilleur pour des raisons de sécurité. La manière traditionnelle de mettre à jour une base de code sur un serveur en ligne consiste à utiliser git pull pour obtenir les dernières modifications de votre dépôt GitHub. Cependant, faire git pull n'est pas une bonne pratique car cela pourrait exposer les dossiers git, et le site Web ne sera probablement pas minifié, laid, etc.
DeployHQ joue ici un rôle crucial. Il copie en toute sécurité les fichiers modifiés dans le dossier configuré, garantissant qu'aucune modification n'est visible dans les journaux git sur votre serveur. Cela peut sembler un compromis, mais c'est une fonctionnalité de sécurité qui vous rassure sur la sécurité de votre déploiement. Si vous êtes familier avec des plateformes comme Vercel ou Netlify, vous trouverez ces déploiements automatiques assez similaires. Dans ce cas, vous disposez d'une configuration qui peut fonctionner avec n'importe quel serveur en ligne sur un VPS.
Une chose qui mérite d'être mentionnée est qu'il est important que nous créions un utilisateur non root pour notre serveur distant Linux en ligne. Se connecter en tant qu'utilisateur root n'est pas toujours la meilleure pratique ; il est préférable d'avoir un autre utilisateur configuré avec des privilèges similaires. DeployHQ déconseille également d'utiliser l'utilisateur root pour la connexion. Pour que DeployHQ fonctionne, nous devons utiliser SSH pour nous connecter à notre compte. Nous le ferons après avoir créé un compte DeployHQ, car nous devons placer notre clé publique DeployHQ SSH sur notre serveur Ubuntu en ligne.
DeployHQ vous donne un accès gratuit à toutes leurs fonctionnalités pendant 10 jours sans engagement lors de votre première inscription. Ensuite, votre compte reviendra à un forfait gratuit qui vous permettra de déployer un seul projet jusqu'à 5 fois par jour.
Commencez par accéder au site Web DeployHQ et créez un compte en cliquant sur l'un des boutons que vous voyez ci-dessous :
Ok, vous devriez maintenant voir l'écran de bienvenue sur DeployHQ avec un bouton Créer un projet. Cliquez sur le bouton pour créer un projet comme indiqué ici :
Sur l'écran suivant, vous devez créer un nouveau projet. Veuillez donc lui donner un nom et sélectionner votre dépôt GitHub. Choisissez également une zone pour votre projet puis créez un projet :
Vous devriez maintenant voir l'écran du serveur, comme indiqué ci-dessous. Cela signifie qu'il est temps de créer un autre utilisateur Linux pour notre serveur distant afin que nous n'ayons pas à compter sur l'utilisateur root.
Commencez par vous connecter à votre serveur en tant qu'utilisateur root, puis créez un nouvel utilisateur avec cette commande ci-dessous. Remplacez new_username par un nom d'utilisateur que vous souhaitez utiliser pour le nouvel utilisateur :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Il vous sera demandé de définir un mot de passe et des informations vous seront demandées pour saisir des détails tels que votre nom complet, votre numéro de chambre, etc. Il vous suffit de définir un mot de passe. Vous pouvez ignorer les autres étapes de l'invite et les laisser vides en appuyant sur Entrée jusqu'à ce qu'elles soient toutes parties.
C'est également une bonne idée d'ajouter le nouvel utilisateur au groupe sudo afin qu'il puisse disposer de privilèges administratifs comme l'utilisateur root. Faites cela avec la commande affichée ici :
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Le nouvel utilisateur a maintenant besoin d'un accès SSH pour le serveur. Basculez d’abord vers le nouvel utilisateur, puis créez le répertoire .ssh pour lui avec ces commandes :
bun add hono prisma @prisma/client
Maintenant, nous devons ajouter notre clé publique locale aux clés_autorisées sur le serveur afin que sur votre machine locale, copiez votre clé publique avec cette commande :
npx prisma init
Maintenant, sur le serveur, ouvrez le fichierauthorized_keys pour qu'il puisse être modifié avec l'éditeur nano :
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Collez la clé publique copiée dans ce fichier. Avant d'enregistrer le fichier, copiez et collez la clé SSH DeployHQ de la page du serveur dans le même fichier. Vous pouvez voir la clé SSH lorsque vous cochez la case Utiliser la clé SSH plutôt que le mot de passe pour l'authentification ?. Enregistrez maintenant le fichier et définissez les autorisations correctes pour le fichier avec cette commande :
npx prisma migrate dev --name init
Vous pouvez maintenant tester la connexion SSH pour le nouvel utilisateur. Tout d’abord, déconnectez-vous du serveur distant, puis essayez de vous reconnecter, mais cette fois en utilisant le nouvel utilisateur que vous avez créé et non root. Voir l'exemple ci-dessous :
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
En supposant que vous avez tout fait correctement, vous devriez maintenant pouvoir vous connecter avec votre nouvel utilisateur.
Maintenant, nous pouvons enfin remplir le formulaire du serveur. Remplissez le formulaire avec vos informations voir cet exemple ci-dessous :
Nom : watchlist-tracker-app
Protocole : SSH/SFTP
Nom d'hôte : 11.11.111.111
Port : 22
Nom d'utilisateur : nouveau_nom d'utilisateur
Utiliser la clé SSH plutôt que le mot de passe pour l'authentification ? : coché
Chemin de déploiement : /var/www/watchlist-tracker-app
Le chemin de déploiement doit être l'emplacement sur votre serveur où se trouve votre dépôt GitHub. Vous pouvez maintenant créer un serveur. Si vous rencontrez des problèmes, cela peut être dû aux paramètres de votre pare-feu, alors lisez la documentation sur Quelles adresses IP dois-je autoriser via mon pare-feu ?.
Vous devriez maintenant voir l'écran Nouveau déploiement comme indiqué ici :
Après un déploiement réussi, cet écran devrait s'afficher :
La dernière étape consiste à configurer des déploiements automatiques afin que lorsque vous transférez les modifications de votre référentiel local vers GitHub, elles soient automatiquement déployées sur votre serveur distant. Vous pouvez le faire à partir de la page Déploiements automatiques, située dans la barre latérale gauche de votre compte DeployHQ. Voir l'exemple ici :
Nous avons tous terminé ; félicitations, vous avez appris à créer une application React full-stack, à déployer la base de code sur GitHub, à héberger l'application sur un VPS exécutant Linux Ubuntu et à configurer des déploiements automatiques avec DeployHQ. Votre jeu de développeur a progressé !
Il est efficace et agréable de créer une application CRUD full-stack comme Watchlist Tracker avec des outils et des technologies modernes. Nous avons utilisé une pile technologique assez solide : Bun, Hono, Prisma ORM et SQLite sur le back-end, tandis que Vite, Tailwind CSS et TanStack Router sur le front-end contribuent à le rendre réactif et fonctionnel. Hetzner veillera à ce que l'application soit fiable et performante, peu importe où se trouvent les utilisateurs.
Le déploiement par DeployHQ rend le déploiement assez simple. Il vous suffit de transférer les mises à jour directement de votre référentiel Git vers le serveur cloud. Toutes les modifications que vous apportez à votre référentiel seront automatiquement déployées sur votre serveur de production afin que la dernière version de votre application soit disponible. Cela permet de gagner du temps car les déploiements automatisés réduisent le nombre d'erreurs liées au déploiement. Cela vaut donc la peine de l'ajouter à toute forme de flux de travail de développement.
Ce tutoriel devrait vous aider à déployer toutes sortes d'applications en production à l'aide d'un VPS comme Hetzner avec des déploiements git automatiques grâce à DeployHQ.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment résoudre le problème de la non-suppression de fichiers sur l'ordinateur
vcruntime140.dll est introuvable et l'exécution du code ne peut pas continuer
Comment utiliser le stockage cloud
Comment verrouiller l'écran sur oppo11
Le câble réseau est débranché
Tutoriel sur l'ajustement de l'espacement des lignes dans les documents Word
utilisation de la fonction de rééchantillonnage
Plateforme de trading quantitatif de devises numériques
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
