우분투 18.04 LTS에 Visual Studio Code - 서버 IDE 설치하기

Code-server는 서버에서 원격으로 실행할 수 있는 Visual Studio (VS) Code로, 웹 브라우저를 통해 접근할 수 있습니다. 이를 통해 언제 어디서나 접근할 수 있는 일관된 개발 환경을 만들 수 있습니다.

이 튜토리얼에서는 최신 우분투 18.04 서버에서 Nginx를 리버스 프록시로 사용하고 SSL Letsencrypt를 설정하여 Code-server를 설치하는 방법을 보여줍니다.

전제 조건

이 가이드에서는 3GB의 RAM, 25GB의 여유 디스크 공간 및 2개의 CPU를 갖춘 우분투 18.04 서버에 Code-server를 설치합니다.

우리가 할 일:

• 사용자 추가 및 Code-server 바이너리 다운로드
• Code-server를 Systemd 서비스로 설정
• SSL Letsencrypt 생성
• Code-server를 위한 Nginx 리버스 프록시 설정
• 테스트

1단계 - 사용자 추가 및 Code-Server 바이너리 다운로드

먼저, 새로운 사용자를 추가하고 GitHub에서 code-server 바이너리 파일을 다운로드합니다.

아래 명령어를 사용하여 ‘code’라는 새 사용자를 추가합니다.

useradd -m -s /bin/bash code  
passwd code

이제 ‘code’ 사용자로 로그인하고 code-server 바이너리 파일을 다운로드합니다.

su - code  
wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

code-server를 추출하고 디렉토리 이름을 ‘bin’으로 변경합니다.

tar -xf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz  
mv code-server2.1692-vsc1.39.2-linux-x86_64/ bin/

이제 code-server를 실행 가능한 바이너리 파일로 만듭니다.

chmod +x ~/bin/code-server

그리고 사용자 데이터를 저장할 새로운 데이터 디렉토리를 생성합니다.

mkdir -p ~/data

이제 ‘code’라는 새 사용자를 만들고 ‘code’ 사용자의 홈 디렉토리에 code-server 바이너리를 다운로드했습니다.

2단계 - Code-Server를 Systemd 서비스로 설정

이 단계에서는 code-server를 시스템 서비스로 실행하도록 설정합니다.

code-server 서비스는 ‘code’ 사용자 아래에서 실행되며, 기본 포트는 ‘8080’이고 비밀번호 인증이 활성화됩니다.

‘/etc/systemd/system’ 디렉토리로 이동하여 vim 편집기를 사용하여 새로운 서비스 파일 ‘code-server.service’를 생성합니다.

cd /etc/systemd/system/  
vim code-server.service

비밀번호에 대한 ‘Environment’ 옵션을 자신의 것으로 변경하고 구성을 붙여넣습니다.

[Unit]  
Description=code-server  
After=nginx.service  
  
[Service]  
User=code  
WorkingDirectory=/home/code  
Environment=PASSWORD=hakasevscodeserv  
ExecStart=/home/code/bin/code-server --host 127.0.0.1 --user-data-dir /home/code/data --auth password  
Restart=always  
  
[Install]  
WantedBy=multi-user.target

저장하고 닫습니다.

이제 시스템 관리자를 다시 로드합니다.

systemctl daemon-reload

그 후, code-server 서비스를 시작하고 시스템 부팅 시 추가합니다.

systemctl start code-server  
systemctl enable code-server

이제 code-server 서비스를 확인합니다.

netstat -plntu  
systemctl status code-server

그리고 code-server 서비스가 기본 포트 ‘8080’에서 실행되고 있습니다.

결과적으로, code-server를 시스템 서비스로 실행하도록 설정했습니다.

3단계 - SSL Letsencrypt 생성

이 단계에서는 certbot 도구를 사용하여 code-server를 보호하기 위해 SSL letsencrypt를 생성합니다.

아래의 apt 명령어를 사용하여 certbot 도구를 설치합니다.

sudo apt install certbot -y

설치가 완료되면 아래의 certbot 명령어를 사용하여 SSL letsencrypt를 생성합니다.

certbot certonly --standalone --agree-tos -m [email protected] -d vscode.hakase-labs.io

완료되면, 인증서는 ‘/etc/letsencrypt/live/vscode.hakase-labs.io/‘ 디렉토리에 위치하게 됩니다.

ls -lah /etc/letsencrypt/live/vscode.hakase-labs.io/

이제 certbot 도구를 사용하여 code-server 설치를 보호하기 위한 SSL Letsencrypt를 생성했습니다.

4단계 - Nginx를 리버스 프록시로 설정

이 단계에서는 Nginx 웹 서버를 설치하고 SSL이 활성화된 code-server에 대한 리버스 프록시로 설정합니다.

아래의 apt 명령어를 사용하여 Nginx 패키지를 설치합니다.

sudo apt install nginx -y

설치가 완료되면 ‘/etc/nginx/sites-available’ 디렉토리로 이동하여 새로운 가상 호스트 구성 ‘code-server’를 생성합니다.

cd /etc/nginx/sites-available/  
vim code-server

이제 도메인 이름과 SSL 경로를 자신의 것으로 변경하고 구성을 붙여넣습니다.

server {  
 listen 80;  
 server_name vscode.hakase-labs.io;  
 # enforce https  
 return 301 https://$server_name:443$request_uri;  
}  
  
server {  
 listen 443 ssl http2;  
 server_name vscode.hakase-labs.io;  
  
 ssl_certificate /etc/letsencrypt/live/vscode.hakase-labs.io/fullchain.pem;  
 ssl_certificate_key /etc/letsencrypt/live/vscode.hakase-labs.io/privkey.pem;  
  
 location / {  
 proxy_pass http://127.0.0.1:8080/;  
 proxy_set_header Host $host;  
 proxy_set_header Upgrade $http_upgrade;  
 proxy_set_header Connection upgrade;  
 proxy_set_header Accept-Encoding gzip;  
 }  
}

저장하고 닫습니다.

이제 ‘code-server’ 가상 호스트를 활성화하고 nginx 구성을 테스트하여 오류가 없는지 확인합니다.

ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/  
ginx -t

그 후, nginx 서비스를 재시작하고 시스템 부팅 시 추가합니다.

systemctl restart nginx  
systemctl enable nginx

이제 Nginx 서비스가 code-server에 대한 리버스 프록시로 실행되고 있습니다. 아래 명령어를 사용하여 확인합니다.

netstat -plntu  
systemctl status nginx

그리고 아래와 같은 결과를 얻을 수 있습니다.

Nginx 서비스가 HTTP 및 HTTPS 포트가 활성화된 상태로 우분투 18.04 서버에서 실행되고 있습니다.

5단계 - 테스트

웹 브라우저를 열고 code-server 설치의 URL을 입력합니다.

https://vscode.hakase-labs.io/

code-server 서비스 파일에서 구성한 비밀번호로 로그인합니다.

비밀번호가 올바르면, 아래와 같이 웹 브라우저에서 VS Code 편집기를 얻을 수 있습니다.

결과적으로, Nginx를 리버스 프록시로 사용하여 우분투 18.04 서버에 code-server를 설치하고 SSL Letsencrypt로 code-server 설치를 보호했습니다.

참고

• https://github.com/cdr/code-server