IDX 작업공간 맞춤설정

Project IDX를 사용하면 다음을 설명하는 단일 .idx/dev.nix 구성 파일을 정의하여 작업공간을 프로젝트의 고유한 요구에 맞게 조정할 수 있습니다.

  • 컴파일러 또는 기타 바이너리와 같이 실행할 수 있어야 하는 시스템 도구 (예: 터미널에서)
  • 설치해야 하는 IDE 확장 프로그램 (예: 프로그래밍 언어 지원)
  • 앱 미리보기가 표시되는 방식입니다 (예: 웹 서버를 실행하는 명령어).
  • 작업공간에서 실행 중인 로컬 서버에서 사용할 수 있는 전역 환경 변수입니다.

사용 가능한 기능에 대한 전체 설명은 dev.nix 참조를 확인하세요.

Nix 및 IDX

IDX는 Nix를 사용하여 각 작업공간의 환경 구성을 정의합니다. 특히 IDX는 다음을 사용합니다.

  • 작업공간 환경을 설명하는 Nix 프로그래밍 언어 Nix는 함수형 프로그래밍 언어입니다. dev.nix 파일에서 정의할 수 있는 속성과 패키지 라이브러리는 Nix 속성 집합 구문을 따릅니다.

  • Nix 패키지 관리자: 작업공간에서 사용할 수 있는 시스템 도구를 관리합니다. 이는 APT (apt 및 apt-get), Homebrew (brew), dpkg과 같은 OS별 패키지 관리자와 유사합니다.

Nix 환경은 IDX의 컨텍스트에서 재현 가능하고 선언적이므로 프로젝트에서 작업하는 모든 사람이 동일한 환경 구성을 갖도록 하기 위해 Git 저장소의 일부로 Nix 구성 파일을 공유할 수 있음을 의미합니다.

기본 예제

다음 예는 미리보기를 사용 설정하는 기본 환경 구성을 보여줍니다.

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
    };
  };
}

시스템 도구 추가

클라우드 서비스의 컴파일러 또는 CLI 프로그램과 같은 시스템 도구를 작업공간에 추가하려면 Nix 패키지 레지스트리에서 고유한 패키지 ID를 찾아 dev.nix 파일의 packages 객체에 추가합니다('pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];
  ...
}

이는 APT (apt 및 apt-get), Homebrew(brew), dpkg과 같은 OS별 패키지 관리자를 사용하여 일반적으로 시스템 패키지를 설치하는 방법과 다릅니다. 어떤 시스템 패키지가 필요한지 명확하게 설명하면 IDX 작업공간을 더 쉽게 공유하고 재현할 수 있습니다.

로컬 노드 바이너리 사용

로컬 머신에서와 마찬가지로 로컬로 설치된 노드 패키지와 관련된 바이너리 (즉, package.json에 정의된 패키지)는 npx 명령어로 호출하여 터미널 패널에서 실행할 수 있습니다.

추가 편의를 위해 node_modules 폴더가 있는 디렉터리 (예: 웹 프로젝트의 루트 디렉터리)에 있는 경우 로컬에 설치된 바이너리를 npx 접두사 없이 직접 호출할 수 있습니다.

gcloud 구성요소 추가

Google Cloud용 gcloud CLI의 기본 구성은 모든 IDX 작업공간에서 사용할 수 있습니다.

추가 구성요소가 필요한 경우 다음과 같이 dev.nix 파일에 추가하면 됩니다.

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

IDE 확장 프로그램 추가

다음 두 가지 방법으로 OpenVSX 확장 프로그램 레지스트리를 사용하여 IDX에 확장 프로그램을 설치할 수 있습니다.

  • IDX에서 확장 프로그램 패널을 사용하여 확장 프로그램을 검색하고 설치합니다. 이 방법은 다음과 같은 사용자별 광고 확장에 가장 적합합니다.

    • 맞춤 색상 테마

  • dev.nix 파일에 확장 프로그램 추가. 이러한 확장 프로그램은 작업공간 구성을 공유할 때 자동으로 설치됩니다. 이 방법은 다음과 같은 프로젝트별 확장 프로그램에 가장 적합합니다.

    • 프로그래밍 언어 확장 프로그램(언어별 디버거 포함)
    • 프로젝트에 사용되는 클라우드 서비스의 공식 확장 프로그램
    • 코드 형식 지정 도구

후자의 경우 정규화된 확장 프로그램 ID (<publisher>.<id> 형식)를 찾아 다음과 같이 idx.extensions 객체에 추가하여 dev.nix 파일에 IDE 확장 프로그램을 포함할 수 있습니다.

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

공통 서비스 추가

또한 IDX는 개발 중에 필요할 수 있는 다음과 같은 일반적인 서비스의 간소화된 설정 및 구성을 제공합니다.

  • 컨테이너
    • Docker (services.docker.*)
  • 메시지
    • Pub/Sub 에뮬레이터 (services.pubsub.*)
  • 데이터베이스
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

작업공간에서 이러한 서비스를 사용 설정하는 방법에 대한 자세한 내용은 dev.nix 참조의 services.* 부분을 확인하세요.

미리보기 맞춤설정

앱 미리보기를 맞춤설정하는 방법에 관한 자세한 내용은 미리보기 문서를 참고하세요.

모든 맞춤설정 옵션 보기

환경 구성 스키마에 대한 자세한 설명은 dev.nix 참조를 확인하세요.