Comment déployer une application React sur la plateforme App de DigitalOcean

Tutoriels
JavaScript React

L’auteur a sélectionné Creative Commons pour recevoir un don dans le cadre du programme Write for DOnations.

Note : Ce tutoriel montre comment déployer des actifs statiques et des sites en utilisant React et la plateforme App. Si vous cherchez à déployer une application React avec du code back-end dynamique, consultez l’exemple de l’échantillon React de la plateforme App dans la documentation officielle.

Introduction

La plateforme App de DigitalOcean est un produit Plateforme en tant que service (PaaS) qui vous permet de configurer et de déployer des applications à partir d’un référentiel source. Après avoir configuré votre application, DigitalOcean construira et déploiera l’application à chaque modification, vous offrant ainsi les avantages d’un serveur web complet et d’un pipeline de déploiement avec une configuration minimale. Cela peut être un moyen rapide et efficace de déployer vos applications React, et si vous utilisez React pour construire un site sans backend, vous pouvez utiliser le niveau gratuit de la plateforme App.

Dans ce tutoriel, vous déploierez une application React sur la plateforme App de DigitalOcean en utilisant le niveau gratuit Starter. Vous construirez une application avec Create React App, pousserez le code vers un dépôt GitHub, puis configurerez l’application en tant qu’application DigitalOcean. Vous connecterez l’application à votre code source et déploierez le projet sous forme de fichiers statiques.

À la fin de ce tutoriel, vous pourrez configurer une application React pour un déploiement automatique à chaque push sur la branche principale d’un dépôt GitHub.

Prérequis

Étape 1 — Créer un projet React

Dans cette étape, vous allez créer une application React en utilisant Create React App et construire une version déployable de celle-ci.

Pour commencer, créez une nouvelle application en utilisant Create React App sur votre machine locale. Dans un terminal, exécutez la commande pour construire une application appelée digital-ocean-app:

  1. npx create-react-app digital-ocean-app

La commande npx exécutera un paquet Node sans le télécharger sur votre machine. Le script create-react-app installera toutes les dépendances et construira un projet de base dans le répertoire digital-ocean-app. Pour en savoir plus sur Create React App, consultez le tutoriel Comment configurer un projet React avec Create React App.

Le code téléchargera les dépendances et créera un projet de base. Cela peut prendre quelques minutes pour terminer. Lorsque c’est terminé, vous recevrez un message de succès. Votre version peut être légèrement différente si vous utilisez yarn au lieu de npm:

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

Maintenant que vous avez un projet de base, exécutez-le localement pour tester comment le projet apparaîtra sur le serveur. Tout d’abord, changez de répertoire:

  1. cd digital-ocean-app

Exécutez le projet en utilisant le script npm start:

  1. npm start

Lorsque la commande s’exécute, vous recevrez une sortie avec l’URL du serveur de développement local:

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

Ouvrez un navigateur sur http://localhost:3000 et vous trouverez votre projet:

Arrêtez le projet en tapant soit CTRL+C soit ⌘+C dans le terminal.

Maintenant que vous avez une application React fonctionnelle, vous pouvez pousser le code vers un dépôt GitHub.

Étape 2 — Pousser le Code vers GitHub

Pour déployer votre application, la plateforme App récupère votre code source à partir d’un référentiel de code hébergé. À cette étape, vous pousserez le code de votre application React vers un dépôt GitHub afin que la plateforme App puisse y accéder ultérieurement.

Connectez-vous à votre compte GitHub. Après vous être connecté, créez un nouveau dépôt appelé digital-ocean-app. Vous pouvez rendre le dépôt privé ou public :

Create React App initialise automatiquement votre projet avec git, vous pouvez donc configurer pour pousser le code directement vers GitHub. Tout d’abord, ajoutez le référentiel que vous souhaitez utiliser avec la commande suivante :

  1. git remote add origin https://github.com/your_name/digital-ocean-app.git

Ensuite, déclarez que vous voulez pousser vers la branche main avec la commande suivante :

  1. git branch -M main

Enfin, poussez le code vers votre dépôt :

  1. git push -u origin main

Entrez vos identifiants GitHub lorsque vous êtes invité à pousser votre code.

Lorsque vous poussez le code, vous recevrez un message de succès. Votre message sera légèrement différent :

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

Vous avez maintenant copié votre code dans le dépôt GitHub.

À cette étape, vous avez poussé votre projet sur GitHub afin de pouvoir y accéder en utilisant DigitalOcean Apps. Ensuite, vous allez créer une nouvelle application DigitalOcean en utilisant votre projet et configurer le déploiement automatique.

Étape 3 — Déploiement sur la plateforme d’application DigitalOcean

Dans cette étape, vous allez déployer une application React sur la plateforme d’application DigitalOcean. Vous allez connecter votre dépôt GitHub à DigitalOcean, configurer le projet pour la construction, et construire votre projet initial. Une fois que le projet est en ligne, chaque changement déclenchera une nouvelle construction et une mise à jour.

À la fin de cette étape, vous pourrez déployer une application avec une livraison continue sur DigitalOcean.

Pour commencer, connectez-vous à votre compte DigitalOcean et appuyez sur le bouton Créer, puis sélectionnez Apps:

Ensuite, vous serez invité à lier votre dépôt GitHub. Si vous ne l’avez pas encore connecté, vous devrez vous connecter avec votre nom d’utilisateur et votre mot de passe et donner l’autorisation à DigitalOcean d’accéder à vos dépôts:

Une fois que vous avez lié votre compte, sélectionnez le dépôt que vous souhaitez connecter sur l’écran d’autorisation GitHub. Dans ce cas, vous utilisez le dépôt digital-ocean-app, mais vous pouvez connecter plus de dépôts si vous le souhaitez:

Après avoir sélectionné le dépôt, vous vous reconnecterez à l’interface DigitalOcean. Sélectionnez digital-ocean-app dans la liste des dépôts, puis appuyez sur Suivant. Cela connectera votre application directement au dépôt GitHub :

Maintenant que vous avez sélectionné votre dépôt, vous devez configurer l’application DigitalOcean. Dans cet exemple, le serveur sera basé en Amérique du Nord en choisissant New York dans le champ Région, et la branche de déploiement sera main. Pour votre application, choisissez la région la plus proche de votre emplacement physique :

Pour ce tutoriel, vous activez Autodéploiement des modifications de code. Cela reconstruira automatiquement votre application à chaque fois que vous mettez à jour le code.

Appuyez sur Suivant pour passer à l’écran Configurer votre application.

Ensuite, sélectionnez le type d’application que vous exécuterez. Puisque React va générer des actifs statiques, sélectionnez Site statique dans le menu déroulant du champ Type.

Remarque : Create React App n’est pas un générateur de site statique comme Gatsby, mais vous utilisez des actifs statiques, car le serveur n’a pas besoin d’exécuter de code côté serveur tel que Ruby ou PHP. L’application utilisera Node pour exécuter les étapes d’installation et de construction, mais n’exécutera pas de code d’application au niveau gratuit.

Vous avez également la possibilité d’utiliser un script de construction personnalisé. Mais dans ce cas, vous pouvez vous en tenir à la commande par défaut npm run build. Vous voudrez peut-être créer un script de construction personnalisé si vous avez un script de construction différent pour un environnement de qualité assurance (QA) ou de production :

Cliquez sur Suivant pour passer à la page Finaliser et lancer.

Vous pouvez ici sélectionner le plan tarifaire. Le niveau Starter gratuit est conçu pour les sites statiques, donc choisissez celui-ci :

Cliquez sur le bouton Lancer l’application Starter et DigitalOcean commencera à construire votre application.

L’application exécutera les scripts npm ci et npm build dans votre dépôt. Cela téléchargera toutes les dépendances et créera le répertoire build avec une version compilée et minifiée de tous vos fichiers JavaScript, HTML et autres ressources. Vous pouvez également créer un script personnalisé dans votre package.json et mettre à jour les Commandes dans l’onglet Composants de votre application sur la Plateforme App.

La construction prendra quelques minutes, mais lorsque ce sera terminé, vous recevrez un message de succès et un lien vers votre nouveau site. Votre lien aura un nom unique et sera légèrement différent :

Cliquez sur Application en direct pour accéder à votre projet dans le navigateur. Ce sera le même que le projet que vous avez testé localement, mais il sera en direct sur le web avec une URL sécurisée :

Maintenant que votre projet est configuré, chaque fois que vous apportez une modification au dépôt lié, vous lancerez une nouvelle construction. Dans ce cas, si vous poussez une modification vers la branche main, DigitalOcean exécutera automatiquement un nouveau déploiement. Pas besoin de vous connecter ; il s’exécutera dès que vous poussez le changement :

À cette étape, vous avez créé une nouvelle application DigitalOcean sur la plateforme App. Vous avez connecté votre compte GitHub et configuré l’application pour construire la branche main. Après avoir configuré l’application, vous avez appris que l’application déploiera une nouvelle version après chaque modification.

Conclusion

La plateforme App de DigitalOcean vous offre un outil rapide pour déployer des applications. Avec une petite configuration initiale, votre application se déploiera automatiquement après chaque modification. Cela peut être utilisé en conjonction avec React pour mettre rapidement en place et exécuter votre application web.

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.

Source:
https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform