Posted inUbuntu

Cài đặt code-server trên Ubuntu: Chạy VS Code trên trình duyệt với HTTPS và Nginx

Ubuntu tutorial - IT technology blog
Ubuntu tutorial - IT technology blog

Khi nào bạn cần code-server?

Mình bắt đầu dùng code-server từ hồi phải debug server staging trên cái iPad ở quán cà phê — không cài được VS Code trực tiếp, mà codebase thì nằm trên VPS. Sau khi thử vài giải pháp remote IDE, code-server là thứ mình gắn bó nhất vì đơn giản: nó chính là VS Code, load thẳng trên trình duyệt, extensions đầy đủ, terminal tích hợp, không cần cài gì thêm phía client.

code-server phù hợp khi bạn:

  • Lập trình từ nhiều thiết bị khác nhau (laptop, iPad, máy tính công ty)
  • Muốn tận dụng tài nguyên VPS mạnh hơn máy local để build/compile
  • Cần môi trường dev giống production nhất có thể — cùng OS, cùng dependency
  • Đồng nghiệp cần review code trực tiếp trên server mà không gửi file qua lại

Cài đặt code-server

Yêu cầu hệ thống

Ubuntu 20.04 hoặc 22.04 (LTS). RAM tối thiểu 1GB — nhưng trên thực tế, TypeScript language server một mình đã chiếm 300–500MB, nên nếu bạn dùng nhiều extension cùng lúc thì 2GB mới thực sự thoải mái. Disk cần ít nhất 2GB trống; thêm extension và workspace thì tầm 5GB là an toàn. Băng thông không đòi hỏi cao — 1 Mbps là đủ dùng bình thường.

Cài nhanh bằng install script

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

Script tự detect distro, thêm package repo phù hợp và cài binary. Trên Ubuntu nó dùng apt, trên Fedora thì dnf — không cần can thiệp gì. Sau khi xong, kiểm tra version:

code-server --version

Cài thủ công bằng .deb (nếu cần kiểm soát version)

VERSION="4.95.3"
wget https://github.com/coder/code-server/releases/download/v${VERSION}/code-server_${VERSION}_amd64.deb
sudo dpkg -i code-server_${VERSION}_amd64.deb

Cấu hình chi tiết

File config mặc định

Chạy thử một lần để tạo file config:

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

Nội dung mặc định sẽ trông như thế này:

bind-addr: 127.0.0.1:8080
auth: password
password: your-password-here
cert: false

Quan trọng: Giữ nguyên bind-addr: 127.0.0.1 — chỉ cho phép kết nối local. Nginx sẽ làm nhiệm vụ expose ra ngoài với HTTPS. Không bind thẳng ra 0.0.0.0 khi chưa có SSL.

Sinh password ngẫu nhiên mạnh hơn:

PASSWORD=$(openssl rand -base64 16)
echo "Password của bạn: $PASSWORD"
sed -i "s/password: .*/password: $PASSWORD/" ~/.config/code-server/config.yaml

Chạy code-server như systemd service

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

Cấu hình Nginx reverse proxy

Đây là chỗ nhiều người hay bị lỗi nhất. code-server dùng WebSocket để sync editor real-time, nên Nginx cần thêm phần header Upgrade — thiếu cái này editor load được nhưng terminal và live sync sẽ không hoạt động.

Tạo file config Nginx:

sudo nano /etc/nginx/sites-available/code-server
server {
    listen 80;
    server_name code.yourdomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name code.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/code.yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/code.yourdomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    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;
        proxy_http_version 1.1;
    }
}

Bật site, test config, rồi reload:

sudo ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Tăng cường bảo mật

code-server đã có password mặc định, nhưng editor này có terminal trực tiếp trên server — bị compromise là mất cả máy. Mình thường làm thêm vài lớp nữa cho chắc:

Giới hạn IP truy cập (nếu bạn dùng từ IP cố định):

location / {
    allow 203.0.113.10;   # IP của bạn
    deny all;
    proxy_pass http://localhost:8080/;
    proxy_set_header Host $host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection upgrade;
    proxy_http_version 1.1;
}

Thêm HTTP Basic Auth (defense in depth — hai lớp auth):

sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd your_username

Thêm vào location block trong Nginx:

auth_basic "Code Server";
auth_basic_user_file /etc/nginx/.htpasswd;

Setup cuối cùng của mình trên staging: IP whitelist + basic auth + password code-server. Ba lớp trông có vẻ overkill, nhưng terminal root trên server thì mình không muốn liều.

Kiểm tra và Monitoring

Test kết nối và WebSocket

Truy cập https://code.yourdomain.com — nhập password, VS Code load ngay trên trình duyệt. Nếu editor load được nhưng terminal không phản hồi, khả năng cao WebSocket bị block. Kiểm tra log Nginx:

# HTTP 101 = WebSocket handshake thành công
sudo tail -f /var/log/nginx/access.log | grep " 101 "

Xem log code-server

# Theo dõi log service realtime
sudo journalctl -u code-server@$USER -f

# Log chi tiết hơn khi debug
code-server --log-level debug

Monitor tài nguyên

TypeScript, ESLint, Pylance ngốn RAM không ít — TypeScript language server một mình đã chiếm 300–500MB khi làm việc với project lớn. Theo dõi bằng:

ps aux | grep code-server | awk '{print $2, $4, $6, $11}'

Server chỉ có 1GB RAM? Giới hạn memory của Node.js process:

sudo systemctl edit code-server@$USER

Paste vào:

[Service]
Environment="NODE_OPTIONS=--max-old-space-size=512"
Restart=on-failure
RestartSec=5s

Apply thay đổi:

sudo systemctl daemon-reload
sudo systemctl restart code-server@$USER

Tips dùng hàng ngày

  • Sync settings qua GitHub: Bật Settings Sync trong VS Code, đăng nhập GitHub — extensions và settings tự đồng bộ giữa máy local và code-server, không cần cài lại từ đầu
  • Port forwarding tích hợp: Khi dev web app trên server cần xem trực tiếp, dùng tab Ports ở thanh dưới editor — forward port về máy local không cần SSH tunnel thủ công
  • Dùng subdomain riêng: Đặt code-server trên code.domain.com thay vì path như domain.com/code — tránh lỗi với extensions dùng Service Worker
  • Backup định kỳ: Thư mục ~/.local/share/code-server/ chứa extensions đã cài và workspace state — backup cái này là đủ restore nhanh khi cần

Share:
Tags: