Docker를 활용한 VS Code 웹 설치 및 Python 환경 설정 가이드

Docker를 이용하여 웹 기반의 Visual Studio Code(이하 VS Code)를 설치하고, Python 개발 환경을 구축하는 방법을 소개합니다. 이를 통해 어디서든지 웹 브라우저를 통해 Python 코딩을 할 수 있습니다.

 

 

 

1. Docker를 통한 VS Code 웹 설치

 

이전에 Docker를 활용하여 VS Code를 웹에서 실행할 수 있도록 설정하였습니다. 설정이 완료되면 아래와 같은 화면을 통해 웹에서 VS Code에 접속할 수 있습니다.

Web으로 접속한 화면

 

그러나 초기 설정 상태에서는 Python 인터프리터가 설치되어 있지 않아 Python 코드를 실행할 수 없습니다.

 

 

 

도커를 클릭하게 되면 아래와 같은 화면에서 컨테이너 내가 설치한 code-server를 클릭한다. 

 

 

2. Docker 컨테이너 내 Python 설치

 

Python 환경을 구축하기 위해 Docker의 터미널을 활용하여 Python과 pip를 설치합니다.

 

1. Docker 컨테이너 접속:

• 시놀로지 NAS의 Docker 애플리케이션을 실행합니다.

• ‘컨테이너’ 탭에서 실행 중인 code-server 컨테이너를 선택하고, ‘세부사항’을 클릭합니다.

• ‘터미널’ 탭에서 ‘생성’을 클릭하여 새로운 bash 셸을 엽니다.

 

Docker

 

 

세부사항을 클릭한다.

 

Docker

 

 

세부사항을 클릭하게 되면 아래와 같은 화면이 나타나게 된다.

아래 화면에서 터미널, 생성을 클릭하게 되면 bash 쉘이 한개 추가 되게 된다.

일단 여기에서 설치를 하면 권한이 root라서 모든 것을 설치할 수가 있다.

 

 

 

자 이제 bash를 클릭하면 다음과 같은 커맨트 창이 활성화 되게 된다.

 

 

 

apt update를 해주면 설치가 가능한 패키지 리스트를 최신화

 

2. 패키지 목록 업데이트:

 

apt update

 

이 명령어는 설치 가능한 패키지 목록을 최신 상태로 업데이트합니다.

우분투에서는 패키지 설치를 위해서 보편적으로 apt(Advance Packging Tools) 명령어를 사용

o update - 설치 가능한 패키지 리스트를 최신화
o upgrade - 실제 업데이트

 

 

 

명령어를 실행하게 되면 아래와 같다

 

apt list --upgradable 를 실행해줘도 무방하다. 업그레이드 된 것을 확인하는 작업이다.

 

 

 

 

3. Python3 설치:

apt install python3

 

설치 과정 중 계속 진행할지 묻는 메시지가 나타나면 ‘Y’를 입력하여 진행합니다.

 

 

 

아래에  계속 할 것인지 물어보면 Y하고 엔터를 입력한다.

 

 

 

 

입력을 하게 되면 정상적으로 설치가 되게 된다.

아래는 설치가 진행되는 화면이다.

 

4. pip 설치:

apt install pip

 

마찬가지로 진행 여부를 묻는 메시지에 ‘Y’를 입력하여 설치를 완료합니다.

 

 

 

설치가 완료되면 아래와 같은 화면이 된다. 거의 변화가 없을 것이다.

그리고 바로 apt install pip 를 입력하여 PIP를 설치해준다. 

PIP는 python으로 작성된 패키지의 설치 및 관리를 해주는 프로그램이다.

 

 

 

 

pip가 설치되는 화면이다. 중간에 계속 할 것인지 물어 본다. Y누르고 엔터 계속 진행 한다.

 

 

 

 

설치가 진행중이다..... 기다려~~~ 이제 얼마 안남았다. 

 

 

띵동 이제 python , pip 를 설치했으니 이제 web vscode로 돌아가서 터미널로 설치 해보자

 

 

 

이제 우리가 web으로 설정한 주소로 접속을 해보자 그러면 다음과 같은 화면이 나타날 것이다.

빨간색 네모칸 근처에 마우스를 가까이 가져가면 파일한개를 추가할 수 있다. test.py를 하고 추가 한 다음에

print("test")를 입력하고 옆에 빌드 버튼 ▷를 클릭하게 되면 흠 아직까지 python path가 제대로 안되어 있는 것 같다.

 

 

 

3. VS Code에서 Python 환경 설정

 

Python과 pip 설치가 완료되면, 웹에서 접속한 VS Code에서 Python 개발 환경을 설정합니다.

 

1. Python 확장 프로그램 설치:

• VS Code의 왼쪽 사이드바에서 ‘확장 프로그램’ 아이콘을 클릭합니다.

• 검색창에 ‘Python’을 입력하고, Microsoft에서 제공하는 Python 확장을 설치합니다.

 

2. Python 인터프리터 선택:

• 단축키 Ctrl + Shift + P (Mac의 경우 Cmd + Shift + P)를 눌러 명령 팔레트를 엽니다.

• ‘Python: Select Interpreter’를 입력하고 선택합니다.

• 설치된 Python3 인터프리터를 선택합니다.

 

3. Python 파일 실행:

• 새로운 Python 파일을 생성하고 코드를 작성합니다.

• 상단의 ‘Run’ 버튼을 클릭하여 코드를 실행합니다.

 

 

보조적인 모듈도 깔아주고 하자

모듈을 클릭하고 python 를 입력하면 ms-python이 나타나게 된다. 

 

 

설치 설치 클릭 하면 인스톨이 된다.

 

 

이제 인터프리터를 연결하자

 

(Windows) SHIFT + CTRL + P 를 누르면 명령어창이 뜨고 거기에 Python Select interpreter라고

 

입력하고 엔터를 하면 인터프리터를 선택할 수 있다.

 

python 2.x 버전이 같이 깔려 있다면 번갈아가면서 할 수 있다.

 

(Windows) SHIFT + CTRL + P
(IOS) SHIFT + CMD + P

 

 

 

빌드 옆에 아래 버튼을 클릭하게 되면 Run Python File 을 클릭하게 되면 다음부터는 Python으로만 빌드하게 된다.

 

 

 

자이제 정상적으로 빌드가 되어 test가 찍히는 것을 확인할 수 있다.

자자 이제 Python을 공부할 때 필수적으로 필요한 패키지를 한번 설치 해보자

자기가 공부하고자 하는 패키지를 설치하면된다.

저는 요즘에 requests 하고 bs4를 공부하고 있다 크롤링이랑 웹으로 send메시지를 보내는 것을 공부중이라서 

이 두개의 패키지를 설치해 보도록 하겠다.

 

 

4. 추가 패키지 설치

 

필요한 Python 패키지를 설치하여 개발 환경을 더욱 풍부하게 구성할 수 있습니다.

 

1. 터미널 열기:

• VS Code 내에서 터미널을 열려면 Ctrl + Shift + ~ (Mac의 경우 Cmd + Shift + ~)를 누릅니다.

 

2. 패키지 설치:

• 예를 들어, requests와 beautifulsoup4 패키지를 설치하려면 다음 명령어를 입력합니다.

 

pip install requests

 

 

pip install bs4 입력

 

 

 

5. 다양한 개발 환경 구성

 

시놀로지 NAS의 메모리를 확장하였다면, Docker를 활용하여 여러 개의 code-server 컨테이너를 생성하고, 각 컨테이너에 Python, Go, C++ 등 다양한 개발 환경을 구축할 수 있습니다. 이를 통해 각 언어별로 독립적인 개발 환경을 유지하며 효율적으로 작업할 수 있습니다.

 

이 가이드를 통해 웹 기반의 VS Code에서 Python 개발 환경을 구축하고, 어디서든지 편리하게 코딩을 즐기시기 바랍니다.

 

이 포스팅이 도움이 되셨다면 공감(♥)과 댓글 부탁드립니다! 더 많은 개발 관련 가이드를 원하신다면 구독도 잊지 마세요! 😊

 

 

시놀로지 DS220+ NAS에서 Docker를 이용한 웹VSCode설치

 

시놀로지 DS220+ NAS에서 Python 코딩하기(jupyter-notebook)