VPS สำหรับ code-server: VS Code บนเบราว์เซอร์

โน้ตบุ๊กของคุณอายุห้าปี บิลด์ทีละแปดนาที และคุณอยากแก้บั๊กจากแท็บเล็ตบนรถไฟ code-server รัน Visual Studio Code บนเซิร์ฟเวอร์และให้ตัวแก้ไขครบชุดในแท็บเบราว์เซอร์ — ส่วนขยายเดิม เทอร์มินัลเดิม คีย์ลัดเดิม งานหนักเกิดบน VPS อุปกรณ์ของคุณแค่วาดหน้าจอ

ทำไม VPS ถึงเหมาะ

• สภาพแวดล้อมเดียวทุกที่ โค้ด เครื่องมือ และการตั้งค่าชุดเดียวกัน ไม่ว่าจากโน้ตบุ๊ก คอมที่ยืมมา หรือ iPad
• บิลด์ไม่กินแบต การคอมไพล์และรันเทสต์ใช้ CPU ของเซิร์ฟเวอร์
• งานยาวไม่ตาย พับจอลง งานใน tmux ก็ยังวิ่งต่อ
• ดาวน์โหลดเร็ว npm install และ docker pull วิ่งผ่านการเชื่อมต่อความเร็วสูงของเซิร์ฟเวอร์ ไม่ใช่ Wi-Fi โรงแรม

ต้องใช้อะไร

language server คือต้นทุนแฝง โปรเจกต์ TypeScript ที่มีไฟล์ไม่กี่พันไฟล์กินได้ถึงหนึ่งกิกะไบต์ด้วยตัวมันเอง

การติดตั้ง

ในฐานะผู้ใช้ปกติที่มี sudo (ไม่ใช่ root — ดูคู่มือผู้ใช้ sudo ของเรา):

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

สคริปต์ติดตั้งจะเลือกแพ็กเกจที่ถูกต้องสำหรับดิสโทรของคุณ การตั้งค่าอยู่ใน ~/.config/code-server/config.yaml:

bind-addr: 127.0.0.1:8080
auth: password
password: use-a-long-random-password
cert: false

รีสตาร์ตหลังแก้ไข: sudo systemctl restart code-server@$USER ให้ bind-addr อยู่ที่ 127.0.0.1 — ห้ามฟังบนที่อยู่สาธารณะถ้าไม่มี HTTPS อยู่ด้านหน้า

การเข้าถึงแบบที่ 1: SSH tunnel (ใช้ได้ทุกแพ็กเกจ)

จากเครื่องของคุณ:

ssh -p 22 -N -L 8080:127.0.0.1:8080 you@203.0.113.10

แล้วเปิด http://localhost:8080 ไม่มีอะไรเปิดสู่อินเทอร์เน็ต และ SSH จัดการการเข้ารหัสให้ บนแพ็กเกจ NAT ให้ใช้พอร์ต SSH ส่วนตัวจากแดชบอร์ดแทน 22 นี่คือการตั้งค่าที่เราแนะนำสำหรับนักพัฒนาที่ทำงานคนเดียว

การเข้าถึงแบบที่ 2: HTTPS บนโดเมนของคุณเอง

สำหรับการเข้าจากอุปกรณ์ที่รัน SSH ไม่ได้ ให้วาง nginx ไว้ด้านหน้าบนแพ็กเกจ IP เฉพาะ ชี้ซับโดเมนมาที่เซิร์ฟเวอร์ (ทำแบบนี้) แล้วทำ proxy ที่รองรับ WebSocket:

server {
    server_name code.example.com;
    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;
    }
}

ขอใบรับรองด้วย certbot --nginx -d code.example.com คู่มือ reverse proxy ของเรามีรายละเอียด เมื่อมี URL สาธารณะ รหัสผ่านใน config.yaml คือสิ่งเดียวที่กั้นระหว่างอินเทอร์เน็ตกับ shell บนเซิร์ฟเวอร์ของคุณ จึงควรตั้งให้ยาว

สิ่งที่ควรรู้ก่อนย้าย

• ส่วนขยายมาจาก Open VSX ตัวยอดนิยมส่วนใหญ่มีอยู่ บางตัวที่เป็นของ Microsoft เท่านั้นไม่มี ตรวจของคุณก่อน
• บางครั้งคีย์ลัดของเบราว์เซอร์ชนะ Ctrl+W ปิดแท็บ ไม่ใช่ปิดไฟล์ การติดตั้ง code-server เป็น PWA จากเมนูเบราว์เซอร์แก้ได้เกือบหมด
• ไม่มี GPU นี่คือเซิร์ฟเวอร์ CPU — เหมาะกับโค้ด ไม่เหมาะกับการเทรนโมเดล
• งานยาวให้รันใน tmux เทอร์มินัลในตัวตายไปพร้อมแท็บ

ใช้คู่กับ

ถ้าคุณใช้เอเจนต์เขียนโค้ด AI เซิร์ฟเวอร์เดียวกันรันมันข้างตัวแก้ไขได้ — ดูการรันเอเจนต์เขียนโค้ดบน VPS และกรณีใช้งาน Claude Code รายละเอียดแพ็กเกจและเส้นทางอัปเกรดอยู่ในเอกสารแพ็กเกจ