Skip to main content

GitHub Codespaces에 대한 Node.js 프로젝트 설정

사용자 지정 개발 컨테이너 구성을 만들어 GitHub Codespaces에서 JavaScript, Node.js 또는 TypeScript 프로젝트를 시작합니다.

소개

이 가이드에서는 예제 Node.js 프로젝트 GitHub Codespaces에서 Visual Studio Code 웹 클라이언트를 사용합니다. 코드스페이스에서 프로젝트를 열고 미리 정의된 개발 컨테이너 구성을 추가 및 수정하는 프로세스를 단계별로 안내합니다.

이 자습서를 완료하면 VS Code 웹 클라이언트 또는 VS Code 데스크톱 애플리케이션을 사용하여 개발 컨테이너 구성을 사용자 고유의 리포지토리에 추가할 수 있습니다.

개발 컨테이너에 대한 자세한 내용은 "개발 컨테이너 소개.을(를) 설정하는 방법을 보여 줍니다.

1단계: codespace에서 프로젝트 열기

  1. 아직 로그인하지 않은 경우 GitHub.com에 로그인합니다.

  2. https://github.com/microsoft/vscode-remote-try-node(으)로 이동합니다.

  3. 이 템플릿 사용을 클릭한 다음, codespace에서 열기를 클릭합니다.

    "이 템플릿 사용" 단추와 "codespace에서 열기" 옵션을 표시하도록 확장된 드롭다운 메뉴의 스크린샷.

Codespace를 만들면 전용 원격 가상 머신에 프로젝트가 만들어집니다. 기본적으로 codespace의 컨테이너에는 Node.js, JavaScript, TypeScript를 포함한 다양한 언어와 런타임이 있습니다. 또한 nvm, npm, yarn, git, wget, rsync, openssh, nano와 같은 일반적인 도구 세트가 포함되어 있습니다.

vCPU 및 RAM의 양을 조정하거나 환경을 개인 설정하기 위해 dot 파일을 추가하거나 설치된 도구와 스크립트를 수정하여 codespace를 사용자 지정할 수 있습니다. 자세한 내용은 "codespace 사용자 지정"을 참조하세요.

GitHub Codespaces는 codespace에서 작업할 때 사용하는 개발 컨테이너를 구성하기 위해 devcontainer.json이라는 파일을 사용합니다. 각 리포지토리에는 codespace에서 코드 작업을 하는 데 필요한 개발 환경을 정확하게 제공하기 위해 하나 이상의 devcontainer.json 파일이 포함될 수 있습니다.

시작 시 GitHub Codespaces는 개발 컨테이너 구성을 구성하는 devcontainer.json 파일 및 종속 파일을 사용하여 도구 및 런타임을 설치하고 프로젝트에 필요한 기타 설치 작업을 수행합니다. 자세한 내용은 "개발 컨테이너 소개"을 참조하세요.

2단계: 개발 컨테이너 구성 추가

GitHub Codespaces에 대한 기본 개발 컨테이너 또는 "개발 컨테이너"는 기본적으로 vscode-remote-try-node와 같은 Node.js 프로젝트 작업을 성공적으로 수행하도록 지원합니다. 그러나 자체 개발 컨테이너를 구성하여 프로젝트에 필요한 모든 도구와 스크립트를 포함하는 것이 좋습니다. 이렇게 하면 리포지토리의 모든 GitHub Codespaces 사용자에게 완전히 재현 가능한 환경이 보장됩니다.

사용자 지정 개발 컨테이너를 사용하도록 리포지토리를 설정하려면 하나 이상의 devcontainer.json 파일을 만들어야 합니다. Visual Studio Code에서 미리 정의된 구성 템플릿에서 추가하거나 직접 작성할 수 있습니다. 개발 컨테이너 구성에 대한 자세한 내용은 "개발 컨테이너 소개.

  1. Visual Studio Code Command Palette에 액세스(Shift+Command+P / Ctrl+Shift+P)한 후, “add dev” 입력을 시작합니다. Codespaces: 개발 컨테이너 구성 파일 추가를 클릭합니다.

    "개발 추가"가 입력되고 "Codespaces: 개발 컨테이너 구성 파일 추가"가 나열된 명령 팔레트의 스크린샷.

  2. 새 구성 만들기를 클릭합니다.

  3. 이 예제에서는 codespace를 만든 템플릿 리포지토리에 개발 컨테이너 구성이 이미 포함되어 있으므로 구성 파일이 이미 있다는 메시지가 표시됩니다. 기존 구성 파일을 덮어쓰려고 하므로 계속을 클릭합니다.

  4. 모든 정의 표시를 클릭합니다.

    "모든 정의 표시"를 포함한 다양한 옵션을 보여 주는 "개발 컨테이너 구성 파일 추가" 드롭다운의 스크린샷.

  5. node을(를) 입력하고 Node.js 및 JavaScript를 클릭합니다. 프로젝트에서 특정 도구를 사용하는 경우 다른 옵션을 사용할 수 있습니다. 예를 들어 Node 및 MongoDB가 있습니다.

    "Node.js 및 JavaScript" 옵션을 보여 주는 "개발 컨테이너 구성 파일 추가" 드롭다운의 스크린샷입니다.

  6. 프로젝트에 사용할 Node.js 버전을 선택합니다. 이 경우 "(기본값)"으로 표시된 버전을 선택합니다.

    "18(기본값)"을 비롯한 다양한 Node 버전을 보여 주는 "개발 컨테이너 구성 파일 추가" 드롭다운의 스크린샷입니다.

  7. 추가 기능 목록이 표시됩니다. JavaScript 코드에서 오류를 검색하기 위한 코드 품질 도구인 JSHint를 설치합니다. 이 도구를 설치하려면 js을(를) 입력하고, JSHint (via npm)을(를) 선택한 다음, 확인을 클릭합니다.

    텍스트 상자의 "js"와 드롭다운 목록의 "JSHint(npm을 통해)"를 보여 주는 "개발 컨테이너 구성 파일 추가" 드롭다운의 스크린샷입니다.

  8. 개발 컨테이너 구성 파일이 이미 있다는 메시지가 표시됩니다. 덮어쓰기를 클릭합니다.

    devcontainer.json 파일이 만들어지고 편집기에서 열립니다.

사용자 지정 개발 컨테이너 구성의 세부 정보

Visual Studio Code 탐색기를 보면 파일이 포함된 devcontainer.json 프로젝트 리포지토리의 루트에 디렉터리가 추가된 것을 볼 .devcontainer 수 있습니다. 이 리포지토리에서 만든 코드스페이스의 기본 구성 파일입니다.

devcontainer.json

추가한 파일에는 devcontainer.json , imagefeatures 속성에 name대한 값이 포함됩니다. 유용할 수 있는 몇 가지 추가 속성이 포함되어 있지만 주석 처리됩니다.

선택한 이미지에 따라 파일은 다음과 유사하게 표시됩니다.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
  "name": "Node.js",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
  "features": {
    "ghcr.io/devcontainers-contrib/features/jshint:2": {}
  }

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",

  // Configure tool-specific properties.
  // "customizations": {},

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}
  • 이름: 개발자 컨테이너의 이름을 원하는 대로 지정할 수 있습니다. 기본값은 제공됩니다.
  • 이미지: codespace에 대한 개발 컨테이너를 만드는 데 사용할 컨테이너 레지스트리(DockerHub, GitHub Container registry 또는 Azure Container Registry)의 이미지 이름입니다.
  • 기능: 하나 이상의 개체 목록이며, 각 개체는 사용 가능한 개발 컨테이너 기능 중 하나를 참조합니다. 기능은 자체 포함되고 공유 가능한 설치 코드 단위 및 개발 컨테이너 구성입니다. 개발 컨테이너에 더 많은 도구, 런타임 또는 라이브러리 기능을 추가하는 쉬운 방법을 제공합니다. VS Code 또는 GitHub.com의 devcontainer.json 편집기에서 기능을 추가할 수 있습니다. 자세한 내용은 "devcontainer.json 파일에 기능 추가"에서 Visual Studio Code 또는 웹 브라우저 탭을 클릭합니다.
  • forwardPorts: 여기에 나열된 모든 포트는 자동으로 전달됩니다. 자세한 내용은 "codespace의 포트 전달"을 참조하세요.
  • postCreateCommand: 이 속성을 사용하여 codespace를 만든 후 명령을 실행합니다. 위와 같이 문자열, 배열 또는 개체로 서식을 지정할 수 있습니다. 자세한 내용은 개발 컨테이너 웹 사이트의 개발 컨테이너 사양을 참조하세요.
  • 사용자 지정: 이 속성을 사용하면 codespace에서 작업하는 데 사용할 때 특정 도구 또는 서비스를 사용자 지정할 수 있습니다. 예를 들어 VS Code에 대한 특정 설정 및 확장을 구성할 수 있습니다. 자세한 내용은 개발 컨테이너 웹 사이트의 "지원 도구 및 서비스"를 참조하세요.
  • remoteUser: 기본적으로 vscode 사용자로 실행되지만 필요에 따라 이를 루트로 설정할 수 있습니다. 사용 가능한 속성의 전체 목록은 개발 컨테이너 웹 사이트의 개발 컨테이너 사양을 참조하세요.

추가 개발 컨테이너 구성 파일

Docker에 익숙한 경우 Dockerfile 또는 Docker Compose를 사용하여 파일 외에도 devcontainer.json 코드스페이스 환경을 구성할 수 있습니다. 파일과 devcontainer.json 함께 사용자 Dockerfile 또는 docker-compose.yml 파일을 추가하여 이 작업을 수행할 수 있습니다. 자세한 내용은 개발 컨테이너 웹 사이트의 "이미지, Dockerfiles 및 Docker Compose 사용"을 참조하세요.

3단계: devcontainer.json 파일 수정

개발 컨테이너 구성을 추가하고 모든 기능을 기본적으로 이해하면 이제 환경을 추가로 사용자 지정하기 위해 변경할 수 있습니다. 이 예시에서는 다음과 같은 속성을 추가합니다.

  • 개발 컨테이너를 만든 후 npm install을(를) 실행하여 package.json 파일에 나열된 종속성을 설치합니다.
  • 이 codespace에 VS Code 익스텐션을 자동으로 설치합니다.
  1. devcontainer.json 파일에서 features 속성 뒤에 쉼표를 추가하고, 기능에 대한 주석 처리된 두 줄을 삭제합니다.

    JSON
      "features": {
        "ghcr.io/devcontainers-contrib/features/jshint:2": {}
      },
    
      // Features to add to the dev container. More info: https://containers.dev/features.
      // "features": {},
    
  2. postCreateCommand 속성의 주석 처리를 제거하고 npm install 명령을 할당합니다.

    JSONC
     // Use 'postCreateCommand' to run commands after the container is created.
     "postCreateCommand": "npm install",
    
  3. customizations 속성의 주석 처리를 제거하고 다음과 같이 편집하여 "코드 맞춤법 검사기" VS Code 확장을 설치합니다.

    JSONC
    // Configure tool-specific properties.
    "customizations": {
      // Configure properties specific to VS Code.
      "vscode": {
        // Add the IDs of extensions you want installed when the container is created.
        "extensions": [
          "streetsidesoftware.code-spell-checker"
        ]
      }
    }
    

    이제 선택한 이미지에 따라 devcontainer.json 파일이 다음과 유사하게 표시됩니다.

    // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
    {
      "name": "Node.js",
      // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
      "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
      "features": {
        "ghcr.io/devcontainers-contrib/features/jshint:2": {}
      },
    
      // Use 'forwardPorts' to make a list of ports inside the container available locally.
      // "forwardPorts": [],
    
      // Use 'postCreateCommand' to run commands after the container is created.
      "postCreateCommand": "npm install",
    
      // Configure tool-specific properties.
      "customizations": {
        // Configure properties specific to VS Code.
        "vscode": {
          // Add the IDs of extensions you want installed when the container is created.
          "extensions": [
            "streetsidesoftware.code-spell-checker"
          ]
        }
      }
    
      // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
      // "remoteUser": "root"
    }
    
  4. 변경 내용을 저장합니다.

  5. VS Code Command Palette에 액세스(Shift+Command+P / Ctrl+Shift+P)한 후, “rebuild” 입력을 시작합니다. Codespaces: 컨테이너 다시 빌드를 클릭합니다.

    텍스트 상자에 "다시 빌드"가 입력되고 드롭다운에 "Codespace: 컨테이너 다시 빌드" 옵션이 강조 표시된 명령 팔레트의 스크린샷.

    팁: 경우에 따라 다시 전체 빌드를 수행하여 캐시를 지우고 새 이미지로 컨테이너를 다시 빌드하려고 할 수 있습니다. 자세한 내용은 "Codespace에서 컨테이너 다시 빌드"을 참조하세요.

codespace 내에서 다시 빌드하면 리포지토리에 변경 내용을 커밋하기 전에 변경 내용이 예상대로 작동하는지 확인할 수 있습니다. 오류가 발생하는 경우 컨테이너를 계속 조정하기 위해 다시 빌드할 수 있는 복구 컨테이너가 있는 codespace에 배치됩니다.

개발 컨테이너를 다시 빌드하고 codespace를 다시 사용할 수 있게 되면 npm을 설치하여 postCreateCommand(이)가 실행되고 "코드 맞춤법 검사기" 확장을 사용할 수 있습니다.

4단계: 응용 프로그램 실행

이전 섹션에서는 postCreateCommand를 사용하여 npm install 명령을 통해 패키지 집합을 설치했습니다. 이제 종속성이 설치되었으므로 응용 프로그램을 실행할 수 있습니다.

  1. Codespace의 터미널에서 npm start을(를) 입력합니다.

    터미널에서 "npm start"를 실행하는 스크린샷입니다. 최종 출력은 "http://0.0.0.0:3000 실행 중"이라고 읽습니다.

  2. 프로젝트가 시작되면 VS Code의 오른쪽 아래 모서리에 전달된 포트에서 응용 프로그램을 사용할 수 있다는 "토스트" 알림 메시지가 표시됩니다. 브라우저에서 열기를 클릭하여 실행 중인 응용 프로그램을 봅니다.

    "포트 3000에서 실행되는 응용 프로그램을 사용할 수 있습니다."라는 포트 전달 메시지의 스크린샷입니다. "브라우저에서 열기" 단추도 표시됩니다.

5단계: 변경 내용 커밋

새 코드 또는 구성 변경을 통해 codespace를 변경한 후에 변경 내용을 커밋할 수 있습니다. 리포지토리에 구성 변경 내용을 커밋하면 이 리포지토리에서 codespace를 만드는 다른 모든 사용자가 동일한 구성을 갖게 됩니다. 모든 사용자에게 VS Code 확장 추가와 같은 모든 사용자 지정이 표시됨을 의미합니다.

이 자습서에서는 템플릿 리포지토리에서 codespace를 만들었으므로 codespace의 코드는 아직 리포지토리에 저장되지 않습니다. 현재 분기를 GitHub.com에 게시하여 리포지토리를 만들 수 있습니다.

자세한 내용은 "codespace에서 원본 제어 사용"을 참조하세요.

다음 단계

이제 사용자 지정 개발 컨테이너 구성을 사용자 고유의 Node.js, JavaScript 또는 TypeScript 프로젝트에 추가할 수 있습니다.

다음은 고급 시나리오를 위한 몇 가지 추가 리소스입니다.