Voici un exemple de la façon de configurer une application React ou un site statique à déployer sur les services d’hébergement d’applications ou de sites statiques de Kinsta depuis un dépot 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.

Kinsta installe automatiquement les dépendances définies dans votre fichier package.json pendant le processus de déploiement.

Hébergement de sites statiques

  1. Connectez-vous à GitHub et créez un nouveau dépôt depuis ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – React.
  2. Dans MyKinsta, ajoutez un site statique avec le dépôt Hello World – React et les réglages de construction suivants :
    • Commande de construction : npm run build
    • Version de Node : 18.16.0
    • Répertoire de publication : construction
  3. Le site est disponible dès que la construction se termine, et la page de bienvenue de Kinsta se charge sur l’URL de votre site.

Hébergement d’application

  1. 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.
  2. Dans MyKinsta, ajoutez une application avec le dépôt Hello World – React. La commande Start peut être laissée vide pour le processus web car Kinsta détecte automatiquement la commande requise lors du premier déploiement.
  3. L’application est disponible dès la fin de la construction, et la page bienvenue de Kinsta se charge sur 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 start et npm build sont exécutées.

Page de bienvenue

L’application ou le site est disponible dès la fin de la construction, et la page bienvenue de Kinsta se charge sur l’URL de votre application ou de votre site statique.

Page de bienvenue Kinsta après le déploiement réussi de React.
Page de bienvenue Kinsta après le déploiement réussi de React.