VS code-server 에서 Dash App 실행, 이 부분을 놓치지 마세요!
목차
1. VS code-server에서 Dash App 실행할 때 고려 사항
VS code-server에서 Dash App을 실행할 때는 Local VS code에서 Dash App을 실행할 때 보다 세심하게 고려해야될 사항이 있다.
“VS code-server에서 Dash App을 실행하려고 할 때, 로컬 환경과는 조금 다른 문제에 부딪히게 된다.
로컬 VS Code에서 Dash와 같은 웹 기반 앱을 실행할 때는 단순히 브라우저에서 localhost 주소와 포트로 접근하면 되지만, 원격 서버에서 실행할 때는 네트워크 설정에 대한 추가적인 이해가 필요하다.
특히, 이 분야에 경험이 없다면 쉽게 막막함을 느낄 수 있습니다.
하지만 걱정하지 말자! 이 글에서는 서버나 네트워크에 대한 전문 지식이 없더라도 VS code-server에서 Dash App을 실행할 수 있도록 필요한 개념과 흐름을 쉽고 명확하게 정리해 보겠다.
2. 원격 VS code-server 환경 구성
원격 VS code-server가 어떤 환경에서 동작하는지 쉽게 이해할 수 있도록 그림을 준비했다.
이 그림에서는 원격 서버에 설치된 VS code-server에 사용자가 노트북을 통해 접속하는 과정을 보여주고 있다.

사용자는 공유기를 통해 서버에 접속하며, 이것은 우리에게 익숙한 환경이다.
문제는 VS code-server를 원격 서버에 직접 설치하고 운영하기 위해서는 서버 운영체제와 네트워크에 대한 기본 지식뿐만 아니라, 경우에 따라서는 전문가 수준의 기술이 필요하다는 점이다.
다행히도, 이러한 과정을 쉽게 만들어주는 패키지들이 존재한다. 예를 들어, Docker를 사용하면 VS code-server를 컨테이너 형식으로 손쉽게 배포하고 관리할 수 있다.
또한 Synology와 같은 NAS 서버에서도 패키지 센터를 통해 쉽게 설치할 수 있다.
이번 글에서는 이러한 패키지를 활용해 비교적 간단하게 원격 서버에 VS code-server를 설치하는 방법을 다루도록 하겠다.
2.1 왜 Synology NAS 인가?
Linux 기반의 개인용 서버인 Synology NAS에 Docker를 이용해 VS code-server를 설치하고 사용하는 방법을 설명하고자 한다.
Synology NAS는 원래 가정에서 영화, 사진, 음악 백업이나 스트리밍 서버로 많이 사용되었지만, 최근 Youtube, Netflix, Disney+, Tving 등의 OTT 서비스가 대중화되면서 개인용 스트리밍 서버로의 활용 빈도가 크게 줄어들었다.

그럼, 왜 하필 Synology NAS일까? Synology NAS는 Linux 기반이지만 복잡한 서버 구축 과정 없이도 간편하게 사용할 수 있는 직관적인 UI를 제공한다. 또한, Docker를 설치해 가상화된 환경에서 여러 애플리케이션을 손쉽게 운영할 수 있어 개인용 서버 구축에 매우 적합하다.
이처럼 활용도가 낮아진 NAS에 VS code-server를 설치하면 언제 어디서든 코딩 작업을 할 수 있는 환경으로 재 탄생시킬 수 있다.
물론, VS code-server를 설치할 수 있는 서버는 다양하다. Linux 기반 서버(Ubuntu, Debian 등)를 직접 구축하거나 AWS, Google Cloud Platform 같은 클라우드 서버도 좋은 대안이 될 수 있다.
하지만 직접 서버를 구축하고 관리하는 것은 쉽지 않고, 클라우드 서버는 추가 비용이 발생할 수 있다.
반면에, Synology NAS에 Docker를 이용하면 집에서 사용하는 NAS에 간단하게 code-server를 설치할 수 있고, 데스크톱이나 노트북을 항상 켜 둘 필요도 없다.
2.2 Docker의 기본 개념
Docker는 애플리케이션을 컨테이너로 묶어 배포하고 실행할 수 있도록 해주는 가상화 플랫폼이다. 그림을 보면, Docker는 호스트 머신의 하드웨어와 운영체제 위에 Docker 엔진을 설치하고, 그 위에서 여러 애플리케이션을 격리된 컨테이너로 실행하는 구조로 이루어져 있다.
컨테이너는 코드, 라이브러리, 설정 파일 등 애플리케이션 실행에 필요한 모든 요소를 포함하고 있어 어디서나 동일한 환경에서 실행될 수 있다. 이를 통해 개발 환경과 배포 환경 간의 불일치를 최소화하고, 시스템 자원을 효율적으로 사용할 수 있다.
예를 들어, App 1과 App 2가 격리된 상태로 실행되기 때문에 보안성이 높고, 서로 다른 애플리케이션 간의 간섭을 방지할 수 있습니다.
Synology NAS에는 ‘Container’라는 이름으로 Docker가 기본적으로 설치되어 있다. 이를 통해 사용자는 복잡한 설정 없이도 컨테이너를 쉽게 관리하고, VS code-server와 같은 애플리케이션을 빠르게 배포할 수 있다.

2.3 VS code와 VS code-server
VS Code는 Microsoft에서 개발한 오픈소스 코드 편집기로, 다양한 프로그래밍 언어를 지원하며 디버깅, 버전 관리, 코드 완성 등 풍부한 확장 기능을 제공한다.
로컬 환경에서 가볍고 빠르게 작동하며, 개발자들이 선호하는 다양한 테마와 커스터마이징 기능을 통해 편리한 개발 환경을 제공한다.
반면, VS code-server는 VS Code를 웹 브라우저에서 실행할 수 있도록 해주는 오픈소스 프로젝트이다. 이를 통해 개발자는 원격 서버에 VS code-server를 설치하고, 로컬 브라우저로 해당 서버에 접속해 코딩 작업을 수행할 수 있다.
이 방식은 어디서나 일관된 개발 환경을 제공하며, 저사양 장치에서도 서버의 자원을 활용해 작업할 수 있다는 장점이 있다.
아래 그림은 VS Code와 원격에서 실행되는 VS code-server 간의 개념을 나타낸 다이어그램이다. 왼쪽에는 로컬에 설치된 VS Code가, 오른쪽에는 원격 서버에 설치된 VS code-server가 표시되어 있다. VS code-server는 원격 OS 상에서 실행되며, 로컬의 VS Code 또는 웹 브라우저를 통해 원격 서버에 접속하여 소스 코드 작업, 터미널 명령 실행, 디버깅 등의 작업을 할 수 있다.

아래는 Local에서 VS code 실행 화면(좌)과 웹 브라우저를 통해 원격 VS code-server에 접속한 화면이다. 인터페이스는 거의 동일함을 알 수 있다.


2.4 Ploty Dash App
Dash App은 유명한 Python 그래픽 라이브러리인 Plotly에서 개발한 Flask 기반의 가볍고 단순한 웹 개발 환경이다. 일반적으로 웹 애플리케이션을 개발하려면 HTML, JavaScript, CSS, PHP 등의 언어를 사용해야 하지만, Dash App은 Python 기반의 Flask를 사용하기 때문에 Python에 익숙한 개발자라면 웹 애플리케 대시 이션을 상대적으로 빠르고 쉽게 개발할 수 있다.
또한, Plotly로 개발한 다양한 그래프를 코드 변경 없이 Dash App에 적용할 수 있어 데이터 시각화 및 대시보드 구축에 매우 유용하다다. 위 그림의 왼쪽에는 Plotly를 활용해 만들 수 있는 여러 종류의 차트들이 나와 있고, 오른쪽에는 Dash App을 사용하여 구현된 다양한 웹 애플리케이션 예시가 나와 있습니다. 이를 통해 통계 데이터 대시보드, 지리 정보 시각화, 데이터 분석 보고서 등 다양한 분야에서 Dash App을 활용할 수 있음을 알 수 있습니다.
이러한 장점 덕분에 Dash App은 복잡한 웹 개발 과정을 단순화하고, 강력한 데이터 시각화 기능을 빠르게 구현하고자 하는 개발자들에게 인기가 높습니다.


3. Docker에 VS code-server 설치
3.1 VS code-server 설치를 위한 Docker 설정
VS code-server는 Synology DSM에 기본적으로 포함되어 있지 않아 신규 설치해야한다. 설치하는 방법은 크게 두 가지이다.
- Synology DSM Container Manager에서 설치
– 설치 과정이 쉽고 간단하여 초보자도 바로 적용할 수 있다.
– 다만, 환경 변수 및 옵션 설정에 제한이 있어 복잡한 설정을 필요로 하는 경우에는 적합하지 않을 수 있다. - 서버 Command 창에서 docker-compose 로 설치
– Unix/Linux 명령어에 대한 기본적인 이해가 필요하지만,docker-compose.yml 파일을 사용하여
보다 세부적인 설정을 할 수 있다.
– 설정 내용이 파일로 저장되기 때문에 기억하기 쉽고, 환경 변수와 옵션을 자유롭게 조정할 수 있는 장점이 있다.
아래는 docker에 VS code-server를 설치하기 위한 설정 파일이다
version: '3.8'
services:
code-server2:
image: lscr.io/linuxserver/code-server:latest
container_name: code-server2
hostname: code-server
environment:
- PUID=1026 # 사용자 ID (UID)
- PGID=100 # 그룹 ID (GID)
- TZ=Asia/Seoul # 시간대 설정
- PASSWORD=5312 # 두 번째 Code Server의 접속 비밀번호
- SUDO_PASSWORD=5312 # 두 번째 Code Server의 접속 비밀번호
volumes:
- /volume1/container/code-server2:/config # 두 번째 인스턴스의 설정 저장소
- /volume1/container/code-server2/workspace:/home/coder/project # 두 번째 인스턴스의 설정 저장소
ports:
- 8444:8443 # 두 번째 인스턴스의 포트 매핑
restart: unless-stopped3.2 VS code-server 설치와 실행
Synology NAS에 docker-compose를 사용하여 VS code-server를 설치하고 실행하는 방법을 소개한다. 먼저 SSH로 Synology NAS에 로그인한 후, 설치할 디렉토리로 이동하고 필요한 설정을 진행하겠다
▪️ 설치 디렉토리 생성 및 이동
먼저, 아래 명령어를 사용하여 /volume1 디렉토리로 이동한 후, VS code-server를 위한 새로운 디렉토리를 생성하고 이동한다.
cd /volume1
mkdir code-server
cd code-server▪️ docker-compose.yml 파일 생성 및 편집
이제 docker-compose.yml 파일을 생성하고 편집기를 열어 설정을 작성한다.
nano docker-compose.ymlnano는 텍스트 편집기이며, 이 명령을 통해 docker-compose.yml 파일에 접속할 수 있다.
앞서 소개한 설정 내용을 참고하여 이 파일에 코드를 작성합니다. 작성이 끝나면 파일을 저장하고 편집기를 종료한다.
▪️ docker-compose 명령 실행
이제 docker-compose를 실행하여 VS code-server를 설치하고 컨테이너를 실행한다.
docker-compose up -d-d 옵션은 컨테이너를 백그라운드에서 실행하도록 한다. 이 명령이 성공하면 VS code-server가 설치된다.
▪️ 브라우저에서 VS Code-Server에 접속
설치가 완료되면, 브라우저의 주소창에 아래 주소를 입력하여 VS code-server에 접속한다.
http://192.168.0.172:8444/정상적으로 설치되었다면 브라우저에 VS code-server로그인 화면이 나타날 것이다. 아래 왼쪽 그림과 같은 화면이 보이면 성공적으로 설치 및 실행된 것이다. 이제 설정한 비밀번호로 로그인하면 오른쪽 그림처럼 vs VS code-server가 실행된 것이다.


4. Dash App 소스 코드와 실행
4.1 Dash App 소스 코드
아래 두 개의 간단한 Dash App 예제를 통해 원격 VS code-server에서 Dash App을 코딩하고 실행하는 방법을 살펴보겠다. 첫 번째 예제는 대륙별 인구, 수명, GDP 데이터를 시각화하고, 두 번째 예제는 Iris 꽃의 종별 꽃잎의 길이와 너비를 산점도로 표현한다.
이번 글에서는 코드의 상세한 내용보다는 여러 개의 Dash App을 VS code-server에서 독립적으로 실행하는 구조와 방법에 초점을 맞추고자한다.
# app1. py, Yirugo1 : Data, Graph, and Controls
HOST_NAME = os.environ.get('HOSTNAME','')
HOST_IP = "0.0.0.0" # Local 포함한 모든 Hosts, "127.0.0.1":Local Host만 실행됨.
APP_PORT = "8050" # 다른 app과 다른 포트 선택
# Local에서 VS Code 환경일 경우와 원격 vs-code 환경일 경우 브라우저에 요청하는 주소를 달리 설정
if "code-server" in HOST_NAME: # 원격 code-server
PROXY_PATH = "proxy"
requests_path = f"/{PROXY_PATH}/{APP_PORT}/"
else: # Local VS Code
requests_path = "/"
# Initialize the app
app = Dash(
__name__,
requests_pathname_prefix = requests_path, # 브라우저에 요청할 주소
external_stylesheets=external_stylesheets
)
#
# some dash layout code
# ...
# some dash callbacks code
# ...
# Run the app
if __name__ == '__main__':
app.run_server(debug=True, dev_tools_hot_reload=False, host=HOST_IP, port=APP_PORT)# app2.py, Yirugo2 : Analysis of Iris data using scatter matrix
HOST_NAME = os.environ.get('HOSTNAME','')
HOST_IP = "0.0.0.0" # Local 포함한 모든 Hosts, "127.0.0.1":Local Host만 실행됨.
APP_PORT = "8051" # 다른 app과 다른 포트 선택
# Local에서 VS Code 환경일 경우와 원격 vs-code 환경일 경우 브라우저에 요청하는 주소를 달리 설정
if "code-server" in HOST_NAME: # 원격 code-server
PROXY_PATH = "proxy"
requests_path = f"/{PROXY_PATH}/{APP_PORT}/"
else: # Local VS Code
requests_path = "/"
# Initialize the app
app = Dash(
__name__,
requests_pathname_prefix = requests_path, # 브라우저에 요청할 주소
external_stylesheets=external_stylesheets
)
#
# some dash layout code
# ...
# some dash callbacks code
# ...
# Run the app
if __name__ == '__main__':
app.run_server(debug=True, dev_tools_hot_reload=False, host=HOST_IP, port=APP_PORT)주요 코드 설명
app1과 app2에서 주목해야 할 중요한 라인은 3, 4, 9,16, 28번이다.
HOST_IP = "0.0.0.0": 이 설정은 Local PC뿐만 아니라 다른 PC에서도 Dash App에 접근할 수 있도록 지정하는 부분이다.
"127.0.0.1"이나 "localhost"로 설정하면 해당 앱에 접속이 가능한 PC가 해당 호스트로 제한된다.
그러나 code-server는 이미 외부에서도 접속 가능하도록 설정되어 있기 때문에 이 부분은 "0.0.0.0"이든 "localhost"든 상관없다.APP_PORT = "8050" (또는 "8051"): 각 앱이 실행될 포트를 지정하는 부분이다. 이 포트는 다른 앱과 겹치지 않도록 각 앱마다 고유한 값을 사용해야한다.
일반적으로 Dash App은 8050번대 포트를 사용하지만, 0부터 65535 사이의 사용 가능한 포트 중 선택할 수 있다.ChatGPT
- 잘 알려진 포트 (Well-Known Ports): 0번부터 1023번까지. 주로 HTTP(80), HTTPS(443), FTP(21)와 같은 표준 서비스에 사용됩니다.
- 등록된 포트 (Registered Ports): 1024번부터 49151번까지. 특정 애플리케이션 및 서비스에 의해 사용될 수 있도록 할당된 포트들입니다. 예를 들어, 3306번은 MySQL에 할당되어 있습니다.
- 동적/임시 포트 (Dynamic/Private Ports): 49152번부터 65535번까지. 일반적으로 클라이언트 측의 응용 프로그램이 동적으로 사용하는 포트 범위입니다. 서버-클라이언트 통신에서 클라이언트 측에서 자동으로 할당되는 포트들이 여기에 해당됩니다.
이 부분은 원격 code-server 환경과 로컬 VS Code 환경에 따라 브라우저 요청 주소를 다르게 설정한다.
원격 code-server에서는 proxy를 통해 Dash App에 접속하므로 "requests_pathname_prefix"를 /proxy/<포트>/ 형식으로 지정한다.# app1.py
requests_pathname_prefix = "/proxy/8050/"
# app2.py
requests_pathname_prefix = "/proxy/8051/"“requests_pathname_prefix“에 대한 정의는 아래 Dash API Reference 문서에서도 확인이 가능하다.
requests_pathname_prefix
A local URL prefix for file requests. Defaults to url_base_pathname, and must end with routes_pathname_prefix. env: DASH_REQUESTS_PATHNAME_PREFIX
type: string
Dash API Refrence
지정한 HOST_IP와 APP_PORT로 앱을 실행한다.4.2 Dash App 실행
VS code-server에 접속한 후, Dash App을 실행하는 방법과 그 과정에 대해 알아보겠다. 아래 다이어그램은 클라이언트와 서버 간의 연결 과정을 나타내며, code-server에서 Dash App이 어떻게 실행되는지 보여줍니다.
- code-server 접속
– 웹 브라우저에서 http://192.168.0.172:8444로 접속하여 code-server에 로그인 - 소스 코드 열기
– code-server 내에서 app1.py와 app2.py 파일을 각각 연다.
– 오른쪽 상단의 “Run Python File in Dedicated Terminal” 버튼을 클릭
– 각 파일을 실행하면 소스 코드별로 터미널이 생성된다.
– Dash App이 백그라운드에서 실행된다. - 브라우저에서 Dash App 실행
– 실행 후 터미널 하단에 “Open in Browser” 버튼이 나온다.
– 이 버튼을 클릭하면 새로운 브라우저 탭에서 Dash App이 실행
– app1.py 실행 주소 : http://192.168.0.172:8444/proxy/8050/
– app2.py 실행 주소 : http://192.168.0.172:8444/proxy/8051/ - Dash App의 실행 주소 확인
– Dash App이 실행되는 주소는 code-server의 “PORT” 창에서도 확인할 수 있다.
– 해당 주소 위로 마우스를 올리면 Dash App을 실행할 수 있는 세 가지 옵션이 나온다
– Copy Local Address: 로컬 주소를 복사
– Open in Browser: 브라우저에서 Dash App을 실행
– Preview in Editor: code-server 편집기에서 Dash App을 미리 본다.

위 다이어그램은 클라이언트와 서버 간의 연결 구조를 나타내고 있다:
- 왼쪽의 클라이언트 부분은 Dash App에 접속하는 브라우저 창을 보여준다.
- http://192.168.0.172:8444로 code-server에 접속하여 Dash App을 실행한다.
- 가운데 라우터는 클라이언트가 서버에 접속할 때 사용하는 포트(8444)를 나타낸다.
- 오른쪽의 서버 부분은 Synology NAS에서 Docker 컨테이너를 통해 code-server와 Dash App(app1.py, app2.py)이 각각 포트 8050과 8051로 실행되는 모습을 보여준다.
- code-server는 외부에서 들어오는 요청을 Proxy를 통해 해당 컨테이너의 포트로 전달하여 Dash App에 접속할 수 있도록 한다.
아래 다이어그램은 클라이언트와 서버 간의 연결 과정을 나타내며, code-server에서 Dash App이 어떻게 실행되는지 animation으로 보여주고 있다.

- app1.py를 실행한다.
- 브라우저 두번째 탭에 “Dash”이름으로 열린다.
- Dash 테이블과 그래프를를 확인한다
- 다시 첫번째 탭으로 돌아와서 app2.py를 실행한다
- 브라우저 세번째 탭에 “Dash”이름으로 열린다.
- 산점도 그래프를 확인한다.
5. 결론
이번 글에서는 Synology NAS에 Docker를 활용하여 원격 VS code-server 환경을 구축하고, 이를 통해 Dash App을 실행하는 방법에 대해 다루었다.
먼저, Synology NAS를 선택한 이유와 Docker의 기본 개념을 소개하고, docker-compose를 이용해 VS code-server를 설치하는 과정을 자세히 설명했다. 이어서, 여러 Dash App을 독립적으로 실행하기 위해 포트와 URL 경로를 설정하는 방법에 대해 살펴보았다.
특히, Dash App을 VS code-server 환경에서 실행할 때 고려해야 할 네트워크 설정과 URL 경로 지정 방법을 다루며, 실습 예제(app1.py, app2.py)를 통해 실행 과정을 구체적으로 설명했다.
이러한 과정을 통해, Synology NAS에 code-server와 Dash App을 배포하는 것이 로컬 환경에서 작업하는 것만큼이나 효율적이고 편리하다는 점을 확인할 수 있었다.
이처럼 Synology NAS와 Docker, VS code-server, Dash App을 활용하면 가정이나 사무실에서 저렴하고 효율적인 원격 개발 환경을 구축할 수 있다. 이를 통해 서버와 클라우드 환경에 대한 지식이 많지 않더라도 유연한 개발 및 배포가 가능하며, 데이터 시각화, 대시보드 개발 등 다양한 프로젝트에 활용할 수 있다. 앞으로 이 글을 바탕으로 더 많은 개발자나 취 자신의 작업 환경을 최적화하고, 어디서나 편리하게 코딩할 수 있기를 기대한다.




