Home

CATEGORY
  • iplug2 (6)
  • Raspberry Pi (5)
  • Amazon Web Service (5)
  • note (4)
  • Google Cloud Platform (3)
  • Unclassified (2)
  • Node.js (2)
  • reactjs (1)
  • jQuery (1)
  • Spring Boot (1)
  • Project (1)
  • Linux (1)
  • LINE (1)
  • 웹 VSCODE 개발환경 만들기

    MAIN

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

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

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

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

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

    추천

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

    배경지식

    구축

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

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

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

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

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

    그리고 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 구축을 완료하였습니다. 읽어 주셔서 감사합니다.