Déployer une application Vue

Introduction

Pour développer et héberger une application Vue 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 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.

Ce guide utilise le runtime statique ou le runtime Node.js. Testé avec Vue 3 et Vite 8 sur Node.js 24 en septembre 2026.

Créer le projet

Vous avez besoin de Node.js et de npm sur votre machine. Si ce n’est pas le cas, téléchargez-les depuis le site officiel de Node.js. Créez un projet avec l’initialiseur officiel, create-vue :

npm create vue@latest

L’initialiseur vous demande le nom du projet et les fonctionnalités souhaitées, comme TypeScript et Vue Router. Entrez ensuite dans le dossier du projet et installez les dépendances :

cd <your-project-name>
npm install

Générer le build de production

npm run build

Vite, l’outil de build des projets create-vue, écrit les fichiers de production dans le dossier dist/.

Choisir comment le servir

Une application Vue générée ainsi est un site statique : des fichiers HTML, CSS et JavaScript que n’importe quel serveur web peut distribuer. Choisissez l’une de ces options :

Runtime statique (recommandé)
Serveur Express
Paquet serve

Le runtime statique sert les fichiers de votre build avec un serveur web géré par Square Cloud. Aucun processus Node.js ne tourne : c’est la façon la plus légère d’héberger un site sans code côté serveur.

Générez le build du site

Exécutez npm run build. Le résultat est placé dans le dossier dist.

Préservez les routes côté client

Si votre application change de page dans le navigateur sans rechargement (routage côté client), renommez dist/index.html en vite.html. Le runtime statique répond à tout chemin qui ne correspond pas à un fichier avec vite.html, donc actualiser une route comme /about charge toujours votre application. Un site avec un fichier HTML par page conserve index.html : les chemins inconnus renvoient alors votre 404.html. Consultez comment le runtime statique sert les fichiers.

Ajoutez le fichier de configuration

Créez un fichier squarecloud.app dans dist. Un MAIN qui pointe vers un fichier HTML sélectionne le runtime statique :

squarecloud.app

MAIN=vite.html
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

Utilisez MAIN=index.html si vous avez conservé index.html. 512 Mo est la mémoire minimale pour un site web. Lorsque vous importez via le tableau de bord, celui-ci vous demande ces valeurs et écrit le fichier pour vous.

Compressez le résultat du build

Compressez le contenu de dist, et non le dossier lui-même, afin que squarecloud.app se trouve à la racine du ZIP. Avec la CLI, exécutez squarecloud upload depuis dist.

Tout le contenu du ZIP est public sur votre site. N’importez que le résultat du build, jamais votre code source ni vos fichiers .env.

La plupart des outils de build vident dist à chaque build. Gardez une copie de squarecloud.app dans le dossier que votre framework copie tel quel dans le build (public/ dans les projets basés sur Vite), ou répétez les trois dernières étapes après chaque build.

Cette option exécute un petit serveur Express sur le runtime Node.js. Installez Express comme dépendance normale, et non comme devDependency, car Square Cloud n’installe pas ces dernières :

npm install express

Créez un fichier server.mjs à la racine de votre projet. Il sert le dossier de sortie du build, dist, et renvoie index.html pour tout autre chemin afin que le routage côté client continue de fonctionner :

server.mjs

import express from 'express';
import path from 'node: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'));
});

// Square Cloud sets PORT=80; 0.0.0.0 accepts connections from outside the container
const port = Number(process.env.PORT) || 80;
app.listen(port, '0.0.0.0', () => console.log(`Server running on port ${port}`));

Pour le tester sur votre machine, choisissez un port libre : PORT=3000 node server.mjs.Créez un fichier squarecloud.app à la racine de votre projet. Square Cloud démarre votre site avec node server.mjs :

squarecloud.app

MAIN=server.mjs
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

Exécutez npm run build avant de créer votre ZIP. Le ZIP doit contenir server.mjs, package.json, squarecloud.app et le dossier dist, sans node_modules : Square Cloud installe vos dépendances au premier démarrage. Les outils de build sont généralement des devDependencies, que Square Cloud n’installe pas, donc le build doit être exécuté sur votre machine.

Cette option exécute le paquet serve sur le runtime Node.js, sans code serveur à écrire. Installez-le comme dépendance normale :

npm install serve

Ajoutez un script start:prod aux scripts de votre package.json, à côté de ceux que vous avez déjà :

package.json

"scripts": {
  "start:prod": "serve -s dist"
}

serve -s dist sert le dossier de sortie du build, dist, en mode application monopage : tout chemin qui ne correspond pas à un fichier renvoie index.html, afin que le routage côté client continue de fonctionner. serve écoute sur toutes les interfaces réseau, sur le port indiqué dans la variable d’environnement PORT, que Square Cloud définit à 80 (en local, il utilise 3000 par défaut).Créez un fichier squarecloud.app à la racine de votre projet :

squarecloud.app

RUNTIME=nodejs
START=npm run start:prod
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

RUNTIME=nodejs sélectionne le runtime Node.js sans fichier MAIN, et START remplace la commande de démarrage par défaut.Exécutez npm run build avant de créer votre ZIP. Le ZIP doit contenir package.json, squarecloud.app et le dossier dist, sans node_modules : Square Cloud installe vos dépendances au premier démarrage. Les outils de build sont généralement des devDependencies, que Square Cloud n’installe pas, donc le build doit être exécuté sur votre machine.

Besoin du rendu côté serveur avec Vue ? Suivez le guide Nuxt.

Déployer et vérifier

Créez le ZIP décrit dans l’option choisie, puis envoyez-le :

Via le tableau de bord

Accéder à la page d'upload

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

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.

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

Confirmez que votre application est en ligne

Votre premier déploiement prend généralement moins d’une minute. Dans le tableau de bord, attendez que le statut de votre application affiche « en cours d’exécution » et vérifiez les logs pour détecter d’éventuelles erreurs de démarrage.
Si vous avez déployé un site web ou une API, ouvrez https://<votre-sous-domaine>.squareweb.app dans votre navigateur, vous devriez voir votre application répondre. Si vous avez déployé un bot, envoyez-lui une commande pour confirmer qu’il est en ligne.

Votre application ne démarre pas ? Consultez le guide de dépannage pour les causes les plus courantes et leurs solutions.

Via la CLI

Pour utiliser cette méthode, votre projet a besoin d’un fichier de configuration nommé squarecloud.app à sa racine. Il indique à Square Cloud comment exécuter votre application.

Guide du fichier de configuration

Apprenez comment créer le fichier de configuration squarecloud.app qui définit l’environnement de votre application.

Installer la CLI

Installez la CLI Square Cloud. Si vous l’avez déjà, exécutez la même commande pour la mettre à jour :

curl -fsSL https://cli.squarecloud.app/install | bash

npm install -g @squarecloud/cli@latest

Se connecter

Exécutez la commande ci-dessous. Elle ouvre votre navigateur : approuvez-y la connexion et la CLI est prête. Il n’y a aucune clé API à copier. Pour les scripts et la CI, consultez Authentification de la CLI.

squarecloud auth login

Téléverser votre projet

Depuis le dossier de votre projet, exécutez la commande ci-dessous. La CLI compresse le dossier courant en zip, sans ce que liste squarecloud.ignore, puis l’envoie :

squarecloud upload

Pour téléverser un zip que vous avez créé vous-même, passez-le avec --file :

squarecloud upload --file <path/to/zip>

Confirmez que votre application est en ligne

Votre premier déploiement prend généralement moins d’une minute. Vérifiez le statut et les logs de votre application directement depuis le terminal :

squarecloud app status
squarecloud app logs

Si vous avez déployé un site web ou une API, ouvrez https://<votre-sous-domaine>.squareweb.app dans votre navigateur, vous devriez voir votre application répondre. Si vous avez déployé un bot, envoyez-lui une commande pour confirmer qu’il est en ligne.

Votre application ne démarre pas ? Consultez le guide de dépannage pour les causes les plus courantes et leurs solutions.

Erreurs courantes

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. L’URL par défaut provient du champ SUBDOMAIN du fichier de configuration. Pour connecter votre domaine, suivez comment configurer votre propre domaine.

Prérequis minimum en RAM

Minimum : 512 Mo de RAM pour les sites web et les API, ce qui suffit pour un build statique sur le runtime statique. Pour les applications qui génèrent les pages sur un serveur (Next.js, Nuxt, Angular SSR et similaires), nous recommandons 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…

Votre serveur doit écouter sur le port 80 et l’hôte 0.0.0.0. Square Cloud définit les variables d’environnement PORT (80) et HOST (0.0.0.0) dans votre application : lisez-les dans votre code au lieu de coder en dur d’autres valeurs. Un serveur qui n’écoute que sur localhost ou 127.0.0.1 ne reçoit jamais de requêtes.

Actualiser une route renvoie une erreur 404

Votre application utilise Vue Router en mode history et le serveur ne connaît pas la route. Sur le runtime statique, renommez index.html en vite.html. Les options Express et serve ci-dessus renvoient déjà index.html pour les chemins inconnus.

Prochaines étapes

Variables d'environnement

Gardez les secrets et les paramètres hors de votre code et lisez-les à l’exécution.

Domaine personnalisé

Servez votre application sur votre propre domaine, à partir du plan Standard.

Dépannage

Corrigez une application qui ne démarre pas ou un site qui ne répond pas.

Pour en savoir plus sur Vue, consultez la documentation officielle de Vue.

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. La qualité du support compte pour beaucoup dans la note que les développeurs donnent à Square Cloud, 4,9/5 sur 402 avis sur Google et Trustpilot.

Bots

Sites web

API et backends

Bases de données

Applications auto-hébergées

Guides

Guides de migration

Déployer une application Vue

Introduction

Prérequis

Créer le projet

Générer le build de production

Choisir comment le servir

Déployer et vérifier

Via le tableau de bord

Via la CLI

Guide du fichier de configuration

Erreurs courantes

Domaine personnalisé

Prérequis minimum en RAM

Impossible de trouver ce site.

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

Actualiser une route renvoie une erreur 404

Prochaines étapes

Variables d'environnement

Domaine personnalisé

Dépannage

Contactez-nous

​Introduction

​Prérequis

​Créer le projet

​Générer le build de production

​Choisir comment le servir

​Déployer et vérifier

​Via le tableau de bord

​Via la CLI

Guide du fichier de configuration

​Erreurs courantes

​Domaine personnalisé

​Prérequis minimum en RAM

​Impossible de trouver ce site.

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

​Actualiser une route renvoie une erreur 404

​Prochaines étapes

Variables d'environnement

Domaine personnalisé

Dépannage

​Contactez-nous

Introduction

Prérequis

Créer le projet

Générer le build de production

Choisir comment le servir

Déployer et vérifier

Via le tableau de bord

Via la CLI

Erreurs courantes

Domaine personnalisé

Prérequis minimum en RAM

Impossible de trouver ce site.

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

Actualiser une route renvoie une erreur 404

Prochaines étapes

Contactez-nous