최근에 xps를 팔고, 아이패드 프로 12.9만 남으면서 아이패드로 간단하게라도 개발을 할 수 있는 방안을 열심히 찾다가 code-server를 접하게 되었습니다.
기존에 Remote-ssh 등으로 원격 개발이 가능한건 알고있었지만, 아이패드용 vscode가 없으니 오또케오또케 하던 와중에 찾은 방법이라 신기하면서도 환호했네요.
다만 헤놀+도커 조합으로 사용해보려고 하니 한가지 문제점이, DSM시스템에서 웹서버를 띄울때 사용하는 nginx가 기본설정으로는 웹소켓에 대응이 불가능 하다는 점이였습니다. ddns+포트번호 붙여서 접속하는건 잘되고 리버스 프록시를 이용한 접속은 되질않아서 머리가 아팠는데, 엔진엑스와 웹소켓 문제였다니 허탈했네요 ㅎㅎ;
메모와 공유 차원에서 구축방법과 해결방안을 남겨봅니다. :D
시놀로지에서 code-server를 구축하는 방법은 간단합니다. 먼저 시놀로지용 도커를 실행하고 code-server 이미지를 다운받습니다. 저는 이미 다운로드 받았기 때문에 이미지 메뉴에서 보이지만, 새로 받을때는 레지스트리 메뉴에서 빨간줄 그은 이미지를 검색해서 다운받으시면 됩니다.
+ 추가내용
확인해보니 latest가 최신버전인 3.1.1이 아니라 3.0.2버전으로 생성된 이미지였습니다 ㅡ,.ㅡ;;;
latest태그 대신, 3.1.1 태그를 지정해서 받아주세요.
그리고 해당 이미지를 실행할때, 꼭 고급설정을 눌러 볼륨을 지정해주세요. 컨테이너 내에서 마운트할 위치는 /home/coder 또는 /home/coder/project로 하시면 되고, 포트번호는 그냥 자동으로 두거나 원하는 포트를 지정하셔도 됩니다.
+ 추가내용
docker run -it -p 127.0.0.1:8080:8080 -v "$PWD:/home/coder/project" -u "$(id -u):$(id -g)" codercom/code-server:3.1.1
project 폴더 관련 권한이슈 때문에, user id, group id를 추가로 전달하는 옵션이 생겼습니다. cli 환경에서는 해당 옵션을 주시면 권한이슈없이 정상적으로 마운트될것으로 예상되고, gui로 작업을 하고싶으시다면 /home/coder 까지만 마운트 해주세요. 또한, 시놀로지쪽에 지정한 경로는 반드시 users 그룹에서 읽기/쓰기가 가능해야 합니다.
마지막으로, https를 사용하려면 환경 탭에서 --cert 옵션을 사용하셔야 합니다. 아래와 같이 해주시면 됩니다. 그리고, +를 눌러 PASSWORD 변수를 추가해주면 원하는 비밀번호를 설정 가능하다고 합니다(감사합니다 ^^).
그 외 다른 설정은 딱히 건드릴 필요 없으니 신경쓰지 않으셔도 괜찮습니다.
혹시 내부망에서만 사용할 계획이라 비밀번호가 필요없으시다면, 뒤에 --auth none 옵션을 추가해주시면 됩니다.
고급설정 적용후 다음을 누르면 최종 설정 확인이 나오는데, 의도한대로 설정이 됐다면 적용을 눌러 컨테이너를 실행해주시면 됩니다. 실행후에는 우측 컨테이너 메뉴에 현재 실행중인 컨테이너 목록으로 방금 실행한 code-server 컨테이너가 보일것입니다.
해당 컨테이너를 더블 클릭하거나, 세부사항을 클릭해 다음 창을 띄우고 로그를 확인해주세요. 만약 위에서 비밀번호를 직접 지정해주지 않으셨다면, 해당부분에 접속을 위한 랜덤 비밀번호가 생성되어 있습니다. 가장아래 실패 로그는 제가 접속할때 비밀번호를 잘못넣은것이라 ^^;; 신경쓰지마세요~
이제 localhost:8080 또는 포트포워딩 후 외부ip:8080으로 접속해보시면 익숙한 VSCode가 보일 것입니다. 여기까지만 해도 사용하는데는 문제가 없지만, 리버스 프록시를 이용하기 위해선 몇가지 설정이 더 필요합니다.
먼저 제어판-응용 프로그램 포털-역방향 프록시 항목으로 이동한 후, 생성을 클릭하면 다음 창이 뜰텐데요.
설명은 알아보기 쉽게 code등으로 쓰시고, 호스트 이름(소스)은 (원하는이름).(기존사용중인도메인) 형식으로 작성하시면 됩니다. 포트는 https사용시 443, http 사용시 80으로 하시면됩니다. 웬만하면 https+443 사용을 추천드립니다. https가 아니면 vscode web 사용에 제약이 생기니 주의해주세요.
호스트 이름(대상)은 헤놀이 부여받은 내부ip주소를 쓰시고, 포트(대상)는 아까 도커에서 설정해줬던 포트를 적어주시면 됩니다. 그 다음 중요한 부분이 '사용자 지정 머리글' 메뉴입니다.
생성 옆에있는 화살표를 누르시면 WebSocket 이라는 이름의 메뉴가 나오는데, 해당 메뉴를 클릭하시면 다음과 같이 자동생성됩니다.
여기까지 하셨다면 이제 확인을 눌러서 저장해주시고, 설정한 주소로 접속해 비밀번호 입력창이 뜨는지 확인해보시면 됩니다. 잘 뜬다면 이제 아까 확인했던 비밀번호를 입력하고, 웹으로 VSCode를 사용하시면 됩니다.
단, 주의하실 점은 마켓플레이스에서 확장프로그램 설치시 설치가 완료되기 전까지 접속이 끊기며, 설치를 지원하지 않는 플러그인이 있을수도 있다는 점 입니다. 필수로 사용하는 플로그인이 있다면 설치가능 여부를 확인하시고, 마켓플레이스에서 바로 설치가 불가능하다면 직접 설치용 파일을 만들어 설치해야 합니다.
저 헤더 설정부분을 몰라서 하루내내 헤맸는데, 하고나니까 별거 아니네요. ^^; 이제 저는 아이패드용 매직키보드가 배송오기만을 기다리고 있습니다...
도움이 되셨다면 좋겠습니다. 감사합니다~
이런 것도 있는 줄 처음 알았네요^^
알려주신 스텝으로 따라해보았습니다.
비밀번호는 환경쪽에 PASSWORD를 추가해주니 원하는 값으로 고정해 사용할 수 있었습니다.
다만 역방향 프록시가 동작하지 않아 확인해보니
Not serving HTTPS이라며 로그에 찍힙니다.
검색해보니 ssl 인증서를 따로 설정해 줘야하는것 같더라구요.
혹시 도커 설정에 ssl 관련 옵션을 어떻게 주셨을까요?
https는 실행시 추가 명령어로 --cert 옵션 주시면 자체 서명된 인증서로 https접속이 가능합니다. 해당내용 추가해둬야겠네요~
했었는데.. 이제 태블릿으로 코딩이군요..
그런데 궁금한게 한가지 있는데
도커쪽 작업한 파일들을 시놀로지쪽에서 확인하려면 어떻게 해야 하나요?
마운트 경로 '/home/coder/project'에서 VS Code로 'test.htm' 파일 작업을 하고 저장을 하면
시놀로지쪽 'homes/chiyak' 폴더에도 'test.htm' 파일이 저장되는게 아닌가요?
기존에 시놀로지에 소스들을 어디서나 편집하고 싶어서 강좌를 따라한건데 잘 모르겠습니다.
어떻게 해야 할까요?
이해하신 내용이 맞는데, 찾아보니 project 폴더는 권한이슈가 있어 현재 해당 경로로 마운트하면 파일 읽기쓰기가 제대로 안되는듯 합니다. 마운트 경로를 /home/coder 까지로 바꿔주세요.
또한, 시놀로지측 실제 파일이 저장될 공간은 반드시 users 그룹이 읽기/쓰기 가 가능해야합니다. 본문 예시처럼 homes에 계정별로 부여되는 폴더를 그대로 쓰고 싶으시다면, homes 공유폴더에 대한 권한을 제대로 부여하셔야 합니다.
제대로 확인을 안했더니 이런 문제가 있네요... ㅜㅜ 위 수정사항대로 바꾸고 나니 저도 도커에서 저장한 파일이 시놀로지 쪽에서도 정상적으로 보입니다.
전 '/home/coder/project' 대신 '/home/coder'로 경로를 바꾸면 실행시 Docker API 어쩌구 에러가 나네요.
일단 /home/coder/project로 도커 실행 후 VS Code 터미널에서
chmod로 project폴더나 기타 다른 마운트 폴더에 읽기/쓰기 권한을 주니까 도커쪽 목록이 보이고 서로 동기화되네요.
덕분에 외부에서 작업을 편하게 할 수 있게 됐습니다.
정말 감사합니다~
이건 도커 이미지를 버전업된걸로 다시 받아야 하는걸까요?
메시지에 같이 뜬 업데이트 버튼을 눌러도 실패라고만 뜨네요.
chown -R coder:users /usr/local/lib 명령어로 권한수정을 해주면 제대로 업데이트가 될것이라고 합니다만, 제 경우는 리버스 프록시 사용중이라 그런지 통신자체를 못하는것으로 보여서..;; 그냥 업데이트 끄고 쓰기로 했습니다.
+ 추가내용
docker run -it -p 127.0.0.1:8080:8080 -v "$PWD:/home/coder/project" -u "$(id -u):$(id -g)" codercom/code-server:latest
해당 이미지 github에서 권한관련 이슈때문에 user id, group ip를 추가로 전달하는 옵션이 생겼습니다. gui대신 ssh로 접속해서 위 명령어(-u 부분)로 컨테이너 실행하시면 더이상 볼륨 마운트 문제는 없을것으로 예상됩니다.(혹시 이래도 안된다면 /home/coder로 다시 시도해보세요!)
(/home/corder 로 하면 오류떠서 project까지 포함해서 마운트후 터미널에서 chmod로 권한 주기)
1. 어떻게 하다보니 배포처가 linuxserver.io인 곳에서 도커 허브 URL 링크로 다운받아서 설치 완료한 상황인데요 codercom과의 차이는 무엇일까요?
2. 시놀로지에서 도커와 이미 올라와있는 컨테이너들이 어디까지 동작하고 기능을 할 수 있을지 찾아보고 있습니다.
- 이렇게 설치된 상황에서 아나콘다 등을 설치하려면 설치.. 가능한가요?
이런 귀한 정보를..... 감사합니다. 다시 도전 !~
추가 - 너무 잘되네요.
제 경우 시놀에서 도메인 받아서 역방향으로 외부 VPS 에 보냈는데 (오라클 무료 VPS)
VPS 에 도커 설치하고, code-server 잘됩니다. 감사합니다.