# dev container

## 1. install docker

install docker

## 2. install vscode

install vscode

## 3. install vscode extension

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-5d4afc3c9f3e6bbdab1582ebf82e7ce71538dad8%2Fimage.png?alt=media)

install dev container extension

## 4. create dev container

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-c8ada9e1aa25a2f305a5695481c1b463c024cb64%2Fimage-1.png?alt=media)

no python extension

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-709a64d851a08a6581323f629f8c7c2c97e74578%2Fimage-2.png?alt=media)

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-7da11c442b8a3b357d5ee872c13a0985fc8595b7%2Fimage-3.png?alt=media)

에러 난다.

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-0206be723307fcde99069ee4ad0eb57336f967e8%2Fimage-4.png?alt=media)

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

그래서 dev container를 사용한다.

## setup dev container

cmd + shift + p

add dev container

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-05caf66d69ef5c7a5e6922b1c06776f513783453%2Fimage-5.png?alt=media)

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-67186adab15922c11786ce80c40a19e6874b9a2b%2Fimage-6.png?alt=media)

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-a08b1c52ee0adba45fbe4225cb3d73821ae8aca7%2Fimage-7.png?alt=media)

3.10 bullseye

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-e96fb9ad85ec577c83f54df2629a578e0ec08763%2Fimage-8.png?alt=media)

추가 기능 (일단 패스)

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-fa5596dcbfad5b39031d5bdde65485796e464dd1%2Fimage-9.png?alt=media)

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-90282322ebe18cb08bff15545b1738930a3506c7%2Fimage-10.png?alt=media)

다시 vscode 열기

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

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

1. .devcontainer 폴더를 만들고
2. 그안에 devcontainer.json을 만들고
3. 필요한 내용을 넣어주면 된다.

## dev container 실행

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

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

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

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-007800504f6ec96971d965f6465ab4b7643f89ef%2Fimage-11.png?alt=media)

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-869fa84243d9517891712a3feefd75c9bbfceb93%2Fimage-12.png?alt=media)

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

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

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

## python code 실행

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-ee3e4cc7489df6a4abbb00db76f8a952a7f7d0e8%2Fimage-13.png?alt=media)

실행 버튼을 눌러보자.

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-1305e30f951862c18e13d7a520547a6c996dce0f%2Fimage-14.png?alt=media)

일단 사용안함으로 하자.

실행하자. 에러..

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-8e786fba40787de05c5fc04031f359fad1dff45a%2Fimage-15.png?alt=media)

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

설치하자.

```sh
pip: -r requirements.txt
```

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-0544dd34b353bf71263c13ef6d403402c58dd7ae%2Fimage-16.png?alt=media)

다시 실행하자.

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-c9b6e39327a753e27cd1dafcef5b98fad5d9bea6%2Fimage-17.png?alt=media)

동작한다.

## repoen project

프로젝트를 vscode로 연다.

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

빌드하면서 오픈한다.

## 심화과정

[https://containers.dev/](https://containers.dev/)

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

[https://containers.dev/implementors/spec/](https://containers.dev/implementors/spec/)

여기도 도움이 된다.

## devcontainer.json 파일을 수정

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

name을 수정할수 있다.

docker image도 넣을수 있다.

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

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

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-c4d19bed47fa0023b9ea75b8b52f9aba64526442%2Fimage-18.png?alt=media)

다시 빌드하자.

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

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-dd1a76247e49ac94eabf7a90fa93e245481e49da%2Fimage-19.png?alt=media)

자동으로 설치한다.

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

[https://containers.dev/implementors/json\_reference/](https://containers.dev/implementors/json_reference/)

forwardPorts 를 해보자.

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

포트가 오픈된다.

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-c0b870e7f8b55aba15c4b51bf2aab2bbdfb3c782%2Fimage-20.png?alt=media)

## extension

그런데 아래 익스텐션은 왜 설치가 된걸가요? ![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-4ab761fa0d32febbe38e1c6df9fb64ee305e7cf4%2Fimage-21.png?alt=media)

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

docker image에 해결책이 있다.

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

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

[https://github.com/microsoft/vscode-dev-containers/blob/main/.devcontainer/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](https://github.com/microsoft/vscode-dev-containers/blob/main/containers/python-3/.devcontainer/devcontainer.json)

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-fe8336c935011bd57ce7b4b4f67caa7296da0ef2%2Fimage-22.png?alt=media)

이것들을 설치하고 있다.

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

indent-rainbow를 설치하자.

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-468ff504eaa0a6cd3f879101ec863b5a922224df%2Fimage-23.png?alt=media)

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

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

![Alt text](https://3379277180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaoWGMVdC3ztoOAzHPq%2Fuploads%2Fgit-blob-72c30ab3bc980ef6fea5df8ba154448056585753%2Fimage-24.png?alt=media)

설치가 된다.

## 좀더 심화 과정

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

Dockerfile을 만들자.

```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을 수정하자.

```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도 사용할수 있다.

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

```yaml
# 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
