Cadres JavaScript
Vous trouverez ci-dessous des exemples de configuration d’applications utilisant des frameworks JavaScript à déployer sur les services d’hébergement d’applications de Kinsta à partir d’un dépôt GitHub. Cela inclut :
Nous avons également des exemples d’applications Node.js.
Pré-requis
- Les modèles de démarrage rapide de Kinsta sont stockés et gérés dans GitHub ; par conséquent, vous avez besoin d’un compte GitHub pour y accéder.
- Vous devez créer un compte MyKinsta pour déployer l’application.
Astro SSR
Voici un exemple de configuration d’un site Astro avec rendu côté serveur (SSR) sur les services d’hébergement d’applications de Kinsta à partir d’un dépôt GitHub.
Par défaut, Astro est un constructeur de sites statiques qui se concentre sur les sites web riches en contenu pour offrir des temps de chargement plus rapides avec moins de JavaScript. L’activation de SSR dans Astro permet d’ajouter à votre site des fonctionnalités dynamiques telles que des sessions pour la connexion, la connexion à une base de données, etc. Vous trouverez de plus amples informations sur le site web d’Astro.
- Connectez-vous à GitHub et créez un nouveau dépôt à partir de ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – SSR Site With Astro.
- Dans MyKinsta, cliquez sur Applications > Ajouter une application > sélectionnez GitHub, cliquez sur Connecter le fournisseur git > Autoriser, et connectez-vous à votre compte GitHub.
- Choisissez le dépôt Hello World Astro SSR et l’emplacement du centre de données. Laissez tous les autres paramètres par défaut et cliquez sur Continuer à chaque étape.
- Dans l’étape Résumé, cliquez sur Déployer maintenant.
Pendant le déploiement, Kinsta détecte automatiquement la commande de démarrage pour le processus web et installe les dépendances définies dans votre fichier package.json. L’application est disponible dès que le déploiement est terminé, et la page d’accueil Kinsta se charge à l’URL de votre application.
Vous préférez regarder la version vidéo ?
Configuration du serveur web
Port
Kinsta définit automatiquement la variable d’environnement PORT. Vous ne devez pas la définir vous-même ou la coder en dur dans l’application.
Commande de démarrage
Lorsque vous déployez l’application, Kinsta crée automatiquement un processus web avec npm start comme commande de démarrage. Assurez-vous d’utiliser cette commande pour lancer votre serveur.
Cycle de vie du déploiement
Chaque fois qu’un déploiement est initié (par la création d’une application ou par un redéploiement dû à un commit entrant), la commande npm build est exécutée, suivie de la commande npm start.
Deno
Voici un exemple de configuration d’une application Deno à déployer sur les services d’hébergement d’applications de Kinsta à partir d’un dépôt GitHub.
Deno est un moteur d’exécution JavaScript, TypeScript et WebAssembly qui vous permet d’exécuter du code en dehors d’un navigateur web et de créer des applications sécurisées côté serveur. Vous trouverez plus d’informations sur le site web de Deno.
- Connectez-vous à GitHub et créez un nouveau dépôt à partir de ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – Deno.
- Dans MyKinsta, cliquez sur Applications > Ajouter une application > sélectionnez GitHub, cliquez sur Connecter le fournisseur git > Autoriser, et connectez-vous à votre compte GitHub.
- Choisissez le dépôt Hello World – Deno et l’emplacement du centre de données. Laissez tous les autres réglages par défaut et cliquez sur Continuer à chaque étape.
- Dans l’étape Résumé, cliquez sur Déployer maintenant.
Pendant le déploiement, Kinsta détecte automatiquement la commande de démarrage pour le processus web et installe les dépendances définies dans votre fichier package.json. L’application est disponible dès que le déploiement est terminé, et une page Hello World se charge à l’URL de votre application.
Configuration du serveur web
Port
Kinsta définit automatiquement la variable d’environnement PORT. Vous n’avez pas besoin de la définir ou de la coder en dur dans l’application.
Commande de démarrage
Lorsque vous déployez l’application, Kinsta crée automatiquement un processus web avec npm start comme commande de démarrage.
Cycle de vie du déploiement
Chaque fois qu’un déploiement est initié (par la création d’une application ou par un redéploiement dû à un commit entrant), la commande npm build command est exécutée, suivie de la commande npm start.
Next.js avec Prisma ORM
Voici un exemple de configuration d’une application Next.js et Prisma à déployer sur les services d’hébergement d’applications et de bases de données de Kinsta à partir d’un dépôt GitHub.
Prisma est une boîte à outils de base de données open source qui simplifie l’accès aux bases de données pour les développeurs en fournissant une API intuitive et sécurisée. Il prend en charge plusieurs bases de données et génère des requêtes SQL efficaces et optimisées pour des performances accrues. Vous trouverez de plus amples informations sur le site prisma.io.
Cette application nécessite une base de données PostgreSQL pour fonctionner.
- Dans MyKinsta, cliquez sur Bases de données > Ajouter une base de données > entrez un nom > dans Type de base de données, sélectionnez PostgreSQL, choisissez l’emplacement et la taille ducentre de données, et cliquez sur Continuer > Créer une base de données.
- Connectez-vous à GitHub et créez un nouveau dépôt à partir de ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – Prisma.
- Dans MyKinsta, cliquez sur Applications > Ajouter une application > sélectionnez GitHub, cliquez sur Connecter le fournisseur git > Autoriser, et connectez-vous à votre compte GitHub.
- Choisissez le dépôt Hello World – Prisma et le même emplacement de centre de données que votre base de données. Laissez tous les autres réglages par défaut et cliquez sur Continuer à chaque étape.
- À l’étape Résumé, cliquez sur Déployer maintenant.
- Une fois que la base de données est prête pour les connexions (une coche verte est affichée à côté), vous devez ajouter la connexion interne entre votre application et la base de données. Cliquez sur Applications > nom de l’application > Réglages > Ajouter une connexion.
- Sélectionnez votre base de données > sélectionnez Ajouter des variables d’environnement… > sélectionnez Ajouter des variables d’environnement à l’application > cliquez sur Ajouter une connexion.
- Allez sur la page Déploiement de l’application et cliquez sur Déployer maintenant > Déployer l’application.
Pendant le déploiement, Kinsta détecte automatiquement la commande de démarrage pour le processus web et installe les dépendances définies dans votre fichier package.json. L’application est disponible dès que le déploiement est terminé, et la page d’accueil Kinsta se charge à l’URL de votre application.
Configuration du serveur web
Port
Kinsta définit automatiquement la variable d’environnement PORT. Vous ne devez pas la définir vous-même, ni la coder en dur dans l’application.
Commande de démarrage
Kinsta crée automatiquement un processus web lors du déploiement d’une application avec npm start comme commande de démarrage. Assurez-vous d’utiliser cette commande pour lancer votre serveur.
Cycle de vie du déploiement
Chaque fois qu’un déploiement est initié (par la création d’une application ou un redéploiement dû à un commit entrant), la commande npm build est exécutée, suivie de la commande npm start.
React
Voici un exemple de configuration d’une application React à déployer sur les services d’hébergement d’applications de Kinsta à partir d’un dépôt GitHub.
React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur. Elle permet aux développeurs de créer des composants d’interface utilisateur réutilisables et de mettre à jour efficacement l’interface utilisateur en réponse aux changements de données. Vous trouverez de plus amples informations sur le site web de React.
- Connectez-vous à GitHub et créez un nouveau dépôt à partir de ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – React.
- Dans MyKinsta, cliquez sur Applications > Ajouter une application > sélectionnez GitHub, cliquez sur Connecter le fournisseur git > Autoriser, et connectez-vous à votre compte GitHub.
- Choisissez le dépôt Hello World – React et l’emplacement du centre de données. Laissez tous les autres réglages par défaut et cliquez sur Continuer à chaque étape.
- À l’étape Résumé, cliquez sur Déployer maintenant.
Pendant le déploiement, Kinsta détecte automatiquement la commande de démarrage pour le processus web et installe les dépendances définies dans votre fichier package.json. L’application est disponible dès que le déploiement est terminé, et la page d’accueil Kinsta se charge à l’URL de votre application.
Configuration du serveur web
Port
Kinsta définit automatiquement la variable d’environnement PORT. Vous ne devez pas la définir vous-même, ni la coder en dur dans l’application.
Commande de démarrage
Kinsta crée automatiquement un processus web basé sur la commande npm start dans le fichier package.json lors du déploiement d’une application.
Cycle de vie du déploiement
Chaque fois qu’un déploiement est initié (par la création d’une application ou le redéploiement en raison d’un commit entrant), les commandes npm start et npm build sont exécutées.
React avec Vite
Voici un exemple de la façon de configurer une application React avec Vite pour la déployer sur les services d’hébergement d’applications de Kinsta à partir d’un dépôt GitHub.
Vite est un outil qui vous aide à créer des applications décentralisées ; il fournit des outils de développement et des API pour simplifier le processus de développement et prend en charge plusieurs langages de programmation. Vous trouverez de plus amples informations sur le site web de Vite.
React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur. Elle permet aux développeurs de créer des composants d’interface utilisateur réutilisables et de mettre à jour efficacement l’interface utilisateur en réponse aux changements de données. Vous trouverez de plus amples informations sur le site web de React.
- Connectez-vous à GitHub et créez un nouveau dépôt à partir de ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – Vite + React.
- Dans MyKinsta, cliquez sur Applications > Ajouter une application > sélectionnez GitHub, cliquez sur Connecter le fournisseur git > Autoriser, et connectez-vous à votre compte GitHub.
- Choisissez le dépôt Hello World – Vite + React et l’emplacement du centre de données. Laissez tous les autres réglages par défaut et cliquez sur Continuer à chaque étape.
- À l’étape Résumé, cliquez sur Déployer maintenant.
Pendant le déploiement, Kinsta détecte automatiquement la commande de démarrage pour le processus web et installe les dépendances définies dans votre fichier package.json. L’application est disponible dès que le déploiement est terminé, et la page d’accueil Kinsta se charge à l’URL de votre application.
Configuration du serveur web
Port
Kinsta définit automatiquement la variable d’environnement PORT. Vous ne devez pas la définir vous-même, ni la coder en dur dans l’application.
Commande de démarrage
Kinsta crée automatiquement un processus web basé sur la commande npm start dans le fichier package.json lors du déploiement d’une application.
Cycle de vie du déploiement
Chaque fois qu’un déploiement est initié (par la création d’une application ou par un redéploiement dû à un commit entrant), les commandes npm install et npm build sont exécutées.