Comment héberger tes projets JAVASCRIPT sur un serveur VPS | Docker, CI / CD, Github Actions, Caddy
1.5 هزار بار بازدید -
6 ماه پیش
-
Profitez de -10% aux VPS
Profitez de -10% aux VPS Hostinger grâce à notre lien affilié : https://www.hostinger.fr/algomax (12 mois d'engagement min) ou utilisez le code promo ALGOMAX
Dans ce guide, tu vas découvrir comment héberger n'importe quel application Javascript sur un serveur VPS. Nous allons créer un nouveau projet Javascript (en Remix), puis nous le transformons en image Docker (avec un Dockerfile). Ensuite, nous hébergons cette image Docker sur la plateforme DockerHub (qui permet de sauvegarder toutes nos images Docker).
Ensuite nous configurons un serveur VPS chez AWS Lightsail (gratuit pendant 3 mois). Nous configurons ce serveur VPS en nous connectant en SSH à l'invité de commande. On installe toutes les dépendances, ainsi que Docker et Caddy Server.
Caddy Server permet de configurer le routing de notre serveur (rediriger les requêtes entrantes, par exemple le nom de domaine X vers le projet Y tournant sur le port Z).
Ensuite, nous effectuons un Docker pull de l'image hébergée, pour démarrer le projet sur le serveur. Nous faisons toutes ces étapes à la main, en expliquant à quoi elles servent.
Puis nous configurons les Github Action, le puissant système d'automatisation de Github afin de mettre en place l'intégration continue (CI) et déploiement continu (CD).
À chaque Pull Request ou à chaque Push sur nos branches main et dev, nous exécutons Typescript et Eslint pour vérifier que notre projet ne possède aucune erreur.
Ensuite, nous générons une image Docker automatiquement, pour plusieurs environnement (staging et production) en fonction de la branche concernée (main et dev). Cette image est ensuite hébergée sur DockerHub.
La dernière action Github va télécharger la dernière image Docker hébergée, en fonction du bon environnement, et va ensuite lancer le projet sur le serveur
Lien vers le repo 👉 https://github.com/varkoff/deployed-r...
00:00:00 Introduction
00:02:32 Création d'un projet Remix
00:05:28 Création d'un repository Github
00:06:51 Dockerfile (configurer l'image)
00:10:07 Docker Build (build l'image)
00:11:52 Docker Run (démarrer le projet)
00:12:54 Héberger l'image sur DockerHub
00:15:22 Configurer le serveur VPS
00:19:03 Connexion serveur en SSH
00:21:11 Installer Caddy Server
00:23:05 Installer Docker sur le serveur
00:26:15 platform amr64 ou amd64
00:29:35 Configurer Caddy Server
00:32:35 Docker Compose
00:35:36 Github Actions
00:43:55 Accès DockerHub
00:45:30 Ajout de secrets Github
00:50:10 On teste l'intégration continue
00:55:28 Configurer le Runner github
01:01:20 Ouvrir les ports du serveur AWS
01:02:52 Mise en production
01:10:48 Conclusion
--- Autres contenus
Développe 2X plus vite avec cette stack Remix Développe 2X plus VITE ! Remix, NestJ...
BiomeJS, l'outil qui optimise ton code Cet outil AMÉLIORE la qualité de ton ...
--- Contenu Remix
Comment héberger des fichiers avec Remix ? Comment héberger des fichiers avec Re...
Comment valider un formulaire full-typesafe ? Valide ton formulaire avec Remix, Zod...
Comment fonctionne le routing ? Routing avec le framework Remix : Gui...
Stack utilisée :
- Hostinger https://www.hostinger.fr/algomax
- Docker https://www.docker.com/
- Caddy Server https://caddyserver.com/
- AWS Lightsail https://aws.amazon.com/fr/lightsail/
- Github https://github.com/home
- Github Actions https://github.com/features/actions
- Remix https://remix.run
Contenus exclusifs : https://dub.sh/algomax
Newsletter : https://algomax.fr/newsletter
--- Nos réseaux
Twitter : https://link.algomax.fr/twitter
LinkedIn : https://link.algomax.fr/linkedin
YouTube : https://link.algomax.fr/youtube
Instagram : https://link.algomax.fr/insta
Facebook : https://link.algomax.fr/fb
Dans ce guide, tu vas découvrir comment héberger n'importe quel application Javascript sur un serveur VPS. Nous allons créer un nouveau projet Javascript (en Remix), puis nous le transformons en image Docker (avec un Dockerfile). Ensuite, nous hébergons cette image Docker sur la plateforme DockerHub (qui permet de sauvegarder toutes nos images Docker).
Ensuite nous configurons un serveur VPS chez AWS Lightsail (gratuit pendant 3 mois). Nous configurons ce serveur VPS en nous connectant en SSH à l'invité de commande. On installe toutes les dépendances, ainsi que Docker et Caddy Server.
Caddy Server permet de configurer le routing de notre serveur (rediriger les requêtes entrantes, par exemple le nom de domaine X vers le projet Y tournant sur le port Z).
Ensuite, nous effectuons un Docker pull de l'image hébergée, pour démarrer le projet sur le serveur. Nous faisons toutes ces étapes à la main, en expliquant à quoi elles servent.
Puis nous configurons les Github Action, le puissant système d'automatisation de Github afin de mettre en place l'intégration continue (CI) et déploiement continu (CD).
À chaque Pull Request ou à chaque Push sur nos branches main et dev, nous exécutons Typescript et Eslint pour vérifier que notre projet ne possède aucune erreur.
Ensuite, nous générons une image Docker automatiquement, pour plusieurs environnement (staging et production) en fonction de la branche concernée (main et dev). Cette image est ensuite hébergée sur DockerHub.
La dernière action Github va télécharger la dernière image Docker hébergée, en fonction du bon environnement, et va ensuite lancer le projet sur le serveur
Lien vers le repo 👉 https://github.com/varkoff/deployed-r...
00:00:00 Introduction
00:02:32 Création d'un projet Remix
00:05:28 Création d'un repository Github
00:06:51 Dockerfile (configurer l'image)
00:10:07 Docker Build (build l'image)
00:11:52 Docker Run (démarrer le projet)
00:12:54 Héberger l'image sur DockerHub
00:15:22 Configurer le serveur VPS
00:19:03 Connexion serveur en SSH
00:21:11 Installer Caddy Server
00:23:05 Installer Docker sur le serveur
00:26:15 platform amr64 ou amd64
00:29:35 Configurer Caddy Server
00:32:35 Docker Compose
00:35:36 Github Actions
00:43:55 Accès DockerHub
00:45:30 Ajout de secrets Github
00:50:10 On teste l'intégration continue
00:55:28 Configurer le Runner github
01:01:20 Ouvrir les ports du serveur AWS
01:02:52 Mise en production
01:10:48 Conclusion
--- Autres contenus
Développe 2X plus vite avec cette stack Remix Développe 2X plus VITE ! Remix, NestJ...
BiomeJS, l'outil qui optimise ton code Cet outil AMÉLIORE la qualité de ton ...
--- Contenu Remix
Comment héberger des fichiers avec Remix ? Comment héberger des fichiers avec Re...
Comment valider un formulaire full-typesafe ? Valide ton formulaire avec Remix, Zod...
Comment fonctionne le routing ? Routing avec le framework Remix : Gui...
Stack utilisée :
- Hostinger https://www.hostinger.fr/algomax
- Docker https://www.docker.com/
- Caddy Server https://caddyserver.com/
- AWS Lightsail https://aws.amazon.com/fr/lightsail/
- Github https://github.com/home
- Github Actions https://github.com/features/actions
- Remix https://remix.run
Contenus exclusifs : https://dub.sh/algomax
Newsletter : https://algomax.fr/newsletter
--- Nos réseaux
Twitter : https://link.algomax.fr/twitter
LinkedIn : https://link.algomax.fr/linkedin
YouTube : https://link.algomax.fr/youtube
Instagram : https://link.algomax.fr/insta
Facebook : https://link.algomax.fr/fb
6 ماه پیش
در تاریخ 1402/12/10 منتشر شده
است.
1,568
بـار بازدید شده