Un rendez-vous avec Daytona : explorer AstroJS et Sanity CMS

Récemment, alors que je travaillais sur mon application de blog, j'ai découvert Daytona, un puissant gestionnaire d'environnement de développement, grâce à la Quest 23 en cours sur quira.sh. Dans ce blog, nous explorerons comment AstroJS, Sanity et Daytona ont considérablement amélioré le processus de développement de cette application de blog.

---

Qu’est-ce que Daytona ?

Daytona est un Development Environment Manager (DEM) open source conçu pour rationaliser la gestion et le déploiement des environnements de développement, connus sous le nom de Workspaces. Ces espaces de travail sont construits sur des conteneurs Docker et sont entièrement compatibles avec le standard DevContainer.

Principales caractéristiques du Daytona :

• Architecture modulaire : permet la compatibilité avec les normes de configuration telles que Dockerfiles, Docker Compose, Nix et Devfile.

• Déploiement simplifié : déployez des environnements de développement entièrement fonctionnels à l'aide d'une seule commande, tandis que Daytona gère toutes les complexités sous-jacentes pour vous.

• DevContainers Foundation : utilise la norme polyvalente DevContainers pour définir et gérer des environnements de développement basés sur le cloud.

---

DevContainers et configuration

Le standard DevContainers vous permet de configurer facilement votre environnement de développement à l'aide d'un fichier devcontainer.json placé sous le dossier .devcontainer de votre référentiel.

Avantages des DevContainers :

DevContainers vous permettent de définir des environnements de développement personnalisés, riches en fonctionnalités et optimisés, adaptés à vos besoins spécifiques. Il prend également en charge les configurations Dockerfile et Docker Compose pour une intégration transparente.

Pour plus de détails, explorez DevContainers et leurs fonctionnalités.

Exemple de devcontainer.json

Voici un exemple de configuration pour un projet utilisant AstroJS et 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" }
    }
}

Sections clés :

• image : Spécifie l'image de base pour l'environnement de développement.
• fonctionnalités : ajoute des outils ou des utilitaires préconfigurés au conteneur.
• forwardPorts : mappe les ports du conteneur vers la machine hôte.
• personnalisations : spécifie les configurations de l'éditeur, telles que les extensions, les paramètres et les préférences de formatage, en particulier pour VS Code.
• containerEnv : définit les variables d'environnement pour le conteneur.
• postCreateCommand : exécute des commandes après la création du conteneur (par exemple, installer les dépendances).
• portsAttributes : étiquettes pour les ports spécifiques utilisés dans le développement.

Pour plus d'options de configuration, consultez la référence DevContainer JSON.

---

Conditions préalables pour Daytona

Avant de télécharger Daytona, il y a quelques prérequis à remplir :

• Docker
• Éditeur de texte/IDE comme VSCode, JetBrains, etc.
• Client SSH, requis pour accéder aux serveurs distants

Télécharger Daytona

Daytona est disponible pour tous les principaux systèmes d'exploitation. Suivez le guide d'installation pour le configurer.

Utilisez ensuite la commande suivante pour démarrer Daytona :

daytona

---

Démarrage de Daytona

Pour démarrer Daytona, vous devrez démarrer son processus serveur soit en mode démon, soit dans la session de terminal en cours.

Remarque : Assurez-vous que le démon Docker s'exécute également en arrière-plan.

• Démarrez le processus du serveur Daytona en mode démon :

daytona server start

Remarque : Le mode Daytona Daemon n'est pas pris en charge sur les machines Windows. Vous devrez utiliser la commande suivante pour démarrer le serveur dans votre session de terminal actuelle :

daytona serve

---

Ajout de vos fournisseurs Git

Pour connecter votre fournisseur Git (par exemple, GitHub, GitLab), utilisez la commande suivante :

daytona git-providers add

Suivez les instructions à l'écran pour intégrer vos profils Git. Une fois terminé, vous pouvez accéder aux projets hébergés sur vos référentiels Git.

---

Configuration de votre IDE

Daytona permet à l'environnement de développement d'être exécuté sur n'importe lequel des IDE populaires. Exécutez simplement la commande ci-dessous et choisissez l'IDE de votre choix :

daytona ide

---

Utiliser Daytona pour le développement

Pour utiliser Daytona efficacement, vous aurez besoin d'un projet avec un fichier devcontainer.json placé dans un dossier .devcontainer dans votre référentiel.

Pour faciliter l'utilisation, nous utiliserons ce projet.

Commandes pour démarrer avec Daytona :

• Créez un conteneur de développement avec un contrôle granulaire lors du démarrage de votre environnement, comme un projet spécifique, ou en testant l'un des exemples de projets :

{
    "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" }
    }
}

• Démarrez directement un conteneur de développement depuis un dépôt Git :

daytona

Vous commencerez à voir les journaux du conteneur de développement dans la console :

Après avoir attendu un moment, vous verrez un message de réussite et une nouvelle fenêtre de l'EDI de votre choix s'ouvrir, avec une connexion SSH au conteneur de développement déjà configuré où vous pourrez commencer à développer votre projet comme vous le feriez sur votre PC ou ordinateur portable natif.

---

Développer avec Daytona

Nous suivrons le README.md de notre exemple de blog AstroJS Sanity pour commencer à développer avec Daytona.

Étapes suivantes : génération d'informations d'identification pour la santé mentale et configuration des variables d'environnement

1. Connectez-vous à Sanity : commencez par vous connecter à votre compte Sanity et créez un nouveau projet pour commencer.

2. Générer un jeton API : accédez à la section API dans les paramètres de votre projet Sanity et créez un nouveau jeton. Cela fournira la clé requise pour la configuration des variables d'environnement.

Une fois le jeton API généré, utilisez-le pour configurer les variables d'environnement de votre projet comme décrit dans la documentation.

Exécution du projet

Maintenant, exécutez les commandes ci-dessous dans une fenêtre de terminal séparée :

Pour démarrer notre application AstroJS, exécutez la commande ci-dessous :

daytona server start

L'application AstroJS est le frontend où nous pouvons lire les blogs que nous publions depuis le backend, c'est-à-dire Sanity CMS !

Pour accéder à notre Sanity Studio, exécutez la commande ci-dessous :

{
    "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" }
    }
}

Le Sanity Studio est utilisé pour gérer le contenu de notre application AstroJS. Nous pouvons créer, supprimer et manipuler les données de notre application AstroJS directement depuis Sanity Studio.

---

Conclusion

Avec un seul outil, nous pouvons mettre en place un environnement de développement à part entière qui offre toutes les fonctionnalités d'une configuration native. Que vous soyez un développeur chevronné ou débutant, les fonctionnalités robustes de Daytona et son intégration transparente avec des outils modernes comme AstroJS et Sanity valent la peine d'être explorées.

Mon parcours de développement avec Daytona a été exceptionnel et j'ai acquis des connaissances approfondies sur DevContainers, Docker et les environnements de développement en général.

Vérifiez-les et mettez-les en vedette – ils sont Open Source : Daytona !

N'hésitez pas non plus à explorer mon exemple de projet sur Daytona : AstroJS Sanity Blog.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!