A Date with Daytona: Meneroka AstroJS dan Sanity CMS

Baru-baru ini, semasa mengerjakan aplikasi blog saya, saya menemui Daytona—pengurus persekitaran pembangunan yang berkuasa—melalui Quest 23 yang sedang berjalan di quira.sh. Dalam blog ini, kami akan meneroka bagaimana AstroJS, Sanity dan Daytona mempertingkatkan proses pembangunan aplikasi blog ini dengan ketara.

---

Apa itu Daytona?

Daytona ialah sumber terbuka Pengurus Persekitaran Pembangunan (DEM) direka untuk menyelaraskan pengurusan dan penggunaan persekitaran pembangunan, yang dikenali sebagai Ruang Kerja. Ruang Kerja ini dibina pada bekas Docker dan serasi sepenuhnya dengan piawai DevContainer.

Ciri-ciri Utama Daytona:

• Seni Bina Modular: Mendayakan keserasian dengan piawaian konfigurasi seperti Dockerfiles, Docker Compose, Nix dan Devfile.

• Pengedaran Ringkas: Sebarkan persekitaran pembangunan berfungsi sepenuhnya menggunakan satu arahan, manakala Daytona menguruskan semua kerumitan asas untuk anda.

• Asasi DevContainers: Menggunakan standard DevContainers serba boleh untuk mentakrif dan mengurus persekitaran pembangunan berasaskan awan.

---

DevContainers dan Konfigurasi

Piawaian DevContainers membolehkan anda mengkonfigurasi persekitaran pembangunan anda dengan mudah menggunakan fail devcontainer.json yang diletakkan di bawah folder .devcontainer pada repositori anda.

Faedah DevContainers:

DevContainers membolehkan anda menentukan persekitaran pembangunan tersuai, kaya ciri dan dioptimumkan yang disesuaikan dengan keperluan khusus anda. Ia juga menyokong konfigurasi Dockerfile dan Docker Compose untuk penyepaduan yang lancar.

Untuk butiran lanjut, terokai DevContainers dan keupayaannya.

Contoh devcontainer.json

Berikut ialah contoh konfigurasi untuk projek menggunakan AstroJS dan 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" }
    }
}

Bahagian Utama:

• imej: Menentukan imej asas untuk persekitaran pembangunan.
• ciri: Menambah alatan atau utiliti prakonfigurasi pada bekas.
• forwardPorts: Peta port dari bekas ke mesin hos.
• penyesuaian: Menentukan konfigurasi editor, seperti sambungan, tetapan dan pilihan pemformatan, terutamanya untuk Kod VS.
• containerEnv: Menetapkan pembolehubah persekitaran untuk bekas.
• postCreateCommand: Menjalankan arahan selepas bekas dibuat (cth., pasang kebergantungan).
• portsAttributes: Label untuk port tertentu yang digunakan dalam pembangunan.

Untuk lebih banyak pilihan konfigurasi, semak rujukan DevContainer JSON.

---

Prasyarat untuk Daytona

Sebelum memuat turun Daytona, terdapat beberapa prasyarat yang perlu dipenuhi:

• Pelabuh
• Editor Teks/IDE seperti VSCode, JetBrains, dll.
• Klien SSH, diperlukan untuk mengakses pelayan jauh

Muat turun Daytona

Daytona tersedia untuk semua sistem pengendalian utama. Ikuti panduan pemasangan untuk menyediakannya.

Kemudian gunakan arahan berikut, untuk memulakan daytona:

daytona

---

Bermula Daytona

Untuk memulakan Daytona, anda perlu memulakan proses pelayannya sama ada dalam mod daemon atau dalam sesi terminal semasa.

Nota: Pastikan Docker Daemon juga berjalan di latar belakang.

• Mulakan proses pelayan Daytona dalam Mod Daemon:

daytona server start

Nota: Mod Daytona Daemon tidak disokong pada mesin Windows. Anda perlu menggunakan arahan berikut untuk memulakan pelayan dalam sesi terminal semasa anda:

daytona serve

---

Menambah Pembekal Git Anda

Untuk menyambungkan pembekal Git anda (cth., GitHub, GitLab), gunakan arahan berikut:

daytona git-providers add

Ikuti arahan pada skrin untuk menyepadukan profil Git anda. Setelah selesai, anda boleh mengakses projek yang dihoskan pada repositori Git anda.

---

Menyediakan IDE anda

Daytona membenarkan persekitaran pembangunan dijalankan pada mana-mana IDE yang popular. Hanya jalankan arahan di bawah dan pilih IDE pilihan anda:

daytona ide

---

Menggunakan Daytona untuk Pembangunan

Untuk menggunakan Daytona dengan cekap, anda memerlukan projek dengan fail devcontainer.json yang diletakkan di bawah folder .devcontainer dalam repositori anda.

Untuk kemudahan penggunaan, kami akan menggunakan projek ini.

Perintah untuk Bermula dengan Daytona:

• Buat bekas pembangunan dengan kawalan berbutir untuk memulakan persekitaran anda seperti projek tertentu atau mencuba salah satu contoh projek:

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

• Mulakan bekas pembangunan secara langsung dari repositori Git:

daytona

Anda akan mula melihat log bekas pembangunan dalam konsol:

Selepas menunggu seketika, anda akan melihat mesej kejayaan dan tetingkap baharu IDE pilihan anda terbuka, dengan sambungan SSH ke bekas pembangunan telah disediakan di mana anda boleh mula membangunkan projek anda seperti yang anda lakukan pada anda PC atau komputer riba asli.

---

Membangunkan dengan Daytona

Kami akan mengikuti README.md sampel AstroJS Sanity Blog untuk mula membangun dengan Daytona.

Langkah Seterusnya: Menjana Kelayakan untuk Kewarasan dan Menyediakan Pembolehubah Persekitaran

1. Log masuk ke Sanity: Mulakan dengan log masuk ke akaun Sanity anda dan buat projek baharu untuk bermula.

2. Jana Token API: Navigasi ke bahagian API dalam tetapan projek Sanity anda dan buat token baharu. Ini akan memberikan kunci yang diperlukan untuk menyediakan pembolehubah persekitaran.

Setelah token API dijana, gunakannya untuk mengkonfigurasi pembolehubah persekitaran projek anda seperti yang diterangkan dalam dokumentasi.

Menjalankan projek

Sekarang, jalankan arahan di bawah dalam tetingkap terminal yang berasingan:

Untuk memulakan aplikasi AstroJS kami, jalankan arahan di bawah:

daytona server start

Aplikasi AstroJS ialah bahagian hadapan di mana kita boleh membaca blog yang kita terbitkan dari bahagian belakang iaitu Sanity CMS!

Untuk mengakses Sanity Studio kami, jalankan arahan di bawah:

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

Studio Sanity digunakan untuk mengurus kandungan untuk aplikasi AstroJS kami. Kami boleh mencipta, memadam dan memanipulasi data untuk aplikasi AstroJS kami terus dari Sanity Studio.

---

Kesimpulan

Dengan hanya satu alat, kami boleh menyediakan persekitaran pembangunan lengkap yang menawarkan semua ciri persediaan asli. Sama ada anda seorang pembangun yang berpengalaman atau baru bermula, ciri teguh Daytona dan penyepaduan lancar dengan alatan moden seperti AstroJS dan Sanity patut diterokai.

Perjalanan pembangunan saya dengan Daytona adalah luar biasa dan saya telah memperoleh pengetahuan mendalam tentang DevContainers, Docker dan persekitaran pembangunan secara umum.

Sila lihat dan bintangkannya – ia adalah Sumber Terbuka: Daytona!

Selain itu, sila terokai contoh projek saya di daytona: AstroJS Sanity Blog.

Atas ialah kandungan terperinci A Date with Daytona: Meneroka AstroJS dan Sanity CMS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!