다음을 통해 공유

자습서: Visual Studio Code를 사용하여 Docker 앱 만들기

  • 아티클

이 자습서는 VS Code(Visual Studio Code)와 함께 사용할 Docker를 소개하는 4부로 구성된 시리즈의 시작입니다. Docker 컨테이너를 만들고 실행하고, 데이터를 유지하며, Docker Compose를 사용하여 여러 컨테이너를 관리하는 방법을 알아봅니다.

VS Code는 로컬 Docker Desktop 서비스를 사용할 수 있는 Docker 확장을 제공합니다. Docker Desktop은 컴퓨터에서 실행되며 로컬 컨테이너를 관리합니다. 이 컨테이너는 앱을 빌드하고 실행하기 위한 플랫폼을 제공하는 소형 가상화된 환경입니다. 컨테이너에는 전체 운영 체제의 크기와 오버헤드가 필요하지 않습니다.

이 첫 번째 자습서에서는 다음 작업을 수행하는 방법을 알아봅니다.

  • Docker 컨테이너를 만듭니다.
  • 컨테이너 이미지를 빌드합니다.
  • 앱 컨테이너를 시작합니다.

필수 조건

이 자습서는 Windows 10 이상 및 Linux 컨테이너를 사용하도록 구성된 Docker Desktop에서 작동합니다.

컨테이너 만들기

컨테이너는 컴퓨터의 프로세스입니다. 호스트 컴퓨터의 다른 모든 프로세스와 격리됩니다. 이 격리는 커널 네임스페이스 및 제어 그룹을 사용합니다.

컨테이너는 격리된 파일시스템을 사용합니다. 이 사용자 지정 파일시스템은 컨테이너 이미지에서 제공됩니다. 이미지에는 모든 종속성, 구성, 스크립트, 이진 파일과 같이 애플리케이션을 실행하는 데 필요한 모든 항목이 포함되어 있습니다. 또한 이미지에는 환경 변수, 실행할 기본 명령, 기타 메타데이터와 같은 컨테이너의 다른 구성도 포함되어 있습니다.

VS Code용 Docker 확장을 설치한 후 VS Code에서 컨테이너를 사용할 수 있습니다. Docker 창의 바로 가기 메뉴 외에도 터미널>새 터미널을 선택하여 명령줄 창을 열 수 있습니다. Bash 창에서 명령을 실행할 수도 있습니다. 달리 지정되지 않은 경우 Bash로 레이블이 지정된 모든 명령은 Bash 창 또는 VS Code 터미널에서 실행할 수 있습니다.

  1. Docker를 Linux 컨테이너 모드로 설정합니다. 현재 Windows 컨테이너로 설정된 경우 Linux 컨테이너로 전환하려면 Docker Desktop이 실행되는 동안 시스템 트레이에서 Docker 아이콘을 마우스 오른쪽 단추로 클릭하고 Linux 컨테이너로 전환을 선택합니다.

  2. VS Code에서 터미널>새 터미널을 선택합니다.

  3. 터미널 창 또는 Bash 창에서 이 명령을 실행합니다.

    docker run -d -p 80:80 docker/getting-started

    이 명령에는 다음 매개 변수가 포함됩니다.

    • -d 백그라운드에서 분리 모드로 컨테이너를 실행합니다.
    • -p 80:80 호스트의 포트 80을 컨테이너의 포트 80에 매핑합니다.
    • docker/getting-started 사용할 이미지를 지정합니다.

    팁

    단일 문자 플래그를 결합하여 전체 명령을 줄일 수 있습니다. 예를 들어 위의 명령을 다음과 같이 작성할 수 있습니다.

    docker run -dp 80:80 docker/getting-started

  4. VS Code에서 왼쪽의 Docker 아이콘을 선택하여 Docker 확장을 봅니다.

    Screenshot shows the Docker extension with the docker/getting-started tutorial running.

    Docker VS Code 확장은 컴퓨터에서 실행되는 컨테이너를 보여 줍니다. 컨테이너 로그에 액세스하고 중지 및 제거와 같은 컨테이너 수명 주기를 관리할 수 있습니다.

    이 예제에서 modest_shockley 컨테이너 이름은 임의로 만들어집니다. 다른 이름을 갖게 될 것입니다.

  5. docker/getting-started를 마우스 오른쪽 단추로 클릭하여 바로 가기 메뉴를 엽니다. 브라우저에서 열기를 선택합니다.

    대신 브라우저를 열고 http://localhost/tutorial/을 입력합니다.

    로컬로 호스트되는 DockerLabs에 대한 페이지가 표시됩니다.

  6. docker/getting-started를 마우스 오른쪽 단추로 클릭하여 바로 가기 메뉴를 엽니다. 제거를 선택하여 이 컨테이너를 제거합니다.

    명령줄을 사용하여 컨테이너를 제거하려면 다음 명령을 실행하여 컨테이너 ID를 가져옵니다.

    docker ps

    그런 다음, 컨테이너를 중지하고 제거합니다.

    docker stop <container-id>
docker rm <container-id>

  7. 브라우저를 새로 고칩니다. 잠시 전에 본 시작 페이지가 사라졌습니다.

앱의 컨테이너 이미지 빌드

이 자습서에서는 간단한 Todo 애플리케이션을 사용합니다.

Screenshot shows the sample application with several items added and a text box and button to add new items.

이 앱을 사용하면 작업 항목을 만들고 완료된 것으로 표시하거나 삭제할 수 있습니다.

애플리케이션을 빌드하려면 Dockerfile을 만듭니다. Dockerfile은 컨테이너 이미지를 만드는 데 사용되는 텍스트 기반 명령 스크립트입니다.

  1. Docker 시작 자습서 리포지토리로 이동한 다음, 코드>ZIP 다운로드를 선택합니다. 로컬 폴더에 압축을 풉니다.

    Screenshot shows part of the Github site, with the green Code button and Download ZIP option highlighted.

  2. VS Code에서 파일>폴더 열기를 선택합니다. 추출된 프로젝트의 앱 폴더로 이동하여 해당 폴더를 엽니다. package.json이라는 파일과 src 및 spec이라는 두 개의 폴더가 표시됩니다.

    Screenshot of Visual Studio Code showing the package.json file open with the app loaded.

  3. package.json 파일과 동일한 폴더에 다음 내용으로 Dockerfile이라는 파일을 만듭니다.

    FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]

    참고 항목

    파일에 .txt와 같은 파일 확장명이 없는지 확인합니다.

  4. 파일 탐색기의 VS Code 왼쪽에서 Dockerfile을 마우스 오른쪽 단추로 클릭한 다음, 이미지 빌드를 선택합니다. 텍스트 입력 상자에 이미지 태그로 getting-started를 입력합니다.

    태그는 이미지의 식별 이름입니다.

    명령줄에서 컨테이너 이미지를 만들려면 다음 명령을 사용합니다.

    docker build -t getting-started .

    참고 항목

    외부 Bash 창에서 Dockerfile이 있는 app 폴더로 이동하여 이 명령을 실행합니다.

Dockerfile을 사용하여 새 컨테이너 이미지를 빌드했습니다. 많은 “계층”이 다운로드된 것을 발견했을 수 있습니다. Dockerfile은 node:20-alpine 이미지에서 시작합니다. 해당 이미지가 컴퓨터에 이미 없으면 해당 이미지를 다운로드해야 했습니다.

이미지가 다운로드되면 Dockerfile이 애플리케이션을 복사하고 yarn을 사용하여 애플리케이션의 종속성을 설치합니다. Dockerfile의 CMD 값은 이 이미지에서 컨테이너를 시작할 때 실행할 기본 명령을 지정합니다.

docker build 명령의 끝에 있는 .는 현재 디렉터리에서 Dockerfile을 찾도록 Docker에 지시합니다.

앱 컨테이너 시작

이제 이미지가 준비되었으므로 애플리케이션을 실행할 수 있습니다.

  1. 컨테이너를 시작하려면 다음 명령을 사용합니다.

    docker run -dp 3000:3000 getting-started

    -d 매개 변수는 백그라운드에서 분리된 모드로 컨테이너를 실행 중임을 나타냅니다. -p 값은 호스트 포트 3000과 컨테이너 포트 3000 간에 매핑을 만듭니다. 포트 매핑이 없으면 애플리케이션에 액세스할 수 없습니다.

  2. 몇 초 후 VS Code의 Docker 영역의 CONTAINERS에서 getting-started를 마우스 오른쪽 단추로 클릭하고 브라우저에서 열기를 선택합니다. 대신 웹 브라우저를 http://localhost:3000으로 열 수 있습니다.

    실행 중인 앱이 표시됩니다.

    Screenshot shows the sample app with no items and the text No items yet Add one above.

  3. 항목을 한두 개 추가하여 예상대로 작동하는지 테스트합니다. 항목을 완료로 표시하고 제거할 수 있습니다. 프런트 엔드가 백 엔드에 항목을 저장하는 데 성공합니다.

다음 단계

이 자습서를 완료했으며 몇 가지 항목이 있는 실행 중인 할 일 목록 관리자가 있습니다. 컨테이너 이미지를 만들고 컨테이너화된 앱을 실행하는 방법을 배웠습니다.

이 자습서 시리즈를 계속 진행하기 위해 지금까지 수행한 모든 작업을 유지합니다. 다음으로, 이 시리즈의 2부를 사용해 보세요.

Docker 앱 업데이트 및 공유

유용할 수 있는 몇 가지 리소스는 다음과 같습니다.