Guide de démarrage rapide pour l'hébergement d'Express sur Upsun

configurationGitHubPostgreSQLExpress

Bienvenue dans notre guide de démarrage rapide sur l'hébergement d'Express (au moment de la rédaction, la version la plus récente d'Express est 4.18.2) sur Upsun, où nous démontrerons à quel point il est simple d'héberger vos projets Express sur notre PaaS.

Avant de commencer, pour les besoins de ce tutoriel, nous supposerons que vous avez déjà installé le CLI d'Upsun localement.

Avez-vous vu la démo d'Upsun ? C'est l'endroit idéal pour découvrir le fonctionnement d'Upsun et mieux comprendre ce que nous offrons. Pour la consulter, créez un nouveau projet et choisissez "Deploy demo project".

Commencer localement

Si vous disposez déjà d'un dépôt GitHub avec un code source Express fonctionnel, clonez-le localement à l'aide de la commande suivante, puis passez à la deuxième étape : Configurez votre projet.

git clone git@github.com:<VotreRepoUrl>.git

Initialiser votre projet local

Tout d'abord, si vous n'avez pas encore de projet Express local, vous devez en créer un nouveau en suivant le guide d'installation d'Express. Veuillez vous référer à toutes les étapes du guide d'installation pour plus de détails, mais pour résumer, voici les quatre commandes nécessaires pour créer une application Express localement, comme indiqué ci-dessous :

mkdir my-express-app cd my-express-app npm init npm install express

Initialiser votre dépôt Git

Une fois que vous avez créé un nouveau projet Express en local, il est temps d'initialiser le dépôt Git local et de livrer les fichiers locaux à l'aide de la commande suivante :

git in git add package.json package-lock.json git commit -m "Init Express application"

Remarque : vous pouvez ignorer l'ajout du dossier node_modules au dépôt Git et utiliser les commandes suivantes pour le faire :

echo "/node_modules" >> .gitignore git add .gitignore && git commit -m "ajout du dossier node_modules dans le fichier .gitignore"

Ajouter une route Hello World

Pour que votre application Express soit facilement testable, vous devez créer votre première page Express. Pour ce faire, créez un nouveau fichier index.js à la racine de votre code source, il contiendra un script Hello World basique, comme vu ci-dessous :

const express = require('express') const app = express() var port = (process.env.PORT || '3000') ; app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Exemple d'application écoutant sur le port ${port}`) })

Puis validez votre fichier en utilisant les commandes suivantes :

git add index.js git commit -m "ajouter un Hello World"

Créez votre dépôt GitHub

L'étape suivante consiste à créer un dépôt GitHub. Pour ce faire, suivez le guide officiel de GitHub qui fournit toutes les informations dont vous avez besoin.

Pousser le code source vers votre dépôt distant

La dernière étape de l'installation locale est de pousser votre code source vers votre dépôt GitHub distant, en utilisant la commande suivante :

git remote add origin https://github.com/OWNER/REPOSITORY.git git push -u origin main

Configurer votre projet

Pour héberger votre application Express sur Upsun, quelques fichiers de configuration YAML sont nécessaires à la racine de votre projet pour gérer le comportement de votre application. Voir le code pour les générer automatiquement ci-dessous. Ces fichiers de configuration YAML sont situés dans un dossier .upsun/ à la racine de votre code source, dont l'architecture ressemblera à ceci :

my-express-app ├── .upsun │ └── config.yaml ├── [.environment] └── <project sources>

Remarque: Un fichier .environment supplémentaire peut également être situé à la racine de votre code source, ce fichier peut contenir des variables d'environnement spécifiques à Upsun.

Pour générer ces fichiers YAML, exécutez la commande upsun project:init depuis la racine de votre projet Express et suivez les instructions, comme vous pouvez le voir ci-dessous :

upsun project:init Bienvenue à Upsun ! Commençons par quelques questions. Nous avons besoin d'en savoir un peu plus sur votre projet. Cela ne prendra qu'une minute ! ✓ Detected stack : Express ✓ Runtime détecté : JavaScript/Node.js ✓ Gestionnaires de dépendances détectés : Npm Dites-nous le nom de votre projet : [app] (\_/) Nous avons presque terminé... =(^.^)= Enfin, à moins que vous ne créiez un site web statique, votre projet utilise des services. Définissons-les : Sélectionnez tous les services que vous utilisez : [] Vous n'avez sélectionné aucun service, voulez-vous quand même continuer ? [┌───────────────────────────────────────────────────┐ │ CONGRATULATIONS !                                │ │ │ │ Nous avons créé les fichiers suivants pour vous :   │ │ - .upsun/config.yaml │ │ │ │ │ Nous sautons de joie ! ⍢ │ └───────────────────────────────────────────────────┘ │ / │/2502↩ ↪So_ (\ /) ( . .) o (_(")(") Vous pouvez maintenant déployer votre application sur Upsun ! Pour ce faire, livrez vos fichiers et déployez votre application en utilisant la CLI d'Upsun : $ git add . $ git commit -m 'Add Upsun configuration files' $ upsun push

La commande upsun project:init détectera automatiquement que vous utilisez une pile Express, vous demandera si vous souhaitez ajouter des services (n'en ajoutez pas pour l'instant), et générera les fichiers YAML .upsun/config.yaml correspondants, comme suit :

# Liste complète de toutes les propriétés disponibles : https://docs.upsun.com/create-apps/app-reference.html applications : app : source : root : "/" type : "nodejs:20" mounts : "/.npm" : source : "storage" source_path : "npm" web : commands : start : "node index.js" upstream : socket_family : tcp locations : "/" : passthru : true build : flavor : none hooks : build : | set -eux npm i # Liste complète des services disponibles : https://docs.upsun.com/add-services.html#available-services #services : # db : # type : postgresql:15 # Toutes les versions disponibles sont : 15, 14, 13, 12, 11 # Les routes du projet # Plus d'informations : https://docs.upsun.com/define-routes.html routes : "https://{default}/" : type : upstream upstream : "app:http" "https://www.{default}/" : type : redirect to : "https://{default}/"

Puis validez vos nouveaux fichiers, en utilisant la commande suivante, et la configuration du projet est terminée :

git add .upsun/config.yaml git commit -m "Fichiers de configuration Upsun" git push

Créer un nouveau projet Upsun

Remarque: si vous n'avez pas encore de compte Upsun, veuillez en créer un pour compléter les étapes suivantes.

L'étape suivante de la mise en place d'Express sur Upsun consiste à créer un projet, ce qui est facile à faire via la Console. Sur la page d'accueil de votre console (tous les projets), dans le coin supérieur droit, cliquez sur le bouton " Créer un projet", comme indiqué ci-dessous :

Si vous n'avez pas encore créé d'organisation dans laquelle placer le projet, il vous sera d'abord demandé d'en créer une. Une fois que vous l'avez fait, sélectionnez cette organisation dans la liste déroulante, puis sélectionnez Déployer avec GitHub, comme le montre l'écran ci-dessous :

Sélectionnez ensuite Connect with GitHub dans les options proposées, comme le montre l'écran ci-dessous :

Dans le formulaire suivant qui apparaît, comme le montre l'écran ci-dessous, sélectionnez votre organisation GitHub dans le premier menu déroulant, puis sélectionnez Install & Authorize et remplissez les informations d'identification GitHub. Vous devrez sélectionner votre organisation GitHub et le dépôt GitHub précédemment créé, puis sélectionner Continuer.

Vous serez alors amené à l'étape 3 de cette configuration - comme on peut le voir ci-dessous - où vous devrez remplir divers détails, y compris le nom du projet, le nom de l'environnement et la région. Une fois cette étape franchie, sélectionnez Créer un projet.

Sur la page suivante, pendant que le processus de création du projet se poursuit en arrière-plan, vous verrez à gauche d'autres instructions de configuration, si vous en avez besoin. Sur la droite, vous pouvez suivre le processus de création du projet et vous serez informé lorsqu'il sera terminé, comme le montre l'écran ci-dessous :

Une fois votre projet créé, le processus d'intégration GitHub déploiera automatiquement votre application sur la base du code source de votre dépôt GitHub. Attendez que l'intégration ait terminé le déploiement et elle affichera alors les informations relatives à votre application, dont vous pouvez voir un exemple dans l'écran ci-dessous :

À la fin du processus, veuillez exécuter la commande suivante pour définir la distance, en utilisant la CLI d'Upsun :

upsun project:set-remote <ProjectID>

Il est temps de déployer, n'est-ce pas ?

Et juste comme ça, c'est le moment de déployer ! Mais attendez...

Comme vous vous êtes déjà assuré que votre code source était prêt pour Upsun dans la section de configuration du projet de ce guide, votre projet aura été automatiquement déployé lors de la création du projet et votre application sera déjà en ligne, sans aucun déploiement nécessaire. Vérifiez l'URL de votre nouveau projet en bas de l'interface de la console.

L'étape suivante consiste à accéder à la console de votre projet en cliquant sur le bouton " view project" en bas de la page de configuration, et voilà, votre application Express est en ligne et vous pouvez commencer à jouer avec elle et à lui ajouter des tas de nouvelles fonctionnalités intéressantes !

Liens utiles

Comment optimiser l'allocation des ressources et les services de base de données en nuage pour les applications Express