우분투 24.04 서버에 Visual Studio Code 클라우드 IDE 설치하는 방법

Visual Studio Code 클라우드 IDE는 Microsoft의 인기 있는 Visual Studio Code (VS Code) 편집기의 온라인 버전으로, 클라우드에서 유연하고 접근 가능한 개발 환경을 제공하도록 설계되었습니다. 이를 통해 개발자는 로컬 머신에 아무것도 설치할 필요 없이 웹 브라우저에서 직접 코딩할 수 있습니다. 이 클라우드 기반 IDE는 GitHub 및 기타 클라우드 서비스와 원활하게 통합되어 실시간 협업, 모든 장치에서 프로젝트에 대한 쉬운 접근, 분산 환경에서 작업할 수 있는 기능을 제공합니다. 구문 강조, 디버깅 및 확장과 같은 기능을 갖춘 Visual Studio Code 클라우드 IDE는 전체 개발 경험을 제공하여, 사실상 어디에서나 접근할 수 있는 강력하고 휴대 가능한 코딩 환경이 필요한 개발자에게 편리한 솔루션이 됩니다.

이 가이드는 Nginx를 리버스 프록시로 사용하여 우분투 24.04 서버에 Visual Code-Server를 설치하는 방법을 보여줍니다.

전제 조건

시작하기 전에 다음 사항을 확인하세요:

우분투 24.05 서버.
관리자 권한이 있는 비루트 사용자.
서버 IP 주소를 가리키는 도메인 이름.

설치 스크립트를 사용하여 code-server 설치하기

code-server를 설치하려면 code-server 설치 스크립트를 다운로드하고 실행할 수 있습니다. 이 예제에서는 비루트 사용자로 code-server를 설치합니다. 따라서 사용자로 로그인했는지 확인하세요.

먼저, 아래 명령어를 실행하여 code-server가 시스템에 설치될 수 있는지 확인합니다.

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

code-server가 시스템에 설치되면 다음과 같은 출력이 표시됩니다:

test install

이제 아래 명령어로 code-server를 설치합니다. 요청 시 sudo/관리자 비밀번호를 입력하세요.

curl -fsSL https://code-server.dev/install.sh | sh

install code-server

설치가 완료되면 다음 ‘ systemctl ‘ 명령어로 code-server를 시작하고 활성화합니다.

sudo systemctl enable --now code-server@$USER

마지막으로, 다음 명령어로 code-server 서비스가 실행 중인지 확인합니다.

sudo systemctl status code-server@$USER

이 출력에서 code-server가 실행 중이며 기본 포트 8080에서 실행되고 있음을 확인할 수 있습니다.

start and verify code-server

code-server 비밀번호 구성하기

code-server를 설치한 후, code-server 환경을 보호하기 위해 비밀번호 인증을 설정합니다.

기본 code-server 구성 파일 ~/.config/code-server/config.yaml을 ‘ nano ‘ 편집기로 엽니다.

nano ~/.config/code-server/config.yaml

기본 비밀번호를 안전한 비밀번호로 변경합니다.

bind-addr: 127.0.0.1:8080  
auth: password  
password: 0e0cb3af923c659366334664  
cert: false

파일을 저장하고 편집기를 종료합니다.

이제 아래 명령어를 실행하여 code-server를 재시작하고 변경 사항을 적용합니다.

sudo systemctl restart code-server@$USER

Nginx를 리버스 프록시로 설정하기

이제 code-server를 안전하게 설정했으므로 Nginx를 설치하고 리버스 프록시로 구성합니다. 도메인 이름이 서버 IP 주소를 가리키고 있는지 확인하세요.

아래 ‘ apt ‘ 명령어로 Nginx 웹 서버를 설치합니다. 설치를 확인하려면 ‘ Y ‘를 입력하세요.

sudo apt install nginx -y

install nginx

설치가 완료되면 ‘ /etc/nginx/sites-available/code-server.conf ‘에 새로운 서버 블록 구성을 ‘ nano ‘ 편집기로 생성합니다.

sudo nano /etc/nginx/sites-available/code-server.conf

파일에 다음 구성을 삽입하고 도메인 이름 ‘ code.howtoforge.local ‘을 변경하세요.

server {  
listen 80;  
listen [::]:80;  
server_name code.howtoforge.local;  
  
location / {  
proxy_pass http://localhost:8080/;  
proxy_set_header Host $http_host;  
proxy_set_header Upgrade $http_upgrade;  
proxy_set_header Connection upgrade;  
proxy_set_header Accept-Encoding gzip;  
}  
}

완료되면 파일을 저장하고 편집기를 종료합니다.

다음으로, 아래 명령어를 실행하여 ‘ code-server.conf ‘ 서버 블록을 활성화하고 Nginx 구성을 확인합니다.

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/  
sudo nginx -t

정확하고 적절한 Nginx 구성이면 ‘ syntax is ok - test is successful’라는 출력이 표시됩니다.

check nginx

이제 아래 명령어를 실행하여 Nginx 웹 서버를 재시작하고 변경 사항을 적용합니다. 그런 다음 Nginx 상태를 확인하여 웹 서버가 실행 중인지 확인합니다.

sudo systemctl restart nginx  
sudo systemctl status nginx

다음 출력에서 Nginx 웹 서버가 code-server 애플리케이션의 리버스 프록시로 실행되고 있음을 확인할 수 있습니다.

check nginx

UFW (Uncomplicated Firewall) 설정하기

code-server에 접근할 수 있도록 HTTP 및 HTTPS 포트를 UFW (Uncomplicated Firewall)를 통해 열어야 합니다.

아래 명령어를 실행하여 ‘ Nginx Full ‘ 프로필을 활성화하고 Nginx 설치에 HTTP 및 HTTPS 트래픽을 허용합니다. 추가되면 ‘Rule added’라는 출력이 표시됩니다.

sudo ufw allow 'Nginx Full'

이제 아래 명령어를 실행하여 UFW 상태를 확인합니다. ‘Nginx Full’ 프로필이 활성화되어 모든 곳에서 접근할 수 있도록 허용되었는지 확인하세요.

sudo ufw status

HTTPS로 code-server 보호하기

이 섹션에서는 certbot과 letsencrypt를 통해 SSL/TLS 인증서를 생성하여 code-server를 HTTPS로 보호합니다.

아래 ‘apt’ 명령어로 ‘certbot’ 및 ‘python3-certbot-nginx’ 패키지를 설치합니다.

sudo apt install certbot python3-certbot-nginx

설치가 완료되면 아래 ‘certbot’ 명령어를 실행하여 SSL/TLS 인증서를 생성하고 code-server 설치를 보호합니다. 도메인 이름과 이메일 주소를 자신의 정보로 변경하세요.

sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email [email protected] -d code.howtoforge.local

프로세스가 완료되면 code-server 설치가 자동으로 HTTPS로 보호됩니다. SSL/TLS 인증서는 ‘/etc/letsencrypt/live/code.howtoforge.local’ 디렉토리에서 사용할 수 있습니다.

code-server 접근하기

웹 브라우저를 열고 https://code.howtoforge.local을 방문합니다. 설치가 성공적이라면 비밀번호 인증을 요청받습니다.

비밀번호를 입력하고 SUBMIT를 클릭하여 확인합니다.

정확한 비밀번호를 입력하면 다음과 같은 code-server 화면이 표시됩니다. 기본 테마를 선택하세요: 라이트 또는 다크.

change theme

이제 웹 브라우저에서 다음과 같은 실시간 code-server를 볼 수 있습니다.

code server

결론

축하합니다! 우분투 24.04 서버에 VS 코드 서버 설치를 완료했습니다. 비밀번호 인증 및 HTTPS로 보호된 code-server를 설치하고 Nginx를 code-server 설치를 위한 리버스 프록시로 구성했습니다.