개요
제가 자주 사용하던 구름 IDE는 온라인 통합 개발환경 서비스입니다. C, C++, PHP, Ruby, Python, Javascript, Node 및 Go 등 여러 언어를 지원하는데 특히 웹으로 인터페이스를 제공해주기 때문에 언제 어디서나 로컬에서 작업하는 것과 동일한 환경에서 SW 개발을 할 수 있습니다. 심지어 무료로 대부분의 기능을 무료로 사용 가능하다는 장점이 있습니다.
다만, 개인적인 아쉬움은 구름 IDE 에서 제공하는 텍스트 에디터의 기능이 현재 널리 사용되는 VSCode에 비하여 부족하기 때문에 현재는 자주 사용하고 있지 않았습니다.
구름 IDE의 핵심은 웹 인터페이스를 제공하는 것인데, code-server라는 오픈소스 프로젝트를 활용하면 언제 어디서나 접근 가능한 웹 기반의 개발 환경을 쉽게 구축할 수 있습니다. 이번 포스트에서는 기존에 구축한 NAS에 code-server를 설치하여 구름 IDE와 같은 개발환경을 구축해 보도록 하겠습니다.
사전 작업
Docker 설치
앞선 글 Docker 및 Portainer 설치하기를 참조합니다.
웹서버 (Nginx) 설치 및 설정
앞선 글 웹 서버 설치 및 설정 - Nginx (1/2)와 웹 서버 설치 및 설정 - Nginx (2/2)의 내용을 참조합니다.
서브도메인 생성
Digital Ocean의 DNS에 code-server 접속용 서브도메인을 위한 레코드를 추가합니다.
※ 본 글에서는 code.example.com을 생성한 것으로 가정합니다.
외부 접속을 위한 포트 개방
code-server가 사용하는 통신 포트를 개방합니다. 오라클의 가상 클라우드 네트워크의 접근 규칙과 iptables 방화벽에 서비스가 사용하는 해당 포트를 허용하는 규칙을 생성합니다.
- 오라클 가상 클라우드 네트워크 접근 규칙 수정
※ 메뉴 접근 방법은Oracle Cloud Infrastructure에서 특정 포트로 접근 허용하기를 참조합니다.
메뉴 접근 후, 설정할 항목은 다음과 같습니다.
TCP
- 소스 CIDR :
0.0.0.0/0 - IP프로토콜 :
TCP - 대상 포트 범위 :
8443
- iptables 방화벽 포트 허용
sudo iptables -A INPUT -p tcp -m tcp -m multiport --dports 8443 -j ACCEPT- iptables 방화벽의 설정 내용을 저장하고 다시 불러옵니다.
sudo netfilter-persistent save
sudo netfilter-persistent reload사용자 및 그룹 확인
code-server 이미지의 설정을 위해 현재 사용자(ubuntu)의 uid 및 gid를 확인해야 합니다. 출력된 값을 기록해 놓습니다.
$ id ubuntu
uid=1001(ubuntu) gid=1001(ubuntu) groups=1001(ubuntu),4(adm),20(dialout),24(cdrom),25(floppy),27(sudo),29(audio),30(dip),44(video),46(plugdev),110(lxd),114(netdev)Plex 설치 및 설정
code-server 설치
- 포테이너 관리자 페이지(
https://example.com/portainer)에 접속하여, [Stacks] → [+ Add stack]으로 이동합니다. 항목별 내용을 모두 입력한 후, 창 하단의 [Deploy the stack] 버튼을 누릅니다.
[Name]: code[Web editor]:
version: "2.1"
services:
code-server:
image: linuxserver/code-server
container_name: code-server
environment:
- PUID=1001
- PGID=1001
- TZ=Asia/Seoul
- PASSWORD=password #optional
- SUDO_PASSWORD=password #optional
- PROXY_DOMAIN=code.example.com #optional
volumes:
- /home/ubuntu/docker/code/config:/config
ports:
- 8443:8443
restart: unless-stopped리버스 프록시 설정
앞서 설명하였던 이유로 도메인을 이용할 경우 직접 http 접속이 되지 않습니다. 따라서 이번에도 Nginx를 이용해 리버스 프록시를 설정합니다.
별도의 설정 파일을 생성합니다.
$ vim ~/docker/nginx-ssl/etc/nginx/conf.d/code.example.com.conf# make sure that your dns has a cname set for code-server
server {
listen 80;
server_name code.exmaple.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name code.* "~^[0-9]{1,10}\.code\..*$";
include conf.d/ssl-params.conf;
client_max_body_size 0;
# enable for ldap auth, fill in ldap details in ldap.conf
#include /config/nginx/ldap.conf;
# enable for Authelia
#include /config/nginx/authelia-server.conf;
location / {
# enable the next two lines for http auth
#auth_basic "Restricted";
#auth_basic_user_file /config/nginx/.htpasswd;
# enable the next two lines for ldap auth
#auth_request /auth;
#error_page 401 =200 /ldaplogin;
# enable for Authelia
#include /config/nginx/authelia-location.conf;
set $upstream_app code.example.com;
set $upstream_port 8443;
set $upstream_proto http;
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}프록시 변경사항을 반영하기 위하여 포테이너를 사용하여 Nginx Container를 재실행합니다.
[Containers]에서 [nginxssl_nginx_1]을 체크, [Restart]로 nginx 서비스를 재시작합니다.
