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.

​
Projekt erstellen

Stelle vor dem Start sicher, dass Node.js (>=20) und npm auf deinem System installiert sind. Falls noch nicht vorhanden, lade sie von der offiziellen Node.js-Website herunter. Initialisiere ein neues Qwik-Projekt mit dem offiziellen Initializer: 
npm create qwik@latest
Folge den Anweisungen, um Qwik City (vollständige Anwendung) oder Qwik App (statisch) sowie alle benötigten Integrationen auszuwählen.

​
Abhängigkeiten installieren

Wechsle nach der Erstellung in das Projekt und installiere die Abhängigkeiten: 
cd my-qwik-app
npm install
Wenn du Qwik City ausgewählt hast, enthält dein Projekt Server-Einstiegspunkte und Adapter für Node, Cloudflare usw.

​
Projekt entwickeln

Starte den Entwicklungsserver: 
npm run dev
Der Entwicklungsserver läuft üblicherweise unter http://localhost:5173 (Vite-Standard) oder wie in der Ausgabe des Initializers angezeigt. Erstelle eine einfache Seite in src/routes/index.tsx (Qwik City) oder in src/components/ für Komponenten: 
export default function Index() {
  return <h1>Hello from Qwik!</h1>;
}

​
Projekt bauen

Erstelle deine Produktionsausgabe, bevor du sie hochlädst: 
npm run build
Wenn du Qwik City mit einem Adapter verwendest (zum Beispiel @builder.io/qwik-city/middleware/node), verweist dein Produktions-Startbefehl auf den gebauten Server-Einstiegspunkt, üblicherweise etwa so: 
node build/index.mjs
Für rein statische Seiten kannst du einen Server verwenden.

​
Einen Produktionsserver wählen

Um dein Qwik in der Produktion auszuliefern, benötigst du einen Server. Du kannst einen eigenen erstellen oder vorhandene verwenden.

​
Express-Bibliothek

Um dein statisches Projekt auf Square Cloud bereitzustellen, stelle sicher, dass dein Server statische Dateien korrekt ausliefert. Um Node.js mit Express zu verwenden, ist ein gängiges Setup:
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'));
Passe die dist Pfadparameter an den Build-Ordner deines Projekts an. Wenn er sich in einem Ordner innerhalb von build oder dist befindet, verwende stattdessen dessen Pfad.

​
Serve-Bibliothek

​
Die Serve-Bibliothek installieren

Um die serve-Bibliothek zu installieren, navigieren Sie im Terminal in Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus: 
npm install serve@14.2.3
Dieser Befehl installiert Version 14.2.3 der serve-Bibliothek. Wenn Sie die aktuellste Version installieren möchten, können Sie das @14.2.3 weglassen.

​
Das Startskript konfigurieren

Nachdem Sie die serve-Bibliothek installiert haben, müssen Sie das Startskript Ihres Projekts so konfigurieren, dass es serve verwendet. Öffnen Sie dazu die package.json-Datei Ihres Projekts und fügen Sie ein neues Skript namens start:prod hinzu: 
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
Im start:prod-Skript bewirkt serve -s build -l 80 Folgendes:
  • serve: Dies ist der Befehl, um den serve-Server zu starten.
  • -s dist: Die Option -s stellt das Verzeichnis dist im Single-Page-Application-Modus bereit. Das bedeutet, dass alle nicht gefundenen Anfragen zu index.html umgeleitet werden. Das Verzeichnis dist wird üblicherweise erstellt, wenn Sie npm run build ausführen.
  • -l 80: Die Option -l gefolgt von 80 weist serve an, auf Port 80 zu lauschen. Port 80 ist der Standardport für HTTP-Verkehr.
Passen Sie den Parameter dist an den Build-Ordner Ihres Projekts an. Wenn er sich in einem Ordner innerhalb von build oder dist befindet, verwenden Sie stattdessen dessen Pfad.

​
Bereitstellen

Nachdem du deine Projektdateien vorbereitet hast, kannst du sie nun auf Square Cloud hochladen und dein Projekt hosten. Erstelle dazu eine ZIP-Datei, die alle deine 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

Für weitere Informationen über Qwik besuche die offizielle Dokumentation hier.

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