Zum Hauptinhalt springen

​
Einführung

Um auf Square Cloud zu entwickeln und zu hosten, ist es wichtig, einer strukturierten Abfolge von Konfigurationen und Voraussetzungen zu folgen. Dieser technische Leitfaden deckt den gesamten Prozess ab, von der anfänglichen Einrichtung bis zum Produktions-Deployment.

​
Voraussetzungen

  • Square Cloud Konto: Registriere dich über die Registrierungsseite mit deiner E-Mail-Adresse.
  • Aktiver kostenpflichtiger Plan: Stellt dedizierte Ressourcen und optimierte Leistung für deine Anwendung sicher. Sieh dir unsere verfügbaren Pläne an und wähle den passendsten für deine Bedürfnisse.

​
Das Projekt erstellen

Bevor Sie beginnen, stellen Sie sicher, dass Node.js und npm auf Ihrem System installiert sind. Falls nicht, können Sie sie von der offiziellen Node.js-Website herunterladen. Um ein neues Vite-Projekt zu erstellen, führen Sie den folgenden Befehl aus: 
npm create vite@latest my-vite-app
Im obigen Befehl ist my-vite-app der Name Ihres neuen Projekts. Ersetzen Sie ihn durch einen beliebigen Namen für Ihr Projekt. Standardmäßig richtet dieser Befehl ein Vite-Projekt mit JavaScript ein.

​
Auswahl einer bestimmten Vorlage

Mit Vite können Sie verschiedene Vorlagen für Ihr Projekt auswählen. Beim Erstellen eines neuen Projekts können Sie die gewünschte Vorlage über die Option --template angeben. Hier einige Beispiele: Wählen Sie eine Vorlage wie: react, vue und lit. 
npm create vite@latest my-vite-app --template [template]
Wählen Sie die Vorlage, die am besten zu Ihren Anforderungen passt, und passen Sie den Projektnamen nach Bedarf an.

​
Den Unterschied zwischen JavaScript und TypeScript verstehen

Wenn Sie JavaScript wählen, konfiguriert Vite das Projekt mit den Standard-JavaScript-Einstellungen. Wenn Sie hingegen TypeScript wählen, konfiguriert Vite das Projekt mit TypeScript-Einstellungen, einschließlich der Erzeugung einer tsconfig.json-Datei.

​
Das Projekt bauen

Bevor Sie in die Produktion hochladen, erzeugen Sie die Produktionsartefakte mit dem Vite-Build: 
npm run build
Um die Produktionsversion lokal bereitzustellen (nützlich zum Testen in der Bereitstellungsumgebung), empfehlen wir den Befehl vite preview, der die Anwendung auf allen Schnittstellen und Port 80 verfügbar macht: 
npx vite preview --host 0.0.0.0 --port 80
Sie können Ihrer package.json auch ein Skript hinzufügen, um dies zu vereinfachen: 
{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}
Hinweis: Auf einigen Systemen erfordert Port 80 besondere Berechtigungen. Wenn eine Einschränkung besteht, verwenden Sie einen anderen Port (z. B. 8080) und ordnen Sie ihn auf dem Host/Dienst zu.

​
Auswahl eines Produktionsservers

Für die Produktion haben Sie grundsätzlich zwei Möglichkeiten:
  • Mit unserem statischen HTML/CSS-Runtime benennen Sie einfach index.html in vite.html um.
  • Verwenden Sie vite preview selbst (nützlich zum Testen des Produktionsverhaltens oder in Containern, die den Node-Prozess direkt ausführen).

​
HTML/CSS-Runtime

Wenn Sie den statischen Runtime wählen, erzeugen Sie den Build (npm run build) und kopieren den Inhalt von dist/ in die komprimierte ZIP-Datei, die an Square Cloud gesendet werden soll. Denken Sie daran, index.html in vite.html umzubenennen, damit der Runtime die Startdatei korrekt als Vite-Anwendung erkennt und die Assets ordnungsgemäß verarbeitet.

​
vite preview in der Produktion verwenden (oder in Containern)

vite preview stellt die von vite build erzeugten Dateien mit einem Verhalten bereit, das einem statischen Produktionsserver ähnelt. Um die Anwendung im Netzwerk verfügbar zu machen (zum Beispiel innerhalb eines Containers auf Square Cloud), verwenden Sie: 
npx vite preview --host 0.0.0.0 --port 80
Dadurch lauscht der Prozess auf allen Schnittstellen (0.0.0.0) und Port 80.

​
Beispiel für vite.config.js mit preview-Optionen

import { defineConfig } from 'vite'

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

​
Bereitstellen

Nachdem Sie Ihre Projektdateien vorbereitet haben, können Sie sie an Square Cloud senden und Ihr Projekt hosten. Erstellen Sie dazu eine ZIP-Datei, die alle Ihre Projektdateien enthält.

​
Über das Dashboard

1

Upload-Seite aufrufen

Rufe die Upload-Seite auf und lade die ZIP-Datei deines Projekts hoch.
2

Umgebung konfigurieren

Nachdem du deine ZIP-Datei hochgeladen hast, musst du den Namen, die Hauptdatei oder Runtime-Umgebung und weitere Einstellungen für dein Projekt konfigurieren.
Wenn du ein Web-Projekt hochlädst, achte darauf, “Web Publication” auszuwählen und deinem Projekt eine Subdomain zuzuweisen.
3

Projekt bereitstellen

Klicke abschließend auf die Schaltfläche “Deploy”, um dein Projekt auf Square Cloud zu hosten.
Nach dem Deploy kannst du den Status und die Logs deines Projekts über das Dashboard überwachen.
Anwendung wird auf Square Cloud hochgeladen

​
Über die CLI

Um diese Methode zu nutzen, musst du eine Konfigurationsdatei mit dem Namen squarecloud.app im Stammverzeichnis deines Projekts erstellen. Diese Datei enthält die notwendige Konfiguration für dein Projekt.

Mehr erfahren: So erstellst du die Konfigurationsdatei für Square Cloud.

Die Datei squarecloud.app ist eine Konfigurationsdatei, mit der deine Anwendung konfiguriert wird; sie dient dazu, deine Umgebung zu definieren.
1

CLI installieren

Zuerst musst du die CLI in deiner Umgebung installiert haben. Falls du sie noch nicht hast, führe den folgenden Befehl in deinem Terminal aus:
npm install -g @squarecloud/cli
Falls du sie bereits hast, empfehlen wir, sie zu aktualisieren. Führe dazu den folgenden Befehl in deinem Terminal aus:
squarecloud update
2

Authentifizieren

Um dich zu authentifizieren und weitere CLI-Befehle zu nutzen, findest du deinen Autorisierungsschlüssel hier, indem du auf “Request API Key” klickst. Nachdem du deinen Autorisierungsschlüssel erhalten hast, führe den folgenden Befehl aus:
squarecloud auth login
3

Projekt hochladen

Um deine Anwendung schließlich über die CLI auf Square Cloud bereitzustellen, musst du den folgenden Befehl ausführen:
squarecloud upload
Oder falls du die ZIP-Datei manuell erstellt hast, kannst du Folgendes verwenden:
squarecloud upload --file <path/to/zip>

​
Weitere Ressourcen

Weitere Informationen über Vite und seine Werkzeuge finden Sie in der offiziellen Vite-Dokumentation. Dort finden Sie ausführliche Anleitungen, Tutorials und API-Dokumentationen, die Ihnen helfen, das Beste aus Vite herauszuholen.

​
Fehlerbehebung

​
Eigene Domain

Um eine eigene Domain (z. B. mysite.com) anstelle der Standard-URL mysite.squareweb.app zu verwenden, benötigst du den Standard-Plan oder höher. Die Subdomain wird über das Feld SUBDOMAIN in der Konfigurationsdatei festgelegt.

​
Mindestanforderungen an den Arbeitsspeicher

Minimum: 512MB RAM für einfache Websites/APIs. Für Seiten mit Frameworks (Next.JS, React, Vue, Angular usw.) empfehlen wir stets mindestens 1GB RAM. Für größere Anwendungen solltest du mehr RAM zuweisen, damit der Anwendung nicht der Speicher ausgeht und sie abstürzt.

​
Diese Seite konnte nicht gefunden werden.

Prüfe, ob die Subdomain/Domain mit dem übereinstimmt, was im Feld SUBDOMAIN oder in den Einstellungen der eigenen Domain konfiguriert ist. Wenn du die Seite gerade erst hochgeladen hast, warte bis zu 60 Sekunden, bis Square den ersten Zugriff aktiviert.

​
Die Seite hat zu lange zum Antworten gebraucht…

Prüfe, ob du in der Anwendung Port 80 und Host 0.0.0.0 korrekt konfiguriert hast. Wir empfehlen die Verwendung der von Square erzwungenen Umgebungsvariablen: PORT und HOST aus der .env-Datei.

​
Kontaktiere uns

Falls du weiterhin technische Schwierigkeiten hast, steht dir unser spezialisiertes Support-Team zur Verfügung. Kontaktiere uns und wir helfen dir gerne, jedes Problem zu lösen.