연습 - 기존 프로젝트에 개발 컨테이너 추가

완료됨

프로젝트에 사용할 개발 컨테이너를 설정하는 경우 먼저 해당 프로젝트에 컨테이너 구성을 추가해야 합니다. 컨테이너 구성은 Visual Studio Code에서 환경을 설정합니다.

이 연습에서는 개발 컨테이너를 추가하고 컨테이너에서 제품 대시보드 프로젝트를 엽니다.

개발 컨테이너 추가

  1. VS Code로 돌아가서 이전에 복제한 프로젝트로 이동합니다.

  2. F1 키를 눌러 명령 팔레트를 엽니다.

  3. add dev container를 입력하고 개발 컨테이너: 개발 컨테이너 구성 파일 추가를 선택합니다. 그러면 개발자 컨테이너 템플릿 목록이 표시됩니다. 템플릿에는 지정된 기술 스택에 대한 전체 개발 환경을 구성하는 데 필요한 원본 파일이 포함되어 있습니다.

  4. 사용자 데이터 폴더에 구성 추가를 선택합니다.

  5. 다음 옵션을 선택합니다.

    옵션
    컨테이너 구성 템플릿 선택 Python 3
    Python 버전 3.11
    설치할 추가 기능 선택 확인을 선택합니다.

중요

구성 템플릿을 선택하는 첫 번째 단계에서는 목록에서 “모든 정의 표시...”를 선택한 다음 템플릿이 모두 로드되면 Python을 선택해야 할 수 있습니다.

개발 컨테이너 구성이 프로젝트에 추가됩니다. Visual Studio Code가 이제 컨테이너에서 프로젝트를 열 수 있다고 알립니다. 지금은 이 알림을 해제합니다.

구성 파일 검사

  1. ‘.devcontainer’라는 새 폴더가 프로젝트에 추가되었는지 확인합니다.
  2. 해당 폴더를 펼친 다음, devcontainer.json 파일이 있는지 확인합니다.

컨테이너에서 프로젝트 열기

  1. F1 키를 눌러 명령 팔레트를 엽니다.
  2. reopen in container를 입력합니다.
  3. 사용 가능한 옵션 목록에서 개발 컨테이너: 컨테이너에서 다시 열기를 선택합니다.

컨테이너가 빌드를 시작합니다. 머신에서 새 이미지를 끌어오고 빌드해야 하므로 초기 빌드는 몇 분 정도 걸릴 수 있습니다. 컨테이너가 처음 빌드되고 나면 이후 빌드는 훨씬 빨라집니다.

원격 표시기 보기

컨테이너가 빌드를 완료하면 원격 표시기를 검사하여 컨테이너에 연결된 것을 확인할 수 있습니다. 또한 VS Code에 로드된 프로젝트 파일을 확인해야 합니다.

  • VS Code의 왼쪽 아래 모서리를 확인하여 원격 표시기를 확인합니다. 이제 “Dev Container: Python 3”라고 표시됩니다.

    dev container python 3라는 텍스트가 포함된 원격 표시기의 스크린샷

중요

Pylance 또는 Windows의 성능 개선에 대한 알림이 표시될 수 있습니다. VS Code에 표시되는 알림을 안전하게 삭제할 수 있습니다. 이러한 작업을 수행할 필요는 없습니다.

컨테이너 검사

  1. 아직 열리지 않은 경우 + `를 눌러 Visual Studio Code에서 통합 터미널을 엽니다.

  2. 터미널 프롬프트는 일반 터미널 프롬프트와 다를 수 있습니다.

    VS Code 통합 터미널 프롬프트

  3. 다음 명령을 실행하여 Python이 설치되었는지 확인합니다.

    python --version
    

    터미널 출력이 컨테이너에서 사용되는 Python 버전이어야 합니다.

프로젝트 종속성 설치

  • 터미널에서 다음 명령을 실행하여 프로젝트를 실행하는 데 필요한 Flask 종속성을 설치합니다.

    pip3 install --user -r requirements.txt
    

프로젝트 실행

  1. 터미널에서 다음 명령을 입력하여 프로젝트를 시작합니다.

    python app.py
    
  2. http://127.0.0.1:5000로 이동하여 브라우저에서 프로젝트를 엽니다.

    Python Products Dashboard 애플리케이션의 스크린샷

잘했습니다! Flask를 포함하는 Python 웹 애플리케이션이 머신에서 실행되고 있으며, 무엇인지 모를 수도 있습니다. 하지만 괜찮습니다. 알아야 할 필요가 없습니다. 컨테이너가 전체 환경을 설정을 담당합니다.

다음 섹션에서는 devcontainer.json 파일을 사용하여 종속성 설치를 자동화하는 방법과 이 Python 프로젝트에 대한 VS Code를 사용자 지정하는 방법을 알아봅니다.