Upsun est bien adapté pour héberger des applications JavaScript de toutes sortes, y compris des applications React. Ce petit guide vous permettra de vous lancer dans les premières étapes de la création de votre projet React, de le déployer sur Upsun, puis de tirer parti de ses fonctionnalités pour lancer votre développement.
Pour ce tutoriel, nous pouvons utiliser le quickstart React pour créer notre application.
Exécutez la commande
npx create-react-app upsun-react --template cra-template-kendo-typescript
create-react-app
va mettre en place l'échafaudage pour le nouveau dépôt, dans ce cas en s'appuyant sur KendoReact - un projet qui contient une collection de composants React prêts à l'emploi selon le système d'interface utilisateur de KendoReact.
Lorsque le projet a fini de construire et d'installer les dépendances, nous pouvons exécuter une version de développement du site localement avec cd upsun-react && npm run start
et visiter le site à l'adresse http://localhost:3000.
Si nous voulons plutôt construire une version de production de l'application, nous pouvons le faire avec la commande
npm run build
qui construira les fichiers HTML, JS et CSS statiques dans le sous-répertoire local de construction.
Nous pouvons ensuite exécuter ce site construit rapidement avec un serveur local, comme l'approchebasée sur Python ci-dessous :
python3 -m http.server --directory=build 3000
Avec l'Upsun CLI installé et un compte déjà créé, en exécutant la commande suivante à partir du référentiel React :
upsun create -o YOUR_ORG_NAME --title=React-Upsun --region=ca-1.platform.sh --default-branch=main -y
Remplacez YOUR_ORG_NAME
par l'organisation souhaitée, et n'hésitez pas à remplacer par une autre région si vous le souhaitez. Ensuite, créez un fichier de configuration Upsun minimal pour construire et déployer le projet React.
# .upsun/config.yaml applications : upsun-react :
type : "nodejs:20" hooks : build : | set -eux npm install npm run build web : locations : / : root : build index : - index.html
Stage, commit, et push sur Upsun. Dans quelques minutes, vous verrez que votre application React a été construite et déployée avec succès.
git add .upsun/config.yaml git commit -m "Migrer vers Upsun." upsun push -y
Un journal d'activitéaccumulé apparaît localement dans votre terminal et dans l'activité push dans la console de gestion d'Upsun. Vous avez peut-être remarqué - selon le moment où vous avez suivi ce tutoriel - qu'il peut y avoir des dépendances obsolètes et même potentiellement vulnérables présentes dans le référentiel. Nous pouvons dédier un environnement de prévisualisation à la mise à jour et à l'amélioration de cette situation.
Tout d'abord, créons cet environnement :
upsun branch upgrades
Ensuite, mettons de l'ordre dans nos versions et utilisons la dernière version de Node.js à la fois localement et sur Upsun. Nous pouvons utiliser un outil comme nvm pour télécharger la dernière version disponible de Node.js - qui, au moment où j'écris ces lignes, est Node.js 22 (ajustez les commandes ci-dessous à la version actuelle, en fonction de la distance qui vous sépare de l'avenir). Installez nvm
, puis utilisez-le pour installer la version la plus récente de Node.js :
$ nvm install 22 $ node -v v22.11.0
Nous pouvons mettre à jour .upsun/config.yaml
pour qu'il corresponde à cette version récente.
# .upsun/config.yaml applications : upsun-react :
# Mise à jour de cette ligne de 20 --> 22 type : "nodejs:22" hooks : build : | set -eux npm install npm run build web : locations : / : root : build index : - index.html
Ensuite, à l'aide de npm
, vérifiez les dépendances vulnérables et modifiez-les manuellement ou avec l'outil CLI lui-même à l'aide des commandes npm upgrade
et npm audit fix
. Faites un commit (git add . && git commit -m "Make upgrades"
) et poussez les changements (upsun push -y
). Vérifiez que le déploiement a réussi, et qu'il a été fusionné en production !
upsun merge -y
Voilà, c'est fait ! Maintenant, non seulement vous avez un projet React déployé sur Upsun, mais vous avez suivi le même flux de travail avec lequel vous développerez pour chaque révision - qu'il s'agisse de mises à jour de dépendances ou d'ajouts de fonctionnalités - que vous ferez, avec un environnement de prévisualisation pour chacune d'entre elles.
Gardez l'œil ouvert pour d'autres articles sur le déploiement de toutes sortes d'applications sur Upsun - suivez-nous sur nos canaux sociaux pour rester à jour : Dev.to, Reddit, et Discord. N'oubliez pas de nous rejoindre sur le tout nouveau Developer Center pour encore plus de ressources.
À bientôt !