最近、ブログ アプリケーションの作業中に、quira.sh で進行中の Quest 23 を通じて、強力な開発環境マネージャーである Daytona を発見しました。このブログでは、AstroJS、Sanity、および Daytona がこのブログ アプリケーションの開発プロセスをどのように大幅に強化したかを探っていきます。
Daytona は、ワークスペース として知られる開発環境の管理と展開を効率化するために設計されたオープンソースの 開発環境マネージャー (DEM) です。これらのワークスペースは Docker コンテナ 上に構築されており、DevContainer 標準と完全に互換性があります。
モジュラー アーキテクチャ: Dockerfile、Docker Compose、Nix、Devfile などの構成標準との互換性を有効にします。
簡素化された展開: 単一のコマンドを使用して完全に機能する開発環境を展開します。一方、Daytona は基礎となる複雑さをすべて管理します。
DevContainers Foundation: クラウドベースの開発環境の定義と管理に多用途の DevContainers 標準を利用します。
DevContainers 標準を使用すると、リポジトリの .devcontainer フォルダーに配置された devcontainer.json ファイルを使用して、開発環境を簡単に構成できます。
DevContainers を使用すると、特定のニーズに合わせてカスタマイズされた、機能が豊富で最適化されたカスタム開発環境を定義できます。また、シームレスな統合のための Dockerfile および Docker Compose 構成もサポートしています。
詳細については、DevContainers とその機能をご覧ください。
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" }
}
}
その他の構成オプションについては、DevContainer JSON リファレンスを確認してください。
Daytona をダウンロードする前に、いくつかの前提条件を満たす必要があります。
デイトナはすべての主要なオペレーティング システムで利用できます。インストールガイドに従ってセットアップしてください。
次に、次のコマンドを使用してデイトナを開始します:
daytona
Daytona を起動するには、デーモン モードまたは現在のターミナル セッションでサーバー プロセスを起動する必要があります。
注: Docker デーモンがバックグラウンドでも実行されていることを確認してください。
daytona server start
注: Daytona Daemon モードは Windows マシンではサポートされていません。現在のターミナル セッションでサーバーを起動するには、次のコマンドを使用する必要があります:
daytona serve
Git プロバイダー (GitHub、GitLab など) に接続するには、次のコマンドを使用します。
daytona git-providers add
画面上の指示に従って、Git プロファイルを統合します。完了すると、Git リポジトリでホストされているプロジェクトにアクセスできるようになります。
Daytona では、一般的な IDE 上で開発環境を実行できます。以下のコマンドを実行し、好みの IDE を選択するだけです:
daytona ide
Daytona を効率的に利用するには、devcontainer.json ファイルを含むプロジェクトをリポジトリの .devcontainer フォルダーの下に配置する必要があります。
使いやすくするために、このプロジェクトを使用します。
{
"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" }
}
}
daytona
コンソールに開発コンテナのログが表示され始めます:
しばらく待つと、成功メッセージが表示され、選択した IDE の新しいウィンドウが開き、開発コンテナへの SSH 接続がすでに設定されており、ここで、実環境で行うのと同じようにプロジェクトの開発を開始できます。ネイティブ PC またはラップトップ。
サンプル AstroJS Sanity ブログの README.md に従って、Daytona を使用した開発を開始します。
Sanity にサインイン: まず、Sanity アカウントにログインし、新しいプロジェクトを作成して開始します。
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
