dev container

1. install docker

install docker

2. install vscode

install vscode

3. install vscode extension

Alt text

install dev container extension

4. create dev container

현재 로컬에 python은 설치가 안되잇고 vs code python관련 플러그인은 설치가 안되있다.

Alt text

no python extension

Alt text

python 프로젝트를 열고 실행을 눌러보자.

Alt text

에러 난다.

그리고 python을 설치하라고 한다.

Alt text

우리는 로컬 환경을 건드리지않고 모든걸 컨테이너에 담아서 사용하고 싶다.

그래서 dev container를 사용한다.

setup dev container

cmd + shift + p

add dev container

Alt text

Alt text

필요한 내용을 선택하자 난 python

Alt text

3.10 bullseye

Alt text

추가 기능 (일단 패스)

Alt text

Alt text

다시 vscode 열기

로그를 클릭하면 로그를 볼수있다.

지금까지 한걸 정리하면 별거 없다. 정리하면

1. .devcontainer 폴더를 만들고

2. 그안에 devcontainer.json을 만들고

3. 필요한 내용을 넣어주면 된다.

dev container 실행

다시 로딩을 하면 docker image를 다운로드 받는데 시간이 좀 걸린다.

일단 기본 설정은 다음과 같다.

{
	"name": "Python 3",
	"image": "mcr.microsoft.com/devcontainers/python:1-3.10-bullseye"
}

다시 로딩하면 다음과 같이 보인다.

Alt text

plugin을 확인해보면 다음처럼 2개의 창이 보이며 각각 설치된 플러그인이 표시된다.

Alt text

여기서 잠깐 왜 컨테이너에 많은 플러그인이 설치되었는가?

ms에서 기본 제공한 python container를 사용했기 때문이다.

아마 다음글에 자세한 설명 예정 //todo

python code 실행

다 됬다 이제 파일을 실행해 보자.

Alt text

실행 버튼을 눌러보자.

Alt text

일단 사용안함으로 하자.

실행하자. 에러..

Alt text

실행은 되었으나 필요한 모듈이 설치가 안되잇는듯 싶다.

설치하자.

pip: -r requirements.txt

Alt text

다시 실행하자.

Alt text

동작한다.

repoen project

프로젝트를 vscode로 연다.

cmd + shift + p > Dev Containers: Reopen in Container

빌드하면서 오픈한다.

심화과정

https://containers.dev/

여기서 다양한 설정을 볼수있다.

https://containers.dev/implementors/spec/

여기도 도움이 된다.

devcontainer.json 파일을 수정

{
  "name": "Python 3",
  "image": "mcr.microsoft.com/devcontainers/python:1-3.10-bullseye"
}

name을 수정할수 있다.

docker image도 넣을수 있다.

"postCreateCommand": "pip3 install --user -r requirements.txt"

앞에서는 수동으로 package를 설치해야햇는데 위 커맨드를 넣으면 빌드하면서 자동으로 설치해준다.

json파일을 변경하면 다음 화면이 나온다.

Alt text

다시 빌드하자.

혹시 창이 사라지면 아래쪽에 종모양을 눌러보면 보인다.

아니면 다시 열면 된다.(컨테이너에서 다시 열기)

Alt text

자동으로 설치한다.

많은 옵션이 있으므로 다음을 확인한다.

https://containers.dev/implementors/json_reference/

forwardPorts 를 해보자.

"forwardPorts": [
    3000,
    "serviceb:3000",
    "db:5432"
],
"portsAttributes": {
    "3000": {
        "label": "Service A (Main)"
    },
    "serviceb:3000": {
        "label": "Service B"
    },
    "db:5432": {
        "label": "Database Postgress"
    }
},

포트가 오픈된다.

Alt text

extension

그런데 아래 익스텐션은 왜 설치가 된걸가요?

내가 설치하라고 하지 않았고 설치되어있는걸로 보아 기본적으로 설치되는 것 같다.

docker image에 해결책이 있다.

현재 사용하고 잇는 docker image에는 자체적인 devcontainer.json 이 있다.

우리가 만든 devcontainer.json은 위 파일에 추가가 되는 형식이다.

https://github.com/microsoft/vscode-dev-containers/blob/main/.devcontainer/devcontainer.json

여기에서 기본파일들을 볼수가 있다. 그리고 python3의 경우에는 다음 경로에 있다.

https://github.com/microsoft/vscode-dev-containers/blob/main/containers/python-3/.devcontainer/devcontainer.json

Alt text

이것들을 설치하고 있다.

그럼 이제 내가 원하는 extension을 추가하고 싶으면 다음처럼 하자.

indent-rainbow를 설치하자.

Alt text

식별자를 알고 있어야한다.

"customizations": {
  "vscode": {
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
      "oderwat.indent-rainbow",
    ]
  }
},

Alt text

설치가 된다.

좀더 심화 과정

이제 나만의 도커로 사용해볼가?

Dockerfile을 만들자.

FROM nvcr.io/nvidia/tensorflow:23.12-tf2-py3

WORKDIR /code

COPY ./requirements.txt ./

RUN pip install --upgrade pip

RUN pip install -r requirements.txt

WORKDIR /code/src

CMD [ "python", "app.py" ]

이제 devcontainer.json을 수정하자.

{
  // "image": "mcr.microsoft.com/devcontainers/python:1-3.10-bullseye",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "postCreateCommand": "pip3 install --user -r requirements.txt"
}

다시 빌드하자.

동작할것이다.

docker-compose.yml도 사용할수 있다.

"dockerComposeFile": "docker-compose.yml",
"service": "python", // yml에서 service 이름
"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}"

# docker-compose.yml
version: '3.8'
services:
  python:
    build:
      context: ../
      dockerfile: ../Dockerfile
    volumes:
      - ..:/workspaces:cached
    command: /bin/sh -c "while sleep 1000; do :; done"

todo

바빠서 오늘은 여기까지..그런데 캐시는 어덯게?

• cache

• remote 서버에 잇는 docker

• cli