Daytona와의 데이트: AstroJS 및 Sanity CMS 탐색-JS 튜토리얼-php.cn

최근 블로그 애플리케이션 작업을 하던 중 quira.sh에서 진행 중인 Quest 23을 통해 강력한 개발 환경 관리자인 Daytona를 발견했습니다. 이 블로그에서는 AstroJS, Sanity 및 Daytona가 이 블로그 애플리케이션의 개발 프로세스를 어떻게 크게 향상했는지 살펴보겠습니다.

데이토나 란 무엇입니까?

A Date with Daytona: Exploring AstroJS and Sanity CMS

Daytona는 Workspaces라고 알려진 개발 환경의 관리 및 배포를 간소화하도록 설계된 오픈 소스 Development Environment Manager(DEM)입니다. 이러한 작업공간은 Docker 컨테이너를 기반으로 구축되었으며 DevContainer 표준

과 완벽하게 호환됩니다.

데이토나의 주요 특징:

모듈형 아키텍처: Dockerfiles, Docker Compose, Nix 및 Devfile과 같은 구성 표준과의 호환성을 지원합니다.
단순화된 배포: 단일 명령을 사용하여 완전한 기능을 갖춘 개발 환경을 배포하고 Daytona는 모든 기본 복잡성을 관리합니다.
DevContainers Foundation: 클라우드 기반 개발 환경을 정의하고 관리하기 위해 다목적 DevContainers 표준을 활용합니다.

DevContainer 및 구성

DevContainers 표준을 사용하면 저장소의 .devcontainer 폴더에 있는 devcontainer.json 파일을 사용하여 개발 환경을 쉽게 구성할 수 있습니다.

A Date with Daytona: Exploring AstroJS and Sanity CMS

DevContainer의 이점:

DevContainer를 사용하면 특정 요구 사항에 맞게 맞춤화되고 기능이 풍부하며 최적화된 개발 환경을 정의할 수 있습니다. 또한 원활한 통합을 위해 Dockerfile 및 Docker Compose 구성을 지원합니다.

자세한 내용은 DevContainer와 해당 기능을 살펴보세요.

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: 컨테이너의 포트를 호스트 시스템에 매핑합니다.
customizations: 특히 VS Code의 확장, 설정, 서식 기본 설정과 같은 편집기 구성을 지정합니다.
containerEnv: 컨테이너에 대한 환경 변수를 설정합니다.
postCreateCommand: 컨테이너가 생성된 후 명령을 실행합니다(예: 종속성 설치).
portsAttributes: 개발에 사용되는 특정 포트에 대한 레이블입니다.

더 많은 구성 옵션을 보려면 DevContainer JSON 참조를 확인하세요.

데이토나의 전제 조건

Daytona를 다운로드하기 전에 충족해야 할 몇 가지 전제 조건이 있습니다.

도커
텍스트 편집기/IDE VSCode, JetBrains 등
SSH 클라이언트, 원격 서버 접속에 필요

데이토나 다운로드

Daytona는 모든 주요 운영 체제에서 사용할 수 있습니다. 설치 가이드에 따라 설정하세요.

그런 다음 다음 명령을 사용하여 daytona를 시작합니다.

daytona

로그인 후 복사

A Date with Daytona: Exploring AstroJS and Sanity CMS

데이토나 시작하기

Daytona를 시작하려면 데몬 모드나 현재 터미널 세션에서 서버 프로세스를 시작해야 합니다.

참고: Docker Daemon이 백그라운드에서도 실행되고 있는지 확인하세요.

데몬 모드에서 Daytona 서버 프로세스를 시작합니다.

daytona server start

로그인 후 복사

참고: Daytona 데몬 모드는 Windows 시스템에서 지원되지 않습니다. 현재 터미널 세션에서 서버를 시작하려면 다음 명령을 사용해야 합니다.

daytona serve

로그인 후 복사

A Date with Daytona: Exploring AstroJS and Sanity CMS

Git 공급자 추가

Git 공급자(예: GitHub, GitLab)를 연결하려면 다음 명령을 사용하세요.

daytona git-providers add

로그인 후 복사

Git 프로필을 통합하려면 화면의 지시를 따르세요. 완료되면 Git 저장소에 호스팅된 프로젝트에 액세스할 수 있습니다.

IDE 설정

Daytona를 사용하면 널리 사용되는 모든 IDE에서 개발 환경을 실행할 수 있습니다. 아래 명령을 실행하고 원하는 IDE를 선택하세요.

daytona ide

로그인 후 복사

A Date with Daytona: Exploring AstroJS and Sanity CMS

개발을 위해 Daytona 사용

Daytona를 효율적으로 활용하려면 저장소의 .devcontainer 폴더에 devcontainer.json 파일이 있는 프로젝트가 필요합니다.

사용의 편의를 위해 이 프로젝트를 사용하겠습니다.

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

로그인 후 복사

콘솔에 개발 컨테이너의 로그가 표시되기 시작합니다.

A Date with Daytona: Exploring AstroJS and Sanity CMS

잠시 기다리면 성공 메시지가 표시되고 선택한 IDE의 새 창이 열리며, 개발 컨테이너에 대한 SSH 연결이 이미 설정되어 있어 컴퓨터에서와 마찬가지로 프로젝트 개발을 시작할 수 있습니다. 기본 PC 또는 노트북.

A Date with Daytona: Exploring AstroJS and Sanity CMS

데이토나와 함께 발전하다

샘플 AstroJS Sanity 블로그의 README.md를 따라 Daytona 개발을 시작하겠습니다.

다음 단계: 온전성을 위한 자격 증명 생성 및 환경 변수 설정

Sanity에 로그인: Sanity 계정에 로그인하고 새 프로젝트를 생성하여 시작하세요.
API 토큰 생성: Sanity 프로젝트 설정의 API 섹션으로 이동하여 새 토큰을 생성하세요. 이는 환경 변수 설정에 필요한 키를 제공합니다.

A Date with Daytona: Exploring AstroJS and Sanity CMS

API 토큰이 생성되면 이를 사용하여 문서에 설명된 대로 프로젝트의 환경 변수를 구성합니다.

프로젝트 실행

이제 별도의 터미널 창에서 아래 명령을 실행하세요.

AstroJS 애플리케이션을 시작하려면 아래 명령을 실행하세요.

daytona server start

로그인 후 복사

A Date with Daytona: Exploring AstroJS and Sanity CMS

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

로그인 후 복사

A Date with Daytona: Exploring AstroJS and Sanity CMS