Vai al contenuto principale

​
Introduzione

Per sviluppare e ospitare su Square Cloud, è essenziale seguire una sequenza strutturata di configurazioni e prerequisiti. Questa guida tecnica coprirà l’intero processo, dalla configurazione iniziale al deploy in produzione.

​
Prerequisiti

  • Account Square Cloud: Registrati tramite la pagina di registrazione usando la tua email.
  • Piano a pagamento attivo: Garantisce risorse dedicate e prestazioni ottimizzate per la tua applicazione. Consulta i nostri piani disponibili e scegli quello più adatto alle tue esigenze.

​
Creazione del progetto

Prima di iniziare, assicurati di avere Node.js e npm installati sul tuo sistema. Se non li hai, puoi scaricarli dal sito ufficiale di Node.js. Per creare un nuovo progetto Vite, esegui il seguente comando: 
npm create vite@latest my-vite-app
Nel comando qui sopra, my-vite-app è il nome del tuo nuovo progetto. Sostituiscilo con qualsiasi nome desideri per il tuo progetto. Per impostazione predefinita, questo comando configura un progetto Vite con JavaScript.

​
Scegliere un template specifico

Vite ti permette di scegliere diversi template per il tuo progetto. Quando crei un nuovo progetto, puoi specificare il template desiderato usando l’opzione --template. Ecco alcuni esempi: Seleziona un template come: react, vue e lit. 
npm create vite@latest my-vite-app --template [template]
Scegli il template che meglio si adatta alle tue esigenze e modifica il nome del progetto se necessario.

​
Comprendere la differenza tra JavaScript e TypeScript

Quando scegli JavaScript, Vite configura il progetto con le impostazioni JavaScript predefinite. Al contrario, quando scegli TypeScript, Vite configura il progetto con le impostazioni TypeScript, inclusa la generazione di un file tsconfig.json.

​
Compilazione del progetto

Prima di caricare in produzione, genera gli artefatti di produzione usando la build di Vite: 
npm run build
Per servire localmente la versione di produzione (utile per testare nell’ambiente di distribuzione), consigliamo di usare il comando vite preview, esponendo l’applicazione su tutte le interfacce e sulla porta 80: 
npx vite preview --host 0.0.0.0 --port 80
Puoi anche aggiungere uno script al tuo package.json per semplificare: 
{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}
Nota: su alcuni sistemi, la porta 80 richiede privilegi speciali. Se c’è una restrizione, usa un’altra porta (ad esempio, 8080) e mappala sull’host/servizio.

​
Scegliere un server di produzione

Per la produzione hai fondamentalmente due opzioni:
  • Con il nostro runtime statico HTML/CSS, rinomina semplicemente index.html in vite.html.
  • Usa vite preview stesso (utile per testare il comportamento di produzione o in container che eseguono direttamente il processo Node).

​
Runtime HTML/CSS

Se scegli il runtime statico, genera la build (npm run build) e copia il contenuto di dist/ nel file zip compresso da inviare a Square Cloud. Ricorda di rinominare index.html in vite.html in modo che il runtime riconosca correttamente il file iniziale come un’applicazione Vite ed esegua una gestione corretta degli asset.

​
Usare vite preview in produzione (o nei container)

vite preview serve i file generati da vite build con un comportamento simile a un server statico di produzione. Per esporre l’applicazione alla rete (ad esempio, all’interno di un container su Square Cloud) usa: 
npx vite preview --host 0.0.0.0 --port 80
Questo fa sì che il processo ascolti su tutte le interfacce (0.0.0.0) e sulla porta 80.

​
Esempio di vite.config.js con opzioni preview

import { defineConfig } from 'vite'

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

​
Distribuzione

Dopo aver preparato i file del tuo progetto, puoi inviarli a Square Cloud e ospitare il tuo progetto. Per farlo, crea un file ZIP contenente tutti i file del tuo progetto.

​
Tramite dashboard

1

Accedi alla pagina di upload

Accedi alla pagina di upload e carica il file zip del tuo progetto.
2

Configura il tuo ambiente

Dopo aver caricato il tuo zip, dovrai configurare il nome, il file principale o il runtime environment e altre impostazioni per il tuo progetto.
Se stai caricando un progetto web, assicurati di selezionare “Web Publication” e di impostare un sottodominio per il tuo progetto.
3

Esegui il deploy del tuo progetto

Infine, clicca sul pulsante “Deploy” per ospitare il tuo progetto su Square Cloud.
Dopo il deploy, puoi monitorare lo stato e i log del tuo progetto dalla dashboard.
Caricamento dell'applicazione su Square Cloud

​
Tramite CLI

Per utilizzare questo metodo, devi creare un file di configurazione chiamato squarecloud.app nella directory principale del tuo progetto. Questo file conterrà la configurazione necessaria per il tuo progetto.

Scopri di più su: come creare il file di configurazione per Square Cloud.

Il file squarecloud.app è un file di configurazione che verrà utilizzato per configurare la tua applicazione; verrà usato per definire il tuo ambiente.
1

Installa la CLI

Per prima cosa, devi avere la CLI installata nel tuo ambiente. Se non la hai ancora, esegui il seguente comando nel tuo terminale:
npm install -g @squarecloud/cli
Se la hai già, ti consigliamo di aggiornarla. Per farlo, esegui il seguente comando nel tuo terminale:
squarecloud update
2

Autenticati

Ora, per autenticarti e utilizzare gli altri comandi della CLI, troverai la tua chiave di autorizzazione qui cliccando su “Request API Key”. Dopo aver ottenuto la tua chiave di autorizzazione, esegui il seguente comando:
squarecloud auth login
3

Carica il tuo progetto

Infine, per eseguire il deploy della tua applicazione su Square Cloud tramite la CLI, devi eseguire il seguente comando:
squarecloud upload
Oppure, se hai creato lo zip manualmente, puoi usare:
squarecloud upload --file <path/to/zip>

​
Risorse aggiuntive

Per maggiori informazioni su Vite e i suoi strumenti, visita la documentazione ufficiale di Vite. Lì troverai guide dettagliate, tutorial e documentazione delle API per aiutarti a sfruttare al meglio Vite.

​
Risoluzione dei problemi

​
Dominio personalizzato

Per utilizzare un dominio personalizzato (ad esempio, mysite.com) invece dell’URL predefinito mysite.squareweb.app, hai bisogno del piano Standard o superiore. Il sottodominio è definito dal campo SUBDOMAIN nel file di configurazione.

​
Requisiti minimi di RAM

Minimo: 512MB di RAM per siti web/API semplici. Per siti con framework (Next.JS, React, Vue, Angular, ecc.), consigliamo sempre almeno 1GB di RAM. Per applicazioni più grandi, alloca più RAM per evitare che l’applicazione esaurisca la memoria e si arresti in modo anomalo.

​
Impossibile trovare questo sito.

Verifica che il sottodominio/dominio corrisponda a quanto configurato nel campo SUBDOMAIN o nelle impostazioni del dominio personalizzato. Se hai appena caricato il sito, attendi fino a 60 secondi affinché Square abiliti il primo accesso.

​
Il sito ha impiegato troppo tempo per rispondere…

Verifica di aver configurato correttamente la porta 80 e l’host 0.0.0.0 nell’applicazione. Consigliamo di utilizzare le variabili d’ambiente forzate di Square: PORT e HOST dal file .env.

​
Contattaci

Se continui a riscontrare difficoltà tecniche, il nostro team di supporto specializzato è disponibile ad assisterti. Contattaci e saremo felici di aiutarti a risolvere qualsiasi problema.