Daytona とのデート: AstroJS と Sanity CMS を探索する

最近、ブログ アプリケーションの作業中に、quira.sh で進行中の Quest 23 を通じて、強力な開発環境マネージャーである Daytona を発見しました。このブログでは、AstroJS、Sanity、および Daytona がこのブログ アプリケーションの開発プロセスをどのように大幅に強化したかを探っていきます。

---

デイトナとは何ですか？

Daytona は、ワークスペース として知られる開発環境の管理と展開を効率化するために設計されたオープンソースの 開発環境マネージャー (DEM) です。これらのワークスペースは Docker コンテナ 上に構築されており、DevContainer 標準と完全に互換性があります。

デイトナの主な特徴:

• モジュラー アーキテクチャ: Dockerfile、Docker Compose、Nix、Devfile などの構成標準との互換性を有効にします。

• 簡素化された展開: 単一のコマンドを使用して完全に機能する開発環境を展開します。一方、Daytona は基礎となる複雑さをすべて管理します。

• DevContainers Foundation: クラウドベースの開発環境の定義と管理に多用途の DevContainers 標準を利用します。

---

DevContainer と構成

DevContainers 標準を使用すると、リポジトリの .devcontainer フォルダーに配置された devcontainer.json ファイルを使用して、開発環境を簡単に構成できます。

DevContainers の利点:

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 をダウンロードする前に、いくつかの前提条件を満たす必要があります。

• ドッカー
• テキスト エディタ/IDE (VSCode、JetBrains など)
• SSH クライアント、リモートサーバーへのアクセスに必要です

デイトナをダウンロード

デイトナはすべての主要なオペレーティング システムで利用できます。インストールガイドに従ってセットアップしてください。

次に、次のコマンドを使用してデイトナを開始します:

daytona

---

デイトナを始める

Daytona を起動するには、デーモン モードまたは現在のターミナル セッションでサーバー プロセスを起動する必要があります。

注: Docker デーモンがバックグラウンドでも実行されていることを確認してください。

• Daytona サーバープロセスをデーモンモードで開始します。

daytona server start

注: Daytona Daemon モードは Windows マシンではサポートされていません。現在のターミナル セッションでサーバーを起動するには、次のコマンドを使用する必要があります:

daytona serve

---

Git プロバイダーの追加

Git プロバイダー (GitHub、GitLab など) に接続するには、次のコマンドを使用します。

daytona git-providers add

画面上の指示に従って、Git プロファイルを統合します。完了すると、Git リポジトリでホストされているプロジェクトにアクセスできるようになります。

---

IDE のセットアップ

Daytona では、一般的な IDE 上で開発環境を実行できます。以下のコマンドを実行し、好みの IDE を選択するだけです:

daytona ide

---

デイトナを開発に使用する

Daytona を効率的に利用するには、devcontainer.json ファイルを含むプロジェクトをリポジトリの .devcontainer フォルダーの下に配置する必要があります。

使いやすくするために、このプロジェクトを使用します。

デイトナを始めるためのコマンド:

• 特定のプロジェクトなどの環境を開始したり、サンプル プロジェクトの 1 つを試したりする際にきめ細かく制御できる開発コンテナを作成します。

{
    "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 を使用した開発を開始します。

次のステップ: Sanity の認証情報の生成と環境変数の設定

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 アプリケーションのコンテンツを管理するために使用されます。 AstroJS アプリケーションのデータは Sanity Studio から直接作成、削除、操作できます。

---

結論

たった 1 つのツールを使用して、ネイティブ セットアップのすべての機能を提供する本格的な開発環境をセットアップできます。経験豊富な開発者であっても、初心者であっても、Daytona の堅牢な機能と、AstroJS や Sanity などの最新ツールとのシームレスな統合は検討する価値があります。

Daytona での私の開発の旅は格別なもので、DevContainers、Docker、開発環境全般について深い知識を得ることができました。

ぜひチェックしてスターを付けてください – オープンソース: デイトナです!

また、daytona で私のサンプル プロジェクトを自由に探索してください: AstroJS Sanity Blog。

以上がDaytona とのデート: AstroJS と Sanity CMS を探索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。