Ein Date mit Daytona: AstroJS und Sanity CMS erkunden

Kürzlich habe ich während der Arbeit an meiner Blog-Anwendung Daytona – einen leistungsstarken Entwicklungsumgebungsmanager – durch die laufende Quest 23 auf quira.sh entdeckt. In diesem Blog werden wir untersuchen, wie AstroJS, Sanity und Daytona den Entwicklungsprozess dieser Blog-Anwendung erheblich verbessert haben.

---

Was ist Daytona?

Daytona ist ein Open-Source-Development Environment Manager (DEM), der die Verwaltung und Bereitstellung von Entwicklungsumgebungen, sogenannten Workspaces, rationalisieren soll. Diese Arbeitsbereiche basieren auf Docker-Containern und sind vollständig kompatibel mit dem DevContainer-Standard.

Hauptmerkmale von Daytona:

• Modulare Architektur: Ermöglicht Kompatibilität mit Konfigurationsstandards wie Dockerfiles, Docker Compose, Nix und Devfile.

• Vereinfachte Bereitstellung: Stellen Sie voll funktionsfähige Entwicklungsumgebungen mit einem einzigen Befehl bereit, während Daytona alle zugrunde liegenden Komplexitäten für Sie verwaltet.

• DevContainers Foundation: Nutzt den vielseitigen DevContainers-Standard zum Definieren und Verwalten cloudbasierter Entwicklungsumgebungen.

---

DevContainer und Konfiguration

Der DevContainers-Standard ermöglicht Ihnen die einfache Konfiguration Ihrer Entwicklungsumgebung mithilfe einer devcontainer.json-Datei, die im Ordner .devcontainer in Ihrem Repository abgelegt wird.

Vorteile von DevContainern:

Mit DevContainern können Sie benutzerdefinierte, funktionsreiche und optimierte Entwicklungsumgebungen definieren, die auf Ihre spezifischen Anforderungen zugeschnitten sind. Es unterstützt auch Dockerfile- und Docker Compose-Konfigurationen für eine nahtlose Integration.

Weitere Informationen finden Sie unter DevContainer und ihren Funktionen.

Beispiel einer devcontainer.json

Hier ist eine Beispielkonfiguration für ein Projekt mit AstroJS und Sanity:

{
    "name": "Astro + Sanity Dev Container",
    "image": "mcr.microsoft.com/devcontainers/typescript-node:latest",
    "features": {
        "ghcr.io/devcontainers/features/node:1": {
            "version": "20",
            "pnpmVersion": "9.12.2"
        },
        "ghcr.io/devcontainers/features/git:1": {}
    },
    "forwardPorts": [4321, 3333],
    "customizations": {
        "vscode": {
            "extensions": [
                "astro-build.astro-vscode",
                "esbenp.prettier-vscode",
                "dbaeumer.vscode-eslint",
                "eamodio.gitlens",
                "styled-components.vscode-styled-components",
                "ms-vscode.vscode-typescript-next"
            ],
            "settings": {
                "astro.enableAutoImport": true,
                "editor.formatOnSave": true,
                "typescript.tsdk": "/node_modules/typescript/lib",
                "eslint.format.enable": true,
                "files.eol": "\n",
                "prettier.requireConfig": true
            }
        }
    },
    "containerEnv": {
        "NODE_ENV": "development",
        "PNPM_HOME": "/tmp/pnpm-store"
    },
    "postCreateCommand": {
        "install-dependencies": "pnpm config set store-dir /tmp/pnpm-store && pnpm install",
        "env-file-create": "/bin/bash ./create-env-file.sh"
    },
    "portsAttributes": {
        "3333": { "label": "Sanity Studio" },
        "4321": { "label": "Astro Dev Port" }
    }
}

Schlüsselabschnitte:

• image: Gibt das Basisimage für die Entwicklungsumgebung an.
• Funktionen: Fügt dem Container vorkonfigurierte Tools oder Dienstprogramme hinzu.
• forwardPorts: Ordnet Ports vom Container dem Host-Computer zu.
• Anpassungen: Gibt Editorkonfigurationen an, z. B. Erweiterungen, Einstellungen und Formatierungseinstellungen, insbesondere für VS-Code.
• containerEnv: Legt Umgebungsvariablen für den Container fest.
• postCreateCommand: Führt Befehle aus, nachdem der Container erstellt wurde (z. B. Abhängigkeiten installieren).
• portsAttributes: Bezeichnungen für bestimmte Ports, die in der Entwicklung verwendet werden.

Weitere Konfigurationsoptionen finden Sie in der DevContainer-JSON-Referenz.

---

Voraussetzungen für Daytona

Bevor Sie Daytona herunterladen, müssen einige Voraussetzungen erfüllt sein:

• Docker
• Texteditor/IDE wie VSCode, JetBrains usw.
• SSH-Client, erforderlich für den Zugriff auf Remote-Server

Laden Sie Daytona herunter

Daytona ist für alle gängigen Betriebssysteme verfügbar. Befolgen Sie zur Einrichtung die Installationsanleitung.

Verwenden Sie dann den folgenden Befehl, um Daytona zu starten:

daytona

---

Start in Daytona

Um Daytona zu starten, müssen Sie den Serverprozess entweder im Daemon-Modus oder in der aktuellen Terminalsitzung starten.

Hinweis: Stellen Sie sicher, dass der Docker-Daemon auch im Hintergrund läuft.

• Starten Sie den Daytona-Serverprozess im Daemon-Modus:

daytona server start

Hinweis: Der Daytona Daemon-Modus wird auf Windows-Rechnern nicht unterstützt. Sie müssten den folgenden Befehl verwenden, um den Server in Ihrer aktuellen Terminalsitzung zu starten:

daytona serve

---

Hinzufügen Ihrer Git-Anbieter

Um Ihren Git-Anbieter (z. B. GitHub, GitLab) zu verbinden, verwenden Sie den folgenden Befehl:

daytona git-providers add

Folgen Sie den Anweisungen auf dem Bildschirm, um Ihre Git-Profile zu integrieren. Nach Abschluss können Sie auf Projekte zugreifen, die in Ihren Git-Repositorys gehostet werden.

---

Einrichten Ihrer IDE

Daytona ermöglicht die Ausführung der Entwicklungsumgebung auf jeder der gängigen IDEs. Führen Sie einfach den folgenden Befehl aus und wählen Sie die IDE Ihrer Wahl:

daytona ide

---

Daytona für die Entwicklung nutzen

Um Daytona effizient nutzen zu können, benötigen Sie ein Projekt mit einer devcontainer.json-Datei, die in einem .devcontainer-Ordner in Ihrem Repository abgelegt wird.

Aus Gründen der Benutzerfreundlichkeit verwenden wir dieses Projekt.

Befehle für den Einstieg in Daytona:

• Erstellen Sie einen Entwicklungscontainer mit detaillierter Kontrolle darüber, ob Sie Ihre Umgebung wie ein bestimmtes Projekt starten oder eines der Beispielprojekte ausprobieren:

{
    "name": "Astro + Sanity Dev Container",
    "image": "mcr.microsoft.com/devcontainers/typescript-node:latest",
    "features": {
        "ghcr.io/devcontainers/features/node:1": {
            "version": "20",
            "pnpmVersion": "9.12.2"
        },
        "ghcr.io/devcontainers/features/git:1": {}
    },
    "forwardPorts": [4321, 3333],
    "customizations": {
        "vscode": {
            "extensions": [
                "astro-build.astro-vscode",
                "esbenp.prettier-vscode",
                "dbaeumer.vscode-eslint",
                "eamodio.gitlens",
                "styled-components.vscode-styled-components",
                "ms-vscode.vscode-typescript-next"
            ],
            "settings": {
                "astro.enableAutoImport": true,
                "editor.formatOnSave": true,
                "typescript.tsdk": "/node_modules/typescript/lib",
                "eslint.format.enable": true,
                "files.eol": "\n",
                "prettier.requireConfig": true
            }
        }
    },
    "containerEnv": {
        "NODE_ENV": "development",
        "PNPM_HOME": "/tmp/pnpm-store"
    },
    "postCreateCommand": {
        "install-dependencies": "pnpm config set store-dir /tmp/pnpm-store && pnpm install",
        "env-file-create": "/bin/bash ./create-env-file.sh"
    },
    "portsAttributes": {
        "3333": { "label": "Sanity Studio" },
        "4321": { "label": "Astro Dev Port" }
    }
}

• Starten Sie einen Entwicklungscontainer direkt aus einem Git-Repository:

daytona

Die Protokolle des Entwicklungscontainers werden in der Konsole angezeigt:

Nachdem Sie eine Weile gewartet haben, sehen Sie eine Erfolgsmeldung und ein neues geöffnetes Fenster Ihrer gewählten IDE mit einer bereits eingerichteten SSH-Verbindung zum Entwicklungscontainer, wo Sie mit der Entwicklung Ihres Projekts beginnen können, wie Sie es auf Ihrem tun würden nativer PC oder Laptop.

---

Entwickeln mit Daytona

Wir werden der README.md unseres Beispiel-AstroJS Sanity-Blogs folgen, um mit der Entwicklung mit Daytona zu beginnen.

Nächste Schritte: Anmeldeinformationen für Sanity generieren und Umgebungsvariablen einrichten

1. Melden Sie sich bei Sanity an: Melden Sie sich zunächst bei Ihrem Sanity-Konto an und erstellen Sie ein neues Projekt, um loszulegen.

2. Generieren Sie ein API-Token: Navigieren Sie zum API-Bereich in Ihren Sanity-Projekteinstellungen und erstellen Sie ein neues Token. Dadurch wird der Schlüssel bereitgestellt, der zum Einrichten der Umgebungsvariablen erforderlich ist.

Sobald das API-Token generiert wurde, verwenden Sie es, um die Umgebungsvariablen Ihres Projekts wie in der Dokumentation beschrieben zu konfigurieren.

Ausführen des Projekts

Führen Sie nun die folgenden Befehle in einem separaten Terminalfenster aus:

Um unsere AstroJS-Anwendung zu starten, führen Sie den folgenden Befehl aus:

daytona server start

Die AstroJS-Anwendung ist das Frontend, in dem wir die Blogs lesen können, die wir über das Backend, d. h. Sanity CMS, veröffentlichen!

Um auf unser Sanity Studio zuzugreifen, führen Sie den folgenden Befehl aus:

{
    "name": "Astro + Sanity Dev Container",
    "image": "mcr.microsoft.com/devcontainers/typescript-node:latest",
    "features": {
        "ghcr.io/devcontainers/features/node:1": {
            "version": "20",
            "pnpmVersion": "9.12.2"
        },
        "ghcr.io/devcontainers/features/git:1": {}
    },
    "forwardPorts": [4321, 3333],
    "customizations": {
        "vscode": {
            "extensions": [
                "astro-build.astro-vscode",
                "esbenp.prettier-vscode",
                "dbaeumer.vscode-eslint",
                "eamodio.gitlens",
                "styled-components.vscode-styled-components",
                "ms-vscode.vscode-typescript-next"
            ],
            "settings": {
                "astro.enableAutoImport": true,
                "editor.formatOnSave": true,
                "typescript.tsdk": "/node_modules/typescript/lib",
                "eslint.format.enable": true,
                "files.eol": "\n",
                "prettier.requireConfig": true
            }
        }
    },
    "containerEnv": {
        "NODE_ENV": "development",
        "PNPM_HOME": "/tmp/pnpm-store"
    },
    "postCreateCommand": {
        "install-dependencies": "pnpm config set store-dir /tmp/pnpm-store && pnpm install",
        "env-file-create": "/bin/bash ./create-env-file.sh"
    },
    "portsAttributes": {
        "3333": { "label": "Sanity Studio" },
        "4321": { "label": "Astro Dev Port" }
    }
}

Das Sanity Studio wird zum Verwalten von Inhalten für unsere AstroJS-Anwendung verwendet. Wir können die Daten für unsere AstroJS-Anwendung direkt im Sanity Studio erstellen, löschen und bearbeiten.

---

Abschluss

Mit nur einem Tool können wir eine vollwertige Entwicklungsumgebung einrichten, die alle Funktionen eines nativen Setups bietet. Egal, ob Sie ein erfahrener Entwickler sind oder gerade erst anfangen, die robusten Funktionen und die nahtlose Integration von Daytona mit modernen Tools wie AstroJS und Sanity sind eine Erkundung wert.

Meine Entwicklungsreise mit Daytona war außergewöhnlich und ich habe umfassende Kenntnisse über DevContainer, Docker und Entwicklungsumgebungen im Allgemeinen erworben.

Schauen Sie sich diese an und markieren Sie sie – sie sind Open Source: Daytona!

Sie können auch gerne mein Beispielprojekt auf Daytona erkunden: AstroJS Sanity Blog.

Das obige ist der detaillierte Inhalt vonEin Date mit Daytona: AstroJS und Sanity CMS erkunden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!