Publiez votre site avec Cloudflare R2

Chinaski peut publier votre site web sur Cloudflare R2. R2 est un service de stockage de fichiers de Cloudflare. Vos visiteurs chargent le site depuis Cloudflare, pas depuis l'ordinateur où tourne Chinaski. Cela signifie que l'ordinateur où tourne Chinaski n'a pas besoin d'être en ligne pour que votre site fonctionne.

Chaque fois que vous publiez, Chinaski construit votre site et téléverse les fichiers vers R2.

Ce guide prend environ 20 à 30 minutes.

Avant de commencer

Il vous faut :

Chinaski, installé et en marche. Vous devez pouvoir ouvrir la zone admin.
Un compte Cloudflare. Un compte gratuit suffit.
Un nom de domaine, ajouté à votre compte Cloudflare. Par exemple, example.com.
L'adresse web que vous voulez utiliser pour votre site. Par exemple, www.example.com ou blog.example.com. Dans ce guide, nous utilisons www.example.com.

Important : Utilisez un bucket R2 séparé pour chaque site web. Quand Chinaski publie, il fait correspondre le bucket exactement à votre site. Il supprime tous les autres fichiers du bucket. Ne stockez pas d'autres fichiers dans ce bucket.

Étape 1 : Créer un bucket

Un bucket est un espace de stockage pour les fichiers de votre site.

Connectez-vous au tableau de bord Cloudflare à l'adresse https://dash.cloudflare.com.
Dans le menu de gauche, sélectionnez R2 Object Storage.
Sélectionnez Create bucket.
Saisissez un nom pour le bucket. Utilisez seulement des lettres minuscules, des chiffres et des tirets. Par exemple : www-example-com.
Pour la classe de stockage, sélectionnez Standard.
Sélectionnez Create bucket.

Notez le nom du bucket. Vous en aurez besoin à l'Étape 5.

Étape 2 : Créer les clés d'accès

Chinaski a besoin de clés pour téléverser des fichiers vers votre bucket.

Allez sur la page de vue d'ensemble de R2 Object Storage.
Sélectionnez Manage API tokens.
Sélectionnez Create API token. Si Cloudflare demande quel type de token vous voulez, sélectionnez Account API token.
Saisissez un nom pour le token. Par exemple : Chinaski.
Sous Permissions, sélectionnez Object Read & Write.
Sous la portée du bucket, sélectionnez Apply to specific buckets only. Puis sélectionnez le bucket créé à l'Étape 1.
Sélectionnez Create API token.

Cloudflare affiche maintenant vos clés. Copiez ces deux valeurs et gardez-les en lieu sûr :

Access Key ID
Secret Access Key

Important : Cloudflare n'affiche la Secret Access Key qu'une seule fois. Si vous la perdez, supprimez le token et créez-en un nouveau.

Il vous faut aussi votre Account ID. Vous le trouvez sur la page de vue d'ensemble de R2. C'est un long code de lettres et de chiffres.

Étape 3 : Connecter votre domaine au bucket

Cette étape rend votre site public à votre propre adresse web.

Allez sur R2 Object Storage et ouvrez votre bucket.
Sélectionnez l'onglet Settings.
Trouvez Custom Domains et sélectionnez Add (ou Connect Domain).
Saisissez l'adresse de votre site. Par exemple : www.example.com.
Suivez les étapes à l'écran pour confirmer.

Cloudflare crée l'enregistrement DNS pour vous. Vous n'avez pas besoin de modifier vos enregistrements DNS vous-même.

Après quelques minutes, le statut passe à Active. Le bucket est maintenant public à cette adresse. Vous n'avez aucun autre réglage d'accès public à changer.

Note : Vous verrez peut-être aussi un réglage appelé Public Development URL (r2.dev). Cette adresse sert uniquement aux tests. Ne l'utilisez pas pour votre vrai site. Laissez-la désactivée.

Étape 4 : Ajouter une URL Rewrite Rule

Les pages de votre site sont enregistrées sous forme de fichiers appelés index.html. Par exemple, la page www.example.com/about/ est enregistrée sous about/index.html.

R2 ne trouve pas ces fichiers automatiquement. Sans cette règle, les visiteurs voient une erreur sur chaque page. La règle ajoute index.html à chaque adresse qui se termine par /.

Dans le tableau de bord Cloudflare, ouvrez votre domaine (par exemple, example.com). N'ouvrez pas R2.
Dans le menu de gauche, sélectionnez Rules.
Créez une nouvelle URL Rewrite Rule. Selon votre tableau de bord, sélectionnez l'une de ces options :
- Rules > Overview > Create rule > URL Rewrite Rule
- Rules > Transform Rules > Rewrite URL > Create rule
Saisissez un nom pour la règle. Par exemple : Site index pages.
Sous If incoming requests match, sélectionnez Custom filter expression.
Sélectionnez Edit expression. Collez ce texte. Remplacez www.example.com par l'adresse de votre site :
```
(http.host eq "www.example.com" and ends_with(http.request.uri.path, "/"))
```
Sous Then, trouvez Path. Sélectionnez Rewrite to, puis Dynamic. Collez ce texte :
```
concat(http.request.uri.path, "index.html")
```
Pour Query, laissez Preserve.
Sélectionnez Deploy.

Étape 5 : Configurer Chinaski

Ouvrez la zone admin de Chinaski.
Allez dans Settings > General.
Dans Site URL, saisissez l'adresse complète de votre site. Incluez https://. N'ajoutez pas de / à la fin. Par exemple : https://www.example.com
Enregistrez.
Allez dans Settings > Deploy.

Remplissez ces champs :

Field	What to enter
Enable S3 deploy	On
Bucket	Le nom de votre bucket de l'Étape 1. Par exemple : `www-example-com`
Endpoint	`https://<ACCOUNT_ID>.r2.cloudflarestorage.com`, remplacez `<ACCOUNT_ID>` par votre Account ID de l'Étape 2
Region	`auto`
Access Key	Votre Access Key ID de l'Étape 2
Secret Key	Votre Secret Access Key de l'Étape 2
Deploy automatically after a successful build	On

Sélectionnez Save Deploy Settings.

Important : L'Endpoint doit se terminer par .r2.cloudflarestorage.com. N'ajoutez pas le nom de votre bucket à la fin.

Cloudflare affiche parfois l'adresse avec le nom du bucket à la fin, comme ceci : https://<ACCOUNT_ID>.r2.cloudflarestorage.com/<BUCKET_NAME>

Si vous copiez cette adresse, retirez le dernier / et le nom du bucket. Sinon, Chinaski place votre site dans un dossier à l'intérieur du bucket, et les visiteurs voient une erreur sur chaque page.

Étape 6 : Tester et publier

Sur la page Settings > Deploy, sélectionnez Test S3 Connection. Vous devriez voir un message de succès. Si vous voyez une erreur, revérifiez le Bucket, l'Endpoint et les clés.
Publiez une page, ou modifiez une page et enregistrez-la.
Attendez la fin du build et du téléversement. Le message de statut en haut de la zone admin montre la progression.
Ouvrez votre site dans un navigateur. Par exemple : https://www.example.com/

Vérifiez ces adresses :

Votre page d'accueil : https://www.example.com/
Une page à l'intérieur du site. Par exemple : https://www.example.com/about/
Le sitemap : https://www.example.com/sitemap.xml

Si elles se chargent toutes, votre site est publié.

Désormais, Chinaski téléverse vos modifications à chaque publication. Si un téléversement échoue, la version précédente de votre site reste en ligne. Corrigez le problème et publiez à nouveau.

Dépannage

Toutes les pages affichent "Error 404" et "Is this your bucket?"

Ce message vient de R2. Il signifie que votre domaine fonctionne, mais que R2 ne trouve pas le fichier.

Vérifiez ceci :

Vos fichiers sont dans un dossier. Dans Cloudflare, ouvrez votre bucket et sélectionnez l'onglet Objects. Le fichier index.html doit être au niveau supérieur, pas dans un dossier. Si vos fichiers sont dans un dossier portant le nom de votre bucket, votre Endpoint porte le nom du bucket à la fin. Corrigez-le (voir l'Étape 5) et publiez à nouveau. Chinaski supprime l'ancien dossier automatiquement.
Le domaine est connecté à un autre bucket. Ouvrez le bucket qui contient vos fichiers. Sélectionnez Settings et vérifiez que l'adresse de votre site figure bien sous Custom Domains.
Le bucket est vide. Vérifiez que Enable S3 deploy et Deploy automatically after a successful build sont tous les deux activés. Puis publiez à nouveau.

La page d'accueil fonctionne, mais les autres pages affichent une erreur

La règle de réécriture d'URL manque ou est incorrecte. Vérifiez l'Étape 4. Assurez-vous que la règle est activée et que l'adresse dans la règle est exactement la même que l'adresse de votre site.

Les pages se terminant par `index.html` affichent une erreur, mais seulement après l'ajout de la règle

Le filtre de la règle est trop large. Il ne doit viser que les adresses qui se terminent par /. Vérifiez l'expression de l'Étape 4, instruction 6.

"Test S3 Connection" échoue

Vérifiez que l'Endpoint est exactement https://<ACCOUNT_ID>.r2.cloudflarestorage.com, avec votre propre Account ID.
Vérifiez que le nom du Bucket est correct. Il ne doit pas contenir de /.
Vérifiez que vous avez copié les deux clés en entier.
Vérifiez que le token d'API a la permission Object Read & Write pour ce bucket.

Les liens du site pointent vers la mauvaise adresse

Vérifiez Site URL dans Settings > General. Ce doit être votre adresse publique, par exemple https://www.example.com. Puis publiez à nouveau.

Limites

Formulaires et téléchargements de documents : votre site est servi par R2 uniquement, donc R2 ne peut pas envoyer les soumissions de formulaires à Chinaski. Si l'ordinateur où tourne Chinaski n'est pas joignable depuis Internet, les formulaires de contact et les téléchargements de documents protégés ne fonctionnent pas.
Coûts : Cloudflare R2 a un niveau gratuit. Au moment où ces lignes sont écrites, il comprend 10 Go de stockage par mois, 1 million d'opérations de téléversement et 10 millions d'opérations de lecture par mois. Cloudflare ne facture pas les données envoyées à vos visiteurs. Si vous dépassez cela, Cloudflare vous facture. Consultez les prix actuels sur la page de tarification de Cloudflare R2. Le niveau gratuit ne s'applique qu'au stockage Standard.