웹 VSCODE 개발환경 만들기
군 생활을 하면서 하루 몇 안 되는 시간 동안 사이버 지식 정보방(이하 사지방)을 이용할 때마다, 항상 개발환경을 구축하고 설정하는 데 시간을 많이 차지하였습니다. 사지방 컴퓨터는 종료했다 다시 실행하면 로컬 디스크에 있던 파일들이 다 초기화가 되는 구조인지라, 이렇게 매번 환경구축을 하는 것이 시간 비효율적이고 여간 귀찮은 일이 아니었습니다.
하루는 깃허브 저장소를 둘러보다가, 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 화면이 보일 것입니다.
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
에 들어가면 주소표시줄 쪽에 자물쇠가 채워져 있는 것을
볼 수 있습니다.
6. Swap 파일 만들기
t2.micro 성능 때문인지, 간헐적으로 접속이 끊기는 현상이 발생합니다. 그런 경우 시스템을 다시 재시작하면 되긴 하는데, 계속 이렇게 사용하면 많이 불편합니다.
메모리 SWAP 파일을 만들면 문제가 해결됩니다. 방법은 여기를 참조해주세요.
마무리
이렇게 웹 기반 VSCODE 구축을 완료하였습니다. 읽어 주셔서 감사합니다.