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 et npm installés sur votre système. Si ce n’est pas le cas, vous pouvez les télécharger depuis le site officiel de Node.js. Pour créer un nouveau projet Vite, exécutez la commande suivante : 
npm create vite@latest my-vite-app
Dans la commande ci-dessus, my-vite-app est le nom de votre nouveau projet. Remplacez-le par le nom de votre choix pour votre projet. Par défaut, cette commande configure un projet Vite avec JavaScript.

​
Choisir un modèle spécifique

Vite vous permet de choisir différents modèles pour votre projet. Lors de la création d’un nouveau projet, vous pouvez spécifier le modèle souhaité à l’aide de l’option --template. Voici quelques exemples : Sélectionnez un modèle tel que : react, vue et lit. 
npm create vite@latest my-vite-app --template [template]
Choisissez le modèle qui correspond le mieux à vos besoins et ajustez le nom du projet si nécessaire.

​
Comprendre la différence entre JavaScript et TypeScript

Lorsque vous choisissez JavaScript, Vite configure le projet avec les paramètres JavaScript par défaut. En revanche, lorsque vous choisissez TypeScript, Vite configure le projet avec les paramètres TypeScript, y compris la génération d’un fichier tsconfig.json.

​
Compilation du projet

Avant l’envoi en production, générez les artefacts de production à l’aide de la compilation Vite : 
npm run build
Pour servir la version de production localement (utile pour tester dans l’environnement de déploiement), nous recommandons d’utiliser la commande vite preview, en exposant l’application sur toutes les interfaces et sur le port 80 : 
npx vite preview --host 0.0.0.0 --port 80
Vous pouvez également ajouter un script à votre package.json pour simplifier : 
{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}
Remarque : sur certains systèmes, le port 80 nécessite des privilèges particuliers. En cas de restriction, utilisez un autre port (par exemple 8080) et mappez-le sur l’hôte/service.

​
Choisir un serveur de production

Pour la production, vous avez essentiellement deux options :
  • Avec notre runtime statique HTML/CSS, renommez simplement index.html en vite.html.
  • Utilisez vite preview lui-même (utile pour tester le comportement en production ou dans des conteneurs exécutant directement le processus Node).

​
Runtime HTML/CSS

Si vous choisissez le runtime statique, générez la compilation (npm run build) et copiez le contenu de dist/ dans le fichier zip compressé à envoyer à Square Cloud. N’oubliez pas de renommer index.html en vite.html afin que le runtime reconnaisse correctement le fichier initial comme une application Vite et effectue un traitement approprié des assets.

​
Utiliser vite preview en production (ou dans des conteneurs)

vite preview sert les fichiers générés par vite build avec un comportement similaire à celui d’un serveur statique de production. Pour exposer l’application au réseau (par exemple, au sein d’un conteneur sur Square Cloud), utilisez : 
npx vite preview --host 0.0.0.0 --port 80
Cela fait écouter le processus sur toutes les interfaces (0.0.0.0) et sur le port 80.

​
Exemple de vite.config.js avec les options preview

import { defineConfig } from 'vite'

export default defineConfig({
	preview: {
		host: '0.0.0.0',
		port: 80,
		strictPort: true
	}
})

​
Déploiement

Après avoir préparé les fichiers de votre projet, vous pouvez les envoyer à Square Cloud et héberger votre projet. Pour cela, 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 Vite et ses outils, consultez la documentation officielle de Vite. Vous y trouverez des guides détaillés, des tutoriels et une documentation d’API pour tirer le meilleur parti de Vite.

​
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.