与 Daytona 的约会：探索 AstroJS 和 Sanity CMS

最近，在开发我的博客应用程序时，我通过 quira.sh 上正在进行的 Quest 23 发现了 Daytona——一个强大的开发环境管理器。在本博客中，我们将探讨 AstroJS、Sanity 和 Daytona 如何显着增强此博客应用程序的开发过程。

---

什么是代托纳？

Daytona 是一个开源的开发环境管理器 (DEM)，旨在简化开发环境的管理和部署，称为工作区。这些工作区构建在 Docker 容器 上，并且与 DevContainer 标准完全兼容。

代托纳的主要特点：

• 模块化架构：实现与 Dockerfiles、Docker Compose、Nix 和 Devfile 等配置标准的兼容性。

• 简化部署：使用单个命令部署功能齐全的开发环境，而 Daytona 会为您管理所有底层复杂性。

• DevContainers Foundation：利用多功能 DevContainers 标准来定义和管理基于云的开发环境。

---

开发容器和配置

DevContainers 标准允许您使用存储库上 .devcontainer 文件夹下的 devcontainer.json 文件轻松配置开发环境。

DevContainer 的优点：

DevContainers 允许您根据您的特定需求定义自定义、功能丰富且优化的开发环境。它还支持 Dockerfile 和 Docker Compose 配置以实现无缝集成。

有关更多详细信息，请探索 DevContainers 及其功能。

devcontainer.json 的示例

这是使用 AstroJS 和 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" }
    }
}

关键部分：

• image：指定开发环境的基础镜像。
• 功能：将预配置的工具或实用程序添加到容器中。
• forwardPorts：将端口从容器映射到主机。
• 自定义：指定编辑器配置，例如扩展、设置和格式首选项，特别是 VS Code。
• containerEnv：设置容器的环境变量。
• postCreateCommand：创建容器后运行命令（例如，安装依赖项）。
• portsAttributes：开发中使用的特定端口的标签。

有关更多配置选项，请查看 DevContainer JSON 参考。

---

代托纳的先决条件

在下载 Daytona 之前，需要满足一些先决条件：

• Docker
• 文本编辑器/IDE 如 VSCode、JetBrains 等
• SSH 客户端，访问远程服务器所需

下载代托纳

Daytona 适用于所有主要操作系统。按照安装指南进行设置。

然后使用以下命令，启动daytona：

daytona

---

开始代托纳

要启动 Daytona，您需要在守护进程模式或当前终端会话中启动其服务器进程。

注意：确保 Docker Daemon 也在后台运行。

• 以守护进程模式启动 Daytona 服务器进程：

daytona server start

注意：Windows 计算机不支持 Daytona Daemon 模式。您需要使用以下命令在当前终端会话中启动服务器：

daytona serve

---

添加您的 Git 提供程序

要连接您的 Git 提供商（例如 GitHub、GitLab），请使用以下命令：

daytona git-providers add

按照屏幕上的说明集成您的 Git 配置文件。完成后，您可以访问 Git 存储库上托管的项目。

---

设置您的 IDE

Daytona 允许开发环境在任何流行的 IDE 上运行。只需运行以下命令并选择您选择的 IDE：

daytona ide

---

使用 Daytona 进行开发

为了有效地利用 Daytona，您需要一个项目，其中包含一个 devcontainer.json 文件，该文件放置在存储库中的 .devcontainer 文件夹下。

为了方便使用，我们将使用这个项目。

Daytona 入门命令：

• 创建一个开发容器，对启动特定项目等环境或尝试示例项目之一进行精细控制：

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

• 直接从 Git 存储库启动开发容器：

daytona

您将开始在控制台中看到开发容器的日志：

等待一段时间后，您将看到一条成功消息，并且打开了您选择的 IDE 的新窗口，其中已经设置了与开发容器的 SSH 连接，您可以在其中开始开发项目，就像在您的设备上一样本机 PC 或笔记本电脑。

---

与代托纳一起开发

我们将遵循示例 AstroJS Sanity 博客的 README.md 开始使用 Daytona 进行开发。

后续步骤：生成健全的凭据并设置环境变量

1. 登录 Sanity：首先登录您的 Sanity 帐户并创建一个新项目即可开始。

2. 生成 API 令牌：导航到 Sanity 项目设置中的 API 部分并创建一个新令牌。这将提供设置环境变量所需的密钥。

生成 API 令牌后，请使用它来配置项目的环境变量，如文档中所述。

运行项目

现在，在单独的终端窗口中运行以下命令：

要启动我们的 AstroJS 应用程序，请运行以下命令：

daytona server start

AstroJS 应用程序是前端，我们可以在其中阅读我们从后端（即 Sanity CMS）发布的博客！

要访问我们的 Sanity Studio，请运行以下命令：

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

Sanity Studio 用于管理我们的 AstroJS 应用程序的内容。我们可以直接从 Sanity Studio 创建、删除和操作 AstroJS 应用程序的数据。

---

结论

只需一个工具，我们就可以建立一个成熟的开发环境，提供本机设置的所有功能。无论您是经验丰富的开发人员还是新手，Daytona 强大的功能以及与 AstroJS 和 Sanity 等现代工具的无缝集成都值得探索。

我在 Daytona 的开发之旅非常出色，并且我对 DevContainers、Docker 和一般开发环境有了深入的了解。

一定要检查它们并给它们加注星标——它们是开源的：Daytona！

此外，请随意探索我在 daytona 上的示例项目：AstroJS Sanity 博客。

以上是与 Daytona 的约会：探索 AstroJS 和 Sanity CMS的详细内容。更多信息请关注PHP中文网其他相关文章！