VSCODE를 웹으로 사용하기, Code-Server 세팅

Code-Server

집에 노트북을 놓고 외부에서 태블릿이나 다른 PC를 사용해서 접근할 때가 많아서, 웹으로 VSCode를 사용할 수 있는 Code-Server를 구성한다.

실제 VSCode 와 달리 extension 에서 제한적인 부분이 조금 있지만, 웹으로 접근한다는 부분이 편리했다.
Code-Server를 구성한다고 VSCode를 사용하지 못하는 것은 아니므로...

환경: Ubuntu 22.04

Code-Server 설치

# curl 설치
sudo apt install -y curl

# code-server 설치
curl -fsSL https://code-server.dev/install.sh | sh
sudo systemctl enable --now code-server@$USER

Code-Server 접속 확인

localhost:8080 으로 접속하여 code-server가 잘 구성되었는지 확인한다.

~/.config/code-server/config.yaml 파일에 설정과 암호가 저장되어 있다. (바꾸면 바뀐다.)

외부에서 접근

설정한 Code-Server는 현재 127.0.0.1로 호스팅 되고 있기 때문에 외부에서는 접근이 불가하다.

이제 Code-Server가 설치된 PC에 IP:Port 로 접근하면 접근할 수 있는 모든 곳에서 사용 가능하다.
NoIP 나 DuckDNS 혹은 공유기가 IPTIME이라면 iptime dns 까지 사용해서 주소로 접근도 가능하다.

Nginx 설정

nginx를 이용해 https 설정을 진행하기도 한다. https 를 사용하는 것 자체로도 의미가 있지만,
Code-Server 에서 Jupyter Notebook을 사용하려면 https가 필수이다.

nginx-http

nginx를 이용해서 도메인 -> code-server로 접속하는 설정

sudo apt install nginx
sudo systemctl start nginx

# 기존 설정 삭제
sudo rm /etc/nginx/sites-enabled/default
sudo rm /etc/nginx/sites-available/default

# code-server 설정 추가
cat <<EOF | sudo tee /etc/nginx/sites-available/code-server.conf
server {
    listen 80;
    listen [::]:80;
    server_name domain.com; # 자기 도메인

    location / {
        proxy_pass http://localhost:8080/; # code-server 포트
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Acept-Encoding gzip;
    }
}
EOF

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf
sudo nginx -t # 확인 후 수정sudo service nginx reload

Nginx Code-Server https

certbot 을 이용해서 https 인증을 하고 자동으로 인증서를 재발급하는 crontab까지 작성한다.

https://dogring.wordpress.com/2024/08/31/nginx-https-%EC%9D%B8%EC%A6%9D-feat-code-server/