Passer au contenu principal

​
Introduction

Pour développer et héberger sur Square Cloud, il est essentiel de suivre une séquence structurée de configurations et de prérequis. Ce guide technique couvrira l’ensemble du processus, de la configuration initiale au déploiement en production.

​
Prérequis

  • Compte Square Cloud : Inscrivez-vous via la page d’inscription en utilisant votre adresse e-mail.
  • Plan payant actif : Garantit des ressources dédiées et des performances optimisées pour votre application. Consultez nos plans disponibles et choisissez celui qui convient le mieux à vos besoins.

​
Création du projet

Avant de commencer, assurez-vous d’avoir Node.js (>=20) et npm installés sur votre système. Si vous ne les avez pas encore, téléchargez-les depuis le site officiel de Node.js.
Initialisez un nouveau projet Gatsby à l’aide de l’initialiseur officiel : 
npm create gatsby@latest
Suivez les instructions pour choisir un starter et des options (TypeScript, Tailwind, etc.).

​
Installation des dépendances

Après la création, entrez dans le répertoire du projet et installez les dépendances : 
cd my-gatsby-site
npm install

​
Développement du projet

Démarrez le serveur de développement : 
npm run develop
Le serveur de développement de Gatsby s’exécute généralement à l’adresse http://localhost:8000. Pour générer une page simple, ajoutez src/pages/index.js avec : 
import * as React from 'react'

export default function Index() {
  return <h1>Hello from Gatsby!</h1>
}

​
Compilation du projet

Compilez la sortie de production avant l’envoi : 
npm run build
Gatsby génère par défaut la sortie statique dans le dossier public/.

​
Choisir un serveur de production

Pour servir votre application Gatsby en production, vous devez utiliser un serveur. Vous pouvez créer le vôtre ou utiliser ceux qui existent déjà.

​
SSR

Pour les builds SSR qui émettent un bundle serveur, configurez simplement le fichier principal sur server.js

​
Bibliothèque Express

Pour servir votre projet statique sur Square Cloud, assurez-vous que votre serveur délivre correctement les fichiers statiques. Pour utiliser Node.js avec Express, une configuration courante est :
server.js
import express from 'express';
import path from 'path';

const app = express();
const distPath = path.join(import.meta.dirname, 'dist');

app.use(express.static(distPath));

// SPA fallback: serve index.html for any route not matched above
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(80, () => console.log('Server running on port 80'));
Ajustez les paramètres de chemin dist en fonction du dossier de build de votre projet. S’il se trouve dans un dossier à l’intérieur de build ou dist, utilisez plutôt ce chemin.

​
Bibliothèque Serve

​
Installation de la bibliothèque Serve

Pour installer la bibliothèque serve, accédez au répertoire de votre projet dans le terminal et exécutez la commande suivante : 
npm install serve@14.2.3
Cette commande installe la version 14.2.3 de la bibliothèque serve. Si vous souhaitez installer la dernière version, vous pouvez omettre le @14.2.3.

​
Configuration du script de démarrage

Après avoir installé la bibliothèque serve, vous devez configurer le script de démarrage de votre projet pour utiliser serve. Pour ce faire, ouvrez le fichier package.json de votre projet et ajoutez un nouveau script nommé start:prod : 
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
Dans le script start:prod, serve -s build -l 80 réalise les opérations suivantes :
  • serve : c’est la commande qui démarre le serveur serve.
  • -s dist : l’option -s sert le répertoire dist en mode application monopage (single-page application). Cela signifie que toutes les requêtes non trouvées seront redirigées vers index.html. Le répertoire dist est généralement créé lorsque vous exécutez npm run build.
  • -l 80 : l’option -l suivie de 80 indique à serve d’écouter sur le port 80. Le port 80 est le port par défaut pour le trafic HTTP.
Ajustez le paramètre dist selon le dossier de build de votre projet. S’il se trouve dans un dossier à l’intérieur de build ou dist, utilisez plutôt ce chemin.

​
Déploiement

Après avoir préparé les fichiers de votre projet, vous pouvez désormais les envoyer sur Square Cloud et héberger votre projet. Pour ce faire, créez un fichier ZIP contenant tous les fichiers de votre projet.

​
Via le tableau de bord

1

Accéder à la page d'upload

Accédez à la page d’upload et téléversez le fichier zip de votre projet.
2

Configurer votre environnement

Après avoir téléversé votre zip, vous devrez configurer le nom, le fichier principal ou l’environnement d’exécution ainsi que d’autres paramètres de votre projet.
Si vous téléversez un projet web, veillez à sélectionner « Publication Web » et à définir un sous-domaine pour votre projet.
3

Déployer votre projet

Enfin, cliquez sur le bouton « Deploy » pour héberger votre projet sur Square Cloud.
Une fois le déploiement effectué, vous pouvez suivre l’état et les logs de votre projet depuis le tableau de bord.
Téléversement d'une application vers Square Cloud

​
Via la CLI

Pour utiliser cette méthode, vous devez créer un fichier de configuration nommé squarecloud.app à la racine de votre projet. Ce fichier contiendra la configuration nécessaire à votre projet.

En savoir plus : comment créer le fichier de configuration pour Square Cloud.

Le fichier squarecloud.app est un fichier de configuration qui servira à configurer votre application ; il sera utilisé pour définir votre environnement.
1

Installer la CLI

Tout d’abord, vous devez avoir la CLI installée dans votre environnement. Si ce n’est pas encore le cas, exécutez la commande suivante dans votre terminal :
npm install -g @squarecloud/cli
Si vous l’avez déjà, nous vous recommandons de la mettre à jour. Pour cela, exécutez la commande suivante dans votre terminal :
squarecloud update
2

S'authentifier

Maintenant, pour vous authentifier et utiliser les autres commandes de la CLI, vous trouverez votre clé d’autorisation ici en cliquant sur « Request API Key ». Après avoir obtenu votre clé d’autorisation, exécutez la commande suivante :
squarecloud auth login
3

Téléverser votre projet

Enfin, pour déployer votre application sur Square Cloud à l’aide de la CLI, vous devez exécuter la commande suivante :
squarecloud upload
Ou si vous avez créé le zip manuellement, vous pouvez utiliser :
squarecloud upload --file <path/to/zip>

​
Ressources supplémentaires

Pour plus d’informations sur Gatsby, consultez la documentation officielle ici.

​
Dépannage

​
Domaine personnalisé

Pour utiliser un domaine personnalisé (par exemple mysite.com) au lieu de l’URL par défaut mysite.squareweb.app, vous avez besoin du plan Standard ou supérieur. Le sous-domaine est défini par le champ SUBDOMAIN dans le fichier de configuration.

​
Prérequis minimum en RAM

Minimum : 512 Mo de RAM pour les sites web/API simples. Pour les sites utilisant des frameworks (Next.JS, React, Vue, Angular, etc.), nous recommandons toujours au moins 1 Go de RAM. Pour les applications plus volumineuses, allouez davantage de RAM afin d’éviter que l’application ne manque de mémoire et ne plante.

​
Impossible de trouver ce site.

Vérifiez que le sous-domaine/domaine correspond à ce qui est configuré dans le champ SUBDOMAIN ou dans les paramètres du domaine personnalisé. Si vous venez tout juste de mettre en ligne le site, patientez jusqu’à 60 secondes pour que Square active le premier accès.

​
Le site a mis trop de temps à répondre…

Vérifiez que vous avez correctement configuré le port 80 et l’hôte 0.0.0.0 dans l’application. Nous recommandons d’utiliser les variables d’environnement forcées par Square : PORT et HOST du fichier .env.

​
Contactez-nous

Si vous rencontrez toujours des difficultés techniques, notre équipe de support spécialisée est disponible pour vous aider. Contactez-nous et nous serons ravis de vous aider à résoudre tout problème.