-241

content/posts/2025-06-05-static-apps-clever/index.md

reviewed

··· 1 1 - --- 2 2 - date: 2025-06-05 3 3 - language: fr 4 4 - title: Déployer des applications statiques sur Clever Cloud 5 5 - tags: 6 6 - - DevOps 7 7 - - CleverCloud 8 8 - --- 9 9 - 10 10 - Il y a quelques jours, je suis tombé sur ce post de David Legrand sur Bluesky : 11 11 - 12 12 - <blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:rlpsf5c2y5jkfifwp3klcrzf/app.bsky.feed.post/3lqrqpdld3c2j" data-bluesky-cid="bafyreigxquchzyduo3eyj2cuoyna6dsaqzpmnpp2vittiremc5mlwwtihy" data-bluesky-embed-color-mode="light"><p lang="en">🚀 We work on 3 new runtimes on @clever-cloud.com 13 13 -  : Linux, Static and... V. Want to test? Let me know! 14 14 - 15 15 - Want to know more ? ▶️ github.com/CleverCloud/... 16 16 - 17 17 - 😍 Thanks to the teams across Clever Cloud for the mutual efforts to ease how we provide new runtimes to customers!<br><br><a href="https://bsky.app/profile/did:plc:rlpsf5c2y5jkfifwp3klcrzf/post/3lqrqpdld3c2j?ref_src=embed">[image or embed]</a></p>&mdash; David Legrand ☁️ 🤘 (<a href="https://bsky.app/profile/did:plc:rlpsf5c2y5jkfifwp3klcrzf?ref_src=embed">@davlgd.fr</a>) <a href="https://bsky.app/profile/did:plc:rlpsf5c2y5jkfifwp3klcrzf/post/3lqrqpdld3c2j?ref_src=embed">June 4, 2025 at 1:55 PM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script> 18 18 - 19 19 - J'ai donc sauté sur l'occasion pour demander à tester ce nouveau runtime. 20 20 - 21 21 - Cet article présente donc comment *ce site*, que vous êtes en train de lire, a été déployé dans ce tout nouveau runtime sur Clever Cloud ! 22 22 - 23 23 - <!--more--> 24 24 - 25 25 - ## La création de l'application 26 26 - 27 27 - Déployer sur Clever Cloud, c'est toujours très facile. Ça consiste principalement en quelques commandes CLI : 28 28 - 29 29 - ```shell 30 30 - $ clever create --type TYPE APP_NAME 31 31 - ``` 32 32 - 33 33 - Mais comme je teste en avant-première, le type _static_ n'est probablement pas encore implémenté dans le CLI. 34 34 - Je crée donc mon application dans Clever Cloud en utilisant la console : 35 35 - 36 36 -  37 37 - 38 38 - Au niveau de la scalabilité, je pars sur une instance _pico_, qui est la plus petite disponible. 39 39 - _A priori_, ce format d'instance devrait être suffisant pour servir mes articles de blog, c'est ce que mentionne David dans son post en tout cas. 40 40 - 41 41 -  42 42 - 43 43 - Enfin, je choisis d'_hoster_ mon application sur l'infrastructure de Clever Cloud. 44 44 - 45 45 -  46 46 - 47 47 - Une fois ces étapes validées, l'application statique apparaît bien dans ma console. 48 48 - 49 49 -  50 50 - 51 51 - ## Le déploiement 52 52 - 53 53 - Maintenant que l'application est créée, le déploiement se fait en deux commandes, que j'exécute sur le _CLI_ cette fois-ci. 54 54 - 55 55 - La première commande consiste à associer mon répertoire à l'application que je viens de créer : 56 56 - ```shell 57 57 - $ clever link app_701cce73-7499-4e14-9059-519fae4f1875 58 58 - Your application has been successfully linked! 59 59 - ``` 60 60 - 61 61 - La seconde est le déploiement en lui-même (j'ai un peu tronqué l'output de la commande par souci de clarté) : 62 62 - 63 63 - ```shell 64 64 - $ clever deploy 65 65 - 66 66 - Remote application is app_id=app_701cce73-7499-4e14-9059-519fae4f1875, alias=codeka.io, name=codeka.io 67 67 - Remote application belongs to orga_5e0f424c-f593-4d79-9863-5d1d3f17b25e 68 68 - App is brand new, no commits on remote yet 69 69 - New local commit to push is 11370c5e5ebb5fd0e502ea9f2502cc3b5848f0e2 (from refs/heads/main) 70 70 - Pushing source code to Clever Cloud… 71 71 - Your source code has been pushed to Clever Cloud. 72 72 - Waiting for deployment to start… 73 73 - Deployment started (deployment_6ff2e8cb-f9b8-4231-bedf-db2ce0497f87) 74 74 - Waiting for application logs… 75 75 - 2025-06-05T13:53:35.830Z: [INFO] No Clever Cloud specific configuration file detected. Continuing…[INFO] Using Python version 2[INFO] Changing current directory to /home/bas/app_701cce73-7499-4e14-9059-519fae4f1875…[INFO] We are now in /home/bas/app_701cce73-7499-4e14-9059-519fae4f1875, let's build and run the app.[INFO] Deploying commit ID 11370c5e5ebb5fd0e502ea9f2502cc3b5848f0e2[INFO] Hugo configuration file detected 76 76 - 2025-06-05T13:53:35.830Z: Start building sites … 77 77 - 2025-06-05T13:53:35.830Z: hugo v0.147.7+extended linux/amd64 BuildDate=unknown 78 78 - 2025-06-05T13:53:49.083Z: │ FR │ EN 79 79 - 2025-06-05T13:53:49.083Z: ──────────────────┼─────┼───── 80 80 - 2025-06-05T13:53:49.084Z: Pages │ 107 │ 23 81 81 - 2025-06-05T13:53:49.084Z: Paginator pages │ 4 │ 0 82 82 - 2025-06-05T13:53:49.084Z: Non-page files │ 85 │ 0 83 83 - 2025-06-05T13:53:49.084Z: Static files │ 184 │ 184 84 84 - 2025-06-05T13:53:49.084Z: Processed images │ 44 │ 0 85 85 - 2025-06-05T13:53:49.084Z: Aliases │ 6 │ 2 86 86 - 2025-06-05T13:53:49.084Z: Cleaned │ 0 │ 0 87 87 - 2025-06-05T13:53:49.084Z: Total in 13269 ms 88 88 - 2025-06-05T13:53:49.461Z: [INFO] Creating build cache archive[INFO] build cache archive successfully created[INFO] No cron to setup 89 89 - 2025-06-05T13:53:49.461Z: Uploading application build cache archive… file is 134M before compression. 90 90 - 2025-06-05T13:54:26.611Z: Application start successful 91 91 - 2025-06-05T13:54:27.092Z: [INFO] No Clever Cloud specific configuration file detected. Continuing…[INFO] Using Python version 2[INFO] Changing current directory to /home/bas/app_701cce73-7499-4e14-9059-519fae4f1875…[INFO] We are now in /home/bas/app_701cce73-7499-4e14-9059-519fae4f1875, let's build and run the app.[INFO] Deploying commit ID 11370c5e5ebb5fd0e502ea9f2502cc3b5848f0e2[INFO] No cron to setup[INFO] Successfully deployed in 0 minutes and 12 seconds 92 92 - Deployment successful 93 93 - ``` 94 94 - 95 95 - Tout semble bien se passer. Mon site est bien détecté comme un site utilisant `hugo`, et il est construit automatiquement. 96 96 - 97 97 - Un `clever open` permet d'ouvrir l'application directement dans mon navigateur : 98 98 - 99 99 - ```shell 100 100 - $ clever open 101 101 - Opening the application in your browser 102 102 - ``` 103 103 - 104 104 - Et là, bim, 404 ! 105 105 - 106 106 -  107 107 - 108 108 - En effet, il faut positionner quelques variables d'environnement pour que tout fonctionne correctement (merci David Legrand pour le topo d'ailleurs) : 109 109 - 110 110 - Quand hugo génère le contenu du site, il dépose ses fichiers par défaut dans un répertoire `/public`. Il faut donc indiquer au serveur web que c'est bien ce répertoire qui doit être servi. La variable d'environnement `CC_WEBROOT` permet d'indiquer ce répertoire. 111 111 - 112 112 - Il est aussi possible de préciser la version de hugo avec `CC_HUGO_VERSION` et de modifier les commandes avec `CC_BUILD_COMMAND`. 113 113 - 114 114 - A priori, hugo n'est pas détecté quand `CC_WEBROOT` est modifié (cf. [cette discussion sur GitHub](https://github.com/CleverCloud/Community/discussions/66#discussioncomment-13381026)), donc je précise la commande `CC_BUILD_COMMAND=hugo` pour forcer son utilisation. 115 115 - 116 116 - Je précise donc juste mes deux variables `CC_WEBROOT=/public` et `CC_BUILD_COMMAND=hugo`, et je ne précise pas les autres pour garder leur valeur par défaut : 117 117 - 118 118 - ```shell 119 119 - $ clever env set CC_WEBROOT "/public" 120 120 - Your environment variable has been successfully saved 121 121 - 122 122 - $ clever env set CC_BUILD_COMMAND "hugo" 123 123 - Your environment variable has been successfully saved 124 124 - ``` 125 125 - 126 126 - Un `restart` est alors nécessaire pour la bonne prise en compte de la variable, on peut aussi re-forcer un déploiement complet avec `clever deploy --force` : 127 127 - 128 128 - ```shell 129 129 - $ clever restart 130 130 - ``` 131 131 - 132 132 - Et après quelques minutes, le site est disponible : 133 133 - 134 134 -  135 135 - 136 136 - ## La bascule DNS 137 137 - 138 138 - Maintenant que le site est buildé et disponible, je peux enregistrer mon domaine et basculer mon DNS chez Clever Cloud. 139 139 - 140 140 - L'enregistrement du domaine côté Clever Cloud se fait en une commande : 141 141 - 142 142 - ```shell 143 143 - $ clever domain add codeka.io 144 144 - Your domain has been successfully saved 145 145 - ``` 146 146 - 147 147 - La configuration du DNS est expliquée directement dans la console : 148 148 - 149 149 -  150 150 - 151 151 - Comme j'utilise un domain racine, j'ai dû déclarer les records de type `A` dans ma zone DNS : 152 152 - 153 153 - ```text 154 154 - IN A 91.208.207.214 155 155 - IN A 91.208.207.215 156 156 - IN A 91.208.207.216 157 157 - IN A 91.208.207.217 158 158 - IN A 91.208.207.218 159 159 - IN A 91.208.207.220 160 160 - IN A 91.208.207.221 161 161 - IN A 91.208.207.222 162 162 - IN A 91.208.207.223 163 163 - ``` 164 164 - 165 165 - Une fois la modification des DNS passée, tout est ok et mon site est disponible en ligne. 166 166 - 167 167 - Vous êtes donc en train de lire cet article depuis un site static déployé sur Clever Cloud 🎉 168 168 - 169 169 - ## Performances 170 170 - 171 171 - ### Build 172 172 - 173 173 - Le temps de build est tout à fait correct. 174 174 - 175 175 - Mon site n'est pas des plus gros (une centaine de pages). Le build de mon site se fait en une quinzaine de secondes, et le démarrage également. Le temps total d'un déploiement est d'un peu plus d'une minute, pour l'intégralité de l'exécution de la commande `clever deploy`. C'est le même ordre de grandeur que les déploiements que je faisais sur GitHub Pages par le passé. 176 176 - 177 177 - ### Requêtes et débit 178 178 - 179 179 - Un test rapide avec `ab` donne les stats suivantes : 180 180 - 181 181 - ```shell 182 182 - $ ab -k -n 500 -c 50 https://codeka.io/ 183 183 - This is ApacheBench, Version 2.3 <$Revision: 1923142 $> 184 184 - Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/ 185 185 - Licensed to The Apache Software Foundation, http://www.apache.org/ 186 186 - 187 187 - Benchmarking codeka.io (be patient) 188 188 - Completed 100 requests 189 189 - Completed 200 requests 190 190 - Completed 300 requests 191 191 - Completed 400 requests 192 192 - Completed 500 requests 193 193 - Finished 500 requests 194 194 - 195 195 - 196 196 - Server Software: 197 197 - Server Hostname: codeka.io 198 198 - Server Port: 443 199 199 - SSL/TLS Protocol: TLSv1.3,TLS_AES_256_GCM_SHA384,2048,256 200 200 - Server Temp Key: X25519 253 bits 201 201 - TLS Server Name: codeka.io 202 202 - 203 203 - Document Path: / 204 204 - Document Length: 47110 bytes 205 205 - 206 206 - Concurrency Level: 50 207 207 - Time taken for tests: 0.313 seconds 208 208 - Complete requests: 500 209 209 - Failed requests: 0 210 210 - Keep-Alive requests: 500 211 211 - Total transferred: 23702000 bytes 212 212 - HTML transferred: 23555000 bytes 213 213 - Requests per second: 1597.97 [#/sec] (mean) 214 214 - Time per request: 31.290 [ms] (mean) 215 215 - Time per request: 0.626 [ms] (mean, across all concurrent requests) 216 216 - Transfer rate: 73974.77 [Kbytes/sec] received 217 217 - 218 218 - Connection Times (ms) 219 219 - min mean[+/-sd] median max 220 220 - Connect: 0 2 7.5 0 31 221 221 - Processing: 8 22 11.9 19 89 222 222 - Waiting: 7 19 6.8 18 87 223 223 - Total: 8 24 16.4 19 99 224 224 - 225 225 - Percentage of the requests served within a certain time (ms) 226 226 - 50% 19 227 227 - 66% 19 228 228 - 75% 20 229 229 - 80% 20 230 230 - 90% 54 231 231 - 95% 66 232 232 - 98% 77 233 233 - 99% 88 234 234 - 100% 99 (longest request) 235 235 - ``` 236 236 - 237 237 - Les performances sont clairement au rendez-vous, en tout cas largement suffisantes pour héberger un site statique comme le mien ⚡️ 238 238 - 239 239 - ## Conclusion 240 240 - 241 241 - Pour 4.5 € euros / mois, et pour la simplicité d'utilisation, ce nouveau type d'application Clever Cloud vaut vraiment le coup. Avec les accès aux logs, la customization des instances possibles et l'hébergement en France 🇫🇷, je dis bye-bye GitHub Pages 👋

+4 -1

hugo.toml

reviewed

··· 71 71 72 72 [privacy] 73 73 [privacy.youTube] 74 74 - privacyEnhanced = true 74 74 + privacyEnhanced = true 75 75 + 76 76 + [frontmatter] 77 77 + lastmod = ['lastmod', 'modified']