Dans la logique d’une start-up d’Etat : déployer simplement et rapidement pour un premier usager satisfait …

Image for post
Image for post

En lien avec le CNFPT s’est tenue une nouvelle session Alpha via l’incubateur Betagouv autour de l’innovation publique

Image for post
Image for post

en lien avec ce nouveau MOOC :

Image for post
Image for post

Plus de 50 agents d’administrations diverses venus des quatres coins de la France étaient présents :

Image for post
Image for post

avec un programme bien fourni :

Image for post
Image for post

Je repars comme dans l’article précédent du portail de la start-up d’Etat OpenAcadémie.

Résultat de recherche d'images pour "next js"

Et comme il utilise le framework Next.js pour React mis au point par Zeit, je vais utiliser simplement le client Now pour déployer ce portail très facilement :

Image for post
Image for post
$ npm install -g now$ now
Image for post
Image for post
Image for post
Image for post

Une adresse m’est retournée à la fin du déploiement :

Image for post
Image for post

Et le portail est accessible :

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

On peut visualiser les logs générés lors du déploiement du portail :

Image for post
Image for post

ou les sources utilisées :

Image for post
Image for post

Je peux également utiliser le service Netlify :

Résultat de recherche d'images pour "netlify"
Image for post
Image for post

Netlify — la contraction de Net et Simplify — a pour but de simplifier la mise en production et de fournir tous les outils modernes nécessaires à des stratégies de déploiement agiles à tout un chacun, sans avoir besoin pour cela d’être un devops confirmé. En l’espace de quelques années Netlify est devenu un acteur incontournable de l’écosystème JAMstack : ils sont d’ailleurs à l’origine de cette appellation et des sites statiques.

Dans les sources du portail OpenAcadémie disponible via github => https://github.com/betagouv/open-academie je lance la construction du contenu statique vers un répertoire nommé “out” :

Image for post
Image for post

et je déploie depuis ce répertoire :

Image for post
Image for post

l’adresse retournée permet d’accéder au portail :

Image for post
Image for post
Image for post
Image for post

avec le tableau de bord dédié dans le portail de Netlify :

Image for post
Image for post

Chez Google, Firebase propose un service d’hébergement de sites web statiques (que l’on peut rendre dynamiques via les Firebase Functions).

Image for post
Image for post
Image for post
Image for post

On installe pour cela l’outil en ligne de commande de Firebase suivi de son initialisation :

$ npm install -g firebase-tools$ firebase login$ firebase init
Image for post
Image for post

on voit que l’on peut tester localement son déploiement sur sa station :

$ firebase serve
Image for post
Image for post

avant le déploiement définitif :

$ firebase deploy
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

et un contrôle du site déployé depuis la console web de Firebase :

Image for post
Image for post

Mais on peut également utiliser d’autres services similaires comme Surge.sh :

Image for post
Image for post
Résultat de recherche d'images pour "surge sh"

Installation et lancement de la commande Surge pour déploiement immédiat :

$ npm install --global surge
$ surge
Image for post
Image for post

et retour immédiat de l’adresse publique d’accès à ce portail …

Image for post
Image for post

Enfin, j’utilise le service AWS Amplify, une bibliothèque en Open Source sous Apache 2.0 à destination des développeurs qui veulent créer des applications cloud en JavaScript pour les plateformes Web ou mobile.

Résultat de recherche d'images pour "aws amplify"

Les modules de la bibliothèque Amplify d’AWS sont divisés en différentes catégories (Auth, Analytics, Storage, API, Caching) afin d’ajouter rapidement des fonctions telles que la connexion/l’inscription de l’utilisateur, la MFA, le suivi ou l’analyse des métriques, la gestion des contenus ou l’intégration des API sans serveur. La bibliothèque comporte également des fonctions d’internationalisation et de localisation pour une prise en charge multilingue ainsi que des capacités de mise en cache. Enfin, des composants et extensions pour React et React Native permettent aux développeurs de créer des applications sur ces plateformes pour ajouter ces capacités en respectant les normes spécifiques de l’infrastructure. Les développeurs JavaScript peuvent également utiliser la bibliothèque pour créer leurs propres composants d’interface utilisateur personnalisés, par exemple, des flux d’authentification personnalisés.

Image for post
Image for post

J’installe AWS Amplify CLI avec npm et je lance la configuration :

$ npm install -g @aws-amplify/cli
$ amplify configure
Image for post
Image for post

toujours dans le cadre de projet de portail avec Next.js :

Image for post
Image for post

et je lance l’initialisation nécessaire au déploiement :

$ amplify init
Image for post
Image for post

je définis le mode d’hébergement (ici via un bucket d’AWS S3) et je publie :

$ amplify hosting add$ amplify publish
Image for post
Image for post
Image for post
Image for post

L’url fournie permet encore une fois d’accéder au portail d’OpenAcadémie :

Image for post
Image for post
Image for post
Image for post

avec les buckets d’AWS S3 qui ont été créés :

Image for post
Image for post

sachant que l’on peut supprimer ce déploiement très rapidement :

Image for post
Image for post

On peut aller beaucoup plus loin notamment avec Netlify CMS dans ces solutions de type JAMStack (API+JavaScript+Markup). Netlify CMS est une application React open-source qui agit comme un wrapper pour le workflow Git, en utilisant l’API GitHub, GitLab ou Bitbucket =>

Image for post
Image for post

ou bien comme pour la Start-up d’Etat Plante & Moi, utiliser AirTable (pour rappel, AirTable est un outil en ligne qui permet de créer très facilement, à partir de modèles, des bases de données prêtes à l’emploi) :

On peut en effet créer son propre CMS de blog personnalisé avec Airtable et GatsbyJS par exemple :

Image for post
Image for post

et même sans avoir à coder quoi que ce soit …

Il est possible également de réaliser son propre système d’hébergement de son contenu statique en utilisant les fonctions à la demande et du stockage Objet comme présenté dans cet article dans Azure :

Les startups d’état, c’est de facto une nouvelle manière de construire des services publics. L’incubateur de Services Numériques Betagouv a été mis en place au sein de la DINSIC, la direction interministérielle du numérique et du système d’information et de communication de l’Etat pour accompagner ces projets. Entièrement axées sur l’expérimentation continue, ces startups d’État n’obéissent pas aux canons des projets traditionnels. Elles ne sauraient être guidées par des spécifications trop rigides ou un cahier des charges formel. Elles s’inscrivent par ailleurs dans un temps court. D’où l’intérêt d’utiliser ce type de service en mode SaaS ou Serverless. Car il ne faut pas l’oublier, une Startup d’État ne cherche pas à obtenir un consensus général avant de démarrer, elle cherche un premier usager satisfait …

Quelques liens à ce sujet :

A suivre ! …

Above the clouds, the sky is always blue ...

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store