웹 VSCODE 개발환경 만들기

MAIN

군 생활을 하면서 하루 몇 안 되는 시간 동안 사이버 지식 정보방(이하 사지방)을 이용할 때마다, 항상 개발환경을 구축하고 설정하는 데 시간을 많이 차지하였습니다. 사지방 컴퓨터는 종료했다 다시 실행하면 로컬 디스크에 있던 파일들이 다 초기화가 되는 구조인지라, 이렇게 매번 환경구축을 하는 것이 시간 비효율적이고 여간 귀찮은 일이 아니었습니다.

하루는 깃허브 저장소를 둘러보다가, code-server라는 유용한 툴이 있었습니다. VSCODE를 웹에서 구현하여 사용하는 개발환경이었습니다. 웹 브라우저로 사이트에 접속하여 비밀번호를 입력하기만 하면 VSCODE 환경이 바로 보입니다. 터미널은 리눅스 기반인지라 vim 등 리눅스에 익숙한 저에게도 편할 것 같았구요.

설치하여 몇 번 사용해보니 너무 편했습니다. 단축키가 몇 개 동작하지 않는 것 빼고는 대부분 잘 동작하였습니다. 개발환경을 구축하는 시간을 최소화해주는 것이 좋았습니다. 그리고 언제 어디서나 접속을 할 수 있으니 꼭 부대 내 사지방이 아니더라도 접속할 수 있는 부분이 좋았습니다.

동시에, 파일 저장을 깜빡하고 꺼서 파일을 잃어버릴 일이 없게 되었습니다. 서버상에서 모두 저장되기 때문입니다.

그리고 AWS의 프리티어로도 충분한 퍼포먼스가 나오니, 따로 돈을 들이지 않는 것도 큰 장점이었습니다.

추천

code-server는 이런 분들에게 강력히 추천합니다.

  • 언제든지 접속하여 비밀번호만 입력하면 바로 개발환경이 보이도록 하고 싶은 분
  • 아이패드로도 코딩하고 싶으신 분
  • AWS, GCP 등 IaaS 서비스에 대한 기본적인 지식이 있으신 분
  • 지금까지 코드를 이메일이나 클라우드로 업/다운로드 해오신 분
  • 리눅스 기반 개발환경이 필요하신 분
  • 무료로 사용하고 싶으신 분
  • (선택) 도메인을 가지고 계신 분

배경지식

  • 아주 기본적인 vim 사용 지식 (열기, 수정, 저장)
  • 아주 기본적인 리눅스 사용법 (파일 탐색)

구축

code-server를 구축하는 방법을 소개합니다.

1. 서버 만들고 접속하기.

서버는 Ubuntu 18.04 기반, AWS 프리티어(t2.micro) 정도 성능을 가진 인스턴스이면 충분합니다. 개발언어에 따라 컴파일 성능 등에 따라 성능을 올려야 할 수도 있습니다.

이 글에서는 인스턴스 생성 방법 등은 따로 설명하지 않겠습니다.

설정해야 하는 것은 AWS 기준 아래 설정을 하면 됩니다.

  • Elastic IP (고정 IP)
  • Security Group 설정

그리고 putty 등을 이용하여 접속하면 됩니다.

2. nginx 설치 및 설정

$ sudo apt-get install nginx

설치 후 IP로 접속하여 Welcome to nginx 페이지가 잘 보이는지 확인합니다.

$ sudo su
# vim /etc/nginx/sites-enabled/default

모두 지우고 아래 내용으로 변경합니다.

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        location / {
                proxy_pass http://localhost:8080/;
                proxy_set_header Host $host;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection upgrade;
                proxy_set_header Accept-Encoding gzip;
        }
}

nginx 설정파일을 다시 불러옵니다.

# service nginx reload

2. code-server 설치 및 설정

# curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
# curl -fsSL https://code-server.dev/install.sh | sh

이렇게 하면 code-server 설치는 끝났습니다. 비밀번호를 설정합시다.

# vim ~/.config/code-server/config.yaml

password 부분을 원하는 비밀번호로 설정하면 됩니다.

# code-server

실행시킨 후, ip 주소로 접속해보면 익숙한 vscode 화면이 보일 것입니다.

1

3. 24시간 실행 설정하기

이대로 두면 연결해 둔 ssh를 종료하면 다시 접속할 수 없게 됩니다. ssh 종료 시에도 사용할 수 있게 하려면 스케줄러를 등록하여야 합니다.

# vim /etc/systeemd/system/code-serever.service
[Unit]
Description=Code Server IDE
After=network.target
[Service]
Type=simple
User=root
WorkingDirectory=/home/ubuntu
Restart=on-failure
RestartSec=10
ExecStart=/usr/lib/code-server /home/ubuntu
StandardOutput=file:/var/log/code-server-output.log
StandardError=file:/var/log/code-server-error.log
[Install]
WantedBy=multi-user.target

아래 명령어로 재시작합니다.

# systemctl restart code-server

그런데, 아래 명령어로 status를 확인하면 에러가 뜰 것입니다.

# systemctl status code-server

실행코드에 문제가 있는 것 같습니다. 제가 직접 테스트해보면서 코드 내부 PATH 문제가 있었던 것을 확인했습니다. 이것만 고쳐 줍시다.

4. 실행코드 수정

# vim /usr/lib/code-server/code-server

아래로 코드를 내려보면 이 줄이 있습니다. 이렇게 바꿔 주세요.

-생략-
# ROOT="$(root)"   <- 이 코드를 아래 코드로 바꿔 주세요.
ROOT="/usr/lib/code-server"
# systemctl start code-server
# systemctl enable code-server

이제 ip주소로 들어가 봅시다. 재시작도 해보죠.

# shutdown -r now

5. 도메인 설정 / SSL 적용

지금까지 http로 접속하기에, wireshark 같은 툴로 쉽게 도청을 할 수 있게 되는 상태가 됩니다. 앞으로 개발 환경으로 사용할 것이니 꼭 적용해야 할 것입니다. 실험용 또는 공부로만 사용하는 경우, 터미널에서 github 등 서비스에 로그인하는 경우가 아니라면 꼭 할 필요는 없지만, 하는 것을 권장합니다. 시간이 오래 걸리지 않습니다.

도메인을 가지고 있어야 합니다. 저는 work.sionuu.com 라는 도메인에 등록을 하여 SSL 적용까지 하겠습니다.

먼저 도메인 DNS 설정을 변경하여야 합니다. A 레코드로 work.sionuu.com이 ip주소로 향하게 하면 됩니다.

nginx 설정도 변경합시다. listen 부분을 모두 없애고, server_name work.sionuu.com로 변경해 주면 됩니다.

server {
        server_name work.sionuu.com;

        location / {
                proxy_pass http://localhost:8080/;
                proxy_set_header Host $host;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection upgrade;
                proxy_set_header Accept-Encoding gzip;
        }
}

그리고, certbot을 이용하면 됩니다.

$ sudo snap install --classic certbot
$ sudo ln -s /snap/bin/certbot /usr/bin/certbot
$ sudo certbot --nginx

이렇게 하면 이메일을 입력하고, 각종 동의를 얻고, 터미널에서 친절하게 어떤 주소에 SSL을 적용시킬 것인지 물어보게 됩니다. 단계에 따르면 됩니다.

$ sudo certbot --nginx
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator nginx, Installer nginx
Enter email address (used for urgent renewal and security notices)
 (Enter 'c' to cancel): sion@sionuu.com

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)gree/(C)ancel: A

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing, once your first certificate is successfully issued, to
share your email address with the Electronic Frontier Foundation, a founding
partner of the Let's Encrypt project and the non-profit organization that
develops Certbot? We'd like to send you email about our work encrypting the web,
EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y

Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: work.sionuu.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel): 1
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for work.sionuu.com
Waiting for verification...
Cleaning up challenges
Deploying Certificate to VirtualHost /etc/nginx/sites-enabled/default
Redirecting all traffic on port 80 to ssl in /etc/nginx/sites-enabled/default

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://work.sionuu.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Subscribe to the EFF mailing list (email: sion@sionuu.com).

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/work.sionuu.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/work.sionuu.com/privkey.pem
   Your cert will expire on 2021-02-15. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

그리고 work.sionuu.com에 들어가면 주소표시줄 쪽에 자물쇠가 채워져 있는 것을 볼 수 있습니다. 3

6. Swap 파일 만들기

t2.micro 성능 때문인지, 간헐적으로 접속이 끊기는 현상이 발생합니다. 그런 경우 시스템을 다시 재시작하면 되긴 하는데, 계속 이렇게 사용하면 많이 불편합니다. 2

메모리 SWAP 파일을 만들면 문제가 해결됩니다. 방법은 여기를 참조해주세요.

마무리

이렇게 웹 기반 VSCODE 구축을 완료하였습니다. 읽어 주셔서 감사합니다.

results matching ""

    No results matching ""