시작하기

이 글은 시놀로지에서 docker를 통해서 Visual Studio Code를 사용하는 방법을 정리한 글입니다. 최근 코딩을 엄청나게 하면서 잠깐 야외에 나갔을 때도 이어서 코딩을 했으면 좋겠다고 생각을 했는데, 집에 있는 NAS를 활용하면 좋겠다는 생각이 들어 code server(VSCODE)를 세팅하면서 이 글을 남깁니다. 작년에 NAS를 장만한 이유는 구글 학교 무제한 계정이 유료화되면서 급하게 사진을 옮길 공간을 찾았고, 여러 가지 세팅이 재미있어 보이는 NAS를 구입했습니다. 지금까지 미디어 서버, 백업, 구글넥스트의 airplay 기능, home assistant로 여러가지 기능을 만족하며 잘 사용하고 있고, 이번에 추가로 코딩도 나스 서버를 이용해서 해 보고자 합니다.

CODE SERVER를 설치하는 방법

  1. 먼저 도커에서 레지스트리에 들어가 code-server를 검색합니다. 검색
  2. 저는 별이 가장 많은 codercom을 선택했습니다.
  3. 다운받은 후 이미지를 더블 클릭 후 컨테이너를 만듭니다. 컨테이너
  4. 고급 설정으로 들어와서 자동 재시작을 활성화 시킵니다. 스크린샷스크린샷
  5. 포트 설정으로 와서 원하는 포트를 입력합니다. (기본 8080) 스크린샷
  6. 이후 환경에서 SHELL항목과 비밀번호도 추가하여 작성합니다. 스크린샷
  7. code server 폴더를 설정해 줍니다. 스크린샷따로 설정해 주는 이유는 나중에 git을 이용할 때 git의 key를 등록하기 위한 파일이 /home/coder/ 폴더 안에 생기기 때문입니다. project폴더를 기존 코딩할 때 사용하던 폴더로 연결 시켜 두었습니다.

    ⚠️ 그리고 위에 설정한 폴더들은 다른 도커 컨테이너를 이용할 때처럼 폴더 권한을 user로 주어야 합니다. 저는 user로 줬더니 권한이 없다고 나와서 everyone으로 주었습니다만, 원래는 그렇게 주면 절대 안 됩니다. 그리고 everyone으로 주었을 때 나중에 git key값은 600으로 바꿔 주어야 합니다.

  8. 적용을 누르고 컨테이너를 실행합니다.

CODE SERVER 실행 방법

  • NAS IP:8080 으로 들어가면 비밀번호를 입력하는 창이 뜹니다.

    스크린샷

  • 아까 설정한 환경 변수의 비밀번호를 입력하고 사용하면 됩니다.

    스크린샷

하지만 여기서 끝이 아니다...

네, 여기서 세팅이 끝나면 좋겠지만 끝이 아닙니다. 프론트엔드 프로젝트를 하기 위해서 git과 node, npm을 설치해야 하는데 bash shell이기 때문에 설치 방법이 조금 다릅니다. 먼저 node와 npm 설치부터 해 봅시다.

Node와 npm 설치

bash shell에서는 Node를 다음과 같이 설치합니다.

$ cult -sL [https://deb.nodesource.com/setup_10.x](https://deb.nodesource.com/setup_10.x) | sudo bash -
$ apt install nodejs

안되면

$ sudo apt install nodejs

출처 : https://0ver-grow.tistory.com/107

제대로 설치가 되었는지 노드 버전을 확인합니다.

$ node -v

그 이후 npm을 사용할 수 있게 아래와 같이 설치 명령어를 입력합니다.

$ apt-get install -y npm

출처 : https://stackoverflow.com/questions/45585029/bash-npm-command-not-found

shell에서 node 실행하기

평소 이용하는 것처럼 ‘npm’을 입력하고 사용할 수 있습니다.

yarn 설치하기

npm이 설치 되었으니 yarn도 설치해 봅시다.

npm install -g yarn
  • 역시 설치가 안 되면 앞에 sudo를 넣어 관리자 권한으로 해 보세요.

Node 업데이트하기

프로젝트를 실행하려고 하니 node버전이 낮다고 하네요. 업데이트는 다음과 같습니다.

node -v
npm cache clean -f
npm install -g n
n lts

출처 : https://walldaydream.tistory.com/entry/Nodejs-npm-업데이트-하기

아직도 더... (Github 연결하기)

bash shell에서 github를 사용해야 하기 때문에 ssh-key를 만들고 github에 등록합시다.

다음과 같이 이메일 주소를 함께 입력하세요.

ssh-keygen -t rsa -C "your_id@your_email_host.com"

아까 설정한 /home/coder/ 폴더 안에 /.ssh/id_rsa.pub 파일이 있을 것입니다. 메모장으로 열어서 안의 key를 모조리 복사한 후에 github.com으로 들어갑시다. 설정 순서는 다음과 같습니다.

  1. github.com에 접속
  2. 로그인
  3. 오른쪽 위 프로필 사진 클릭
  4. Settings 클릭
  5. 왼쪽 리스트 중에 ‘🔑 SSH and GPG keys’ 클릭
  6. new SSH keys 클릭
  7. 타이틀 아무렇게나 적고
  8. key는 아까 복사한 값 넣기
  9. Add SSH key 버튼 클릭
  10. 끝!

이제 진짜 끝! ... 은 아니고...

이제 즐겁게 Code Server를 사용해서 개발하면 되는데, CRA 프로젝트를 열심히 작성하고 yarn start를 하는 순간...

뚜둥...

지금 작업한 페이지는 어디에서 볼 수 있는 건가...

스크린샷

localhost 3000번으로 작동하고 있는데 나스 내부에서만 돌고 있는 포트라서 제 컴퓨터에서 확인할 수가 없습니다.

이제 다시 도커로 돌아가서 포트를 추가해줍니다. 자주 사용하는 3000번을 연결해주고 결과를 확인하면 아주 잘 나옵니다.

마무리 (하지만 다 부질없는 짓...)

나스를 가지고 뭘 만드는 것은 장난감을 가지고 노는 것처럼 즐거운 일이고, 오늘은 집에서 작업하는 것을 밖에서도 작업할 수 있기 때문에 아주 유용한 작업이라고 생각했으나 결과는 부질없는 짓이었습니다. 그 이유는 아래와 같습니다.

  1. 나스 사양이 느리기 때문에 코딩 작업은 할 수 있지만 test로 뭔가를 띄우는 것은 꽤 많이 힘들다.
  2. package설치가 오래 걸린다.
  3. 컴퓨터로 하는 게 훨씬 빠르다.
  4. 구름IDE등 지금 환경을 대체할 수 있는 여러 서비스가 많이 있다.

맥북 속도의 80% 정도만 나왔어도 잘 사용했을 것 같은데, 앞으로 잘 사용할 지는 시간을 두고 지켜봐야 겠습니다.

Last modified: 2022년 02월 22일

Comments

Write a Reply or Comment

Your email address will not be published.