วิธีรัน Code Server และ Claude Code บน VPS: สภาพแวดล้อมพัฒนา AI บนเบราว์เซอร์

คุณปิดแล็ปท็อป เดินไปร้านกาแฟ แล้วเปิดเบราว์เซอร์บนแท็บเล็ต ตัวแก้ไข VS Code เต็มรูปแบบของคุณอยู่ตรงนั้น พร้อมเทอร์มินัลที่รัน Claude Code อยู่ข้าง ๆ บนเซิร์ฟเวอร์ที่คุณควบคุมเอง ไม่มีชุดเครื่องมือในเครื่อง ไม่มีการซิงก์ ไม่ต้องรอให้แล็ปท็อปตื่น

การจับคู่แบบนั้นคือสิ่งที่คู่มือนี้สร้างขึ้น คือ Code Server (VS Code แบบใช้ผ่านเบราว์เซอร์) และ Claude Code (CLI เขียนโค้ดด้วย AI ของ Anthropic) บน Linux VPS เครื่องเดียว มีบทเรียนมากมายที่ครอบคลุมอย่างใดอย่างหนึ่ง แต่การรันทั้งสองบนเครื่องเดียวกันให้ IDE ช่วยเขียนด้วย AI สไตล์ Codespaces ที่เข้าถึงได้จากทุกอุปกรณ์ ในราคาของ VPS หนึ่งเครื่องและเข้าถึง root ได้เต็มที่ มีจุดที่ต้องทำความเข้าใจให้ชัดหนึ่งเรื่องก่อนเริ่ม เซิร์ฟเวอร์โค้ด ในที่นี้หมายถึงโปรเจกต์โอเพนซอร์สจาก Coder (coder/code-server) ไม่ใช่ VS Code Server ของ Microsoft และไม่ใช่แพลตฟอร์มระดับองค์กรที่แยกต่างหากของ Coder ทั้งสองใช้ชื่อเดียวกันและถูกสับสนอยู่เสมอ จึงควรทำความเข้าใจให้ชัดตอนนี้

เมื่อจบลง คุณจะมีสภาพแวดล้อมพัฒนาที่ช่วยด้วย AI ใช้ผ่านเบราว์เซอร์ที่ใช้งานได้จริง รันอยู่บน VPS ที่คุณเป็นเจ้าของ ป้องกันด้วย HTTPS และตั้งค่าให้อยู่รอดเมื่อการเชื่อมต่อหลุด

เวอร์ชันสั้น

• สแตก: Code Server ให้ VS Code แก่คุณในแท็บเบราว์เซอร์ Claude Code เพิ่มผู้ช่วยเขียนโค้ดด้วย AI ของ Anthropic บนเซิร์ฟเวอร์เดียวกัน คุณเข้าถึงทั้งหมดนี้ได้จากทุกอุปกรณ์ที่มีเบราว์เซอร์
• เพดานล่างของ RAM จริง ๆ คือ 4 GB และ Claude Code คือเหตุผล Code Server เพียงลำพังรันได้ใน 1 GB แต่ Claude Code ต้องการ 4 GB+ ดังนั้นสแตกรวมจึงต้องการ RAM อย่างน้อย 4 GB, 2 vCPU และพื้นที่จัดเก็บ 120 GB วางแผนไว้ที่ 8 GB หากต้องการความสบาย
• ลำดับการติดตั้งสำคัญน้อยกว่าขั้นตอนการยืนยันตัวตน ตัวติดตั้งเนทีฟของทั้งสองเครื่องมือมีเพียงบรรทัดเดียวต่อเครื่องมือ การยืนยันตัวตน Claude Code บนเซิร์ฟเวอร์ที่ไม่มีเบราว์เซอร์คือส่วนที่การติดตั้งส่วนใหญ่ติดขัด คุณคัดลอก URL เข้าสู่ระบบไปยังเบราว์เซอร์ในเครื่องของคุณ หรือใช้ token หรือ API key
• Claude Code ไม่ฟรี มันต้องใช้แพลน Claude แบบเสียเงิน (Pro, Max, Team หรือ Enterprise) หรือ Anthropic API key แพลน Claude.ai แบบฟรีไม่รวมมัน

สิ่งที่คุณต้องมี

ก่อนเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้พร้อมแล้ว แต่ละอย่างจะถูกอ้างถึงในขั้นตอนต่อ ๆ ไป จึงควรยืนยันตอนนี้มากกว่าจะไปพบว่าขาดตอนทำไปได้ครึ่งทาง

• Linux VPS หนึ่งเครื่อง ที่ตรงตามเพดานล่างของขนาดด้านล่าง คู่มือนี้ใช้ Ubuntu 22.04 LTS ตลอด คำสั่งต่าง ๆ เกือบเหมือนกันบน Debian และ Ubuntu รุ่นอื่น
• ขนาดที่ถูกต้อง: อย่างน้อย 4 GB RAM, 2 vCPU, and 120 GB of NVMe storage. ขั้นต่ำ 4 GB มาจาก Claude Code ไม่ใช่ Code Server (หมวดเรื่องขนาดอธิบายว่าทำไม)
• ชื่อโดเมน (ไม่บังคับแต่แนะนำ) หากคุณต้องการ HTTPS พร้อมใบรับรองจริง คุณสามารถรัน Code Server บนที่อยู่ IP ได้ แต่โดเมนทำให้ขั้นตอน reverse-proxy สะอาดกว่า
• แพลน Claude แบบเสียเงินหรือ Anthropic API key Claude Code ต้องใช้การสมัครสมาชิก Pro, Max, Team หรือ Enterprise หรือบัญชี Claude Console (API) แพลน Claude.ai แบบฟรีไม่รวมการเข้าถึง Claude Code ยืนยันว่าคุณมีอันไหนก่อนขั้นตอนติดตั้ง เพราะมันเป็นตัวกำหนดว่าคุณยืนยันตัวตนอย่างไร
• การเข้าถึง SSH พื้นฐาน ไปยังเซิร์ฟเวอร์ด้วยผู้ใช้ที่มีสิทธิ์ sudo

การเลือก VPS ของคุณ

การตัดสินใจแรกคือขนาด และคำแนะนำทั่วไปที่คุณจะเจอสำหรับ Code Server นั้นผิดสำหรับสแตกนี้ คู่มือ Code Server ส่วนใหญ่อ้างขั้นต่ำ RAM 1 GB ซึ่งถูกต้องสำหรับ Code Server เพียงลำพัง เมื่อคุณเพิ่ม Claude Code เข้ามา เพดานล่างนั้นก็ขยับ

รายการความต้องการระบบของ Claude Code เอง 4 GB+ RAM (ตาม เอกสารการตั้งค่า Claude Code) Code Server ต้องการราว 1 GB การรันทั้งสอง บวกกับส่วนขยายตัวแก้ไขของคุณ โปรเจกต์ที่กำลังทำงาน และหน่วยความจำที่เซสชัน Claude Code แบบ agentic ใช้ขณะทำงาน หมายความว่าเพดานล่างที่สมจริงของสแตกรวมคือ:

คอลัมน์แนะนำคือจุดที่คุณอยากอยู่หากคุณติดตั้งส่วนขยายหลายตัว เก็บโปรเจกต์ขนาดใหญ่ที่มีไดเรกทอรี node_modules ขนาดพอสมควรไว้บนเซิร์ฟเวอร์ หรือรัน Claude Code กับงาน agentic ที่แตะไฟล์หลายไฟล์พร้อมกัน ขั้นต่ำจะรันสแตกได้ ส่วนสเปกแนะนำจะทำให้มันสบาย

สองประเด็นที่ช่วยประหยัดเงินและลดความสับสน:

ไม่ต้องใช้ GPU Claude Code ส่งงานไปยัง API ของ Anthropic ดังนั้นการอนุมานของโมเดลทั้งหมดจึงเกิดขึ้นจากระยะไกล คุณไม่ได้รันโมเดลบนเซิร์ฟเวอร์ของคุณ VPS แบบ CPU มาตรฐานคือตัวเลือกที่ถูกต้อง และการจ่ายเงินสำหรับอินสแตนซ์ GPU ตรงนี้ไม่ได้ประโยชน์อะไรเลย

เลือกดาต้าเซ็นเตอร์ที่ใกล้คุณ IDE บนเบราว์เซอร์ไวต่อความหน่วงของเครือข่ายในแบบที่เว็บแอปทั่วไปไม่เป็น เพราะทุกการกดแป้นและการแก้ไขไฟล์เดินทางผ่านการเชื่อมต่อ WebSocket ไปยังเซิร์ฟเวอร์และกลับมา ยิ่งเซิร์ฟเวอร์อยู่ใกล้กับที่ที่คุณนั่งอยู่จริง ๆ เท่าไร ตัวแก้ไขก็ยิ่งรู้สึกเหมือนอยู่ในเครื่องมากขึ้น หากคุณเขียนโค้ดจากภูมิภาคเดียวเป็นส่วนใหญ่ ให้เลือกตำแหน่งที่ใกล้กับภูมิภาคนั้นที่สุด

ประเด็นสำคัญของหมวดนี้: กำหนดขนาดตาม Claude Code ไม่ใช่ Code Server ความต้องการ 4 GB ของClaude Code กำหนดเพดานล่างของคุณ ตัวเลข 1 GB ของ Code Server ใช้ไม่ได้เมื่อทั้งสองเครื่องมือใช้เครื่องร่วมกัน

การติดตั้ง Code Server

ขั้นตอนนี้ให้ตัวแก้ไข VS Code ที่ใช้งานได้ซึ่งเข้าถึงได้ในเบราว์เซอร์ของคุณบนพอร์ต 8080 Code Server มาพร้อมสคริปต์ติดตั้งที่จัดการการตั้งค่าแพ็กเกจให้คุณ

รันตัวติดตั้งอย่างเป็นทางการ:

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

สคริปต์จะตรวจจับดิสทริบิวชันของคุณและติดตั้ง Code Server เป็นบริการ systemd เมื่อเสร็จ ให้เริ่มบริการและเปิดใช้งานมันเพื่อให้กลับมาหลังรีบูต:

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

Code Server ผูกกับ 127.0.0.1:8080 โดยค่าเริ่มต้นและสร้างรหัสผ่านสุ่มในการรันครั้งแรก คุณต้องใช้รหัสผ่านนั้นเพื่อเข้าสู่ระบบ มันอยู่ในไฟล์คอนฟิกที่สร้างขึ้น:

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

ผลลัพธ์ที่คาดหวังจะมีหน้าตาแบบนี้:

bind-addr: 127.0.0.1:8080
auth: password
password: 5f3a9c1b2e8d7460a1f2c3b4
cert: false

คัดลอกค่ารหัสผ่าน คุณจะป้อนมันที่หน้าจอเข้าสู่ระบบ Code Server เมื่อเซิร์ฟเวอร์เข้าถึงได้ในเบราว์เซอร์ของคุณ ซึ่งตอนนี้ยังไม่ได้ เพราะมันผูกกับ 127.0.0.1 (localhost เท่านั้น) นั่นตั้งใจไว้ การเปิด Code Server อย่างปลอดภัยเป็นขั้นตอนถัดไป ทำผ่าน reverse proxy แทนที่จะเปิดพอร์ต 8080 ออกสู่อินเทอร์เน็ต

หมายเหตุ: Code Server จำกัดอัตราการพยายามเข้าสู่ระบบ หากคุณพิมพ์รหัสผ่านพลาดสองสามครั้งและถูกล็อกออกชั่วคราว นั่นคือตัวจำกัดอัตรา ไม่ใช่การติดตั้งที่เสีย รอสักนาทีแล้วลองใหม่

หากคุณอยากข้ามการติดตั้งด้วยมือทั้งหมด มาร์เก็ตเพลสของ Cloudzy มีการติดตั้ง Code Server แบบคลิกเดียวที่จัดเตรียมเซิร์ฟเวอร์พร้อม Code Server ที่ติดตั้งไว้แล้ว มันเป็นเส้นทางที่เร็วกว่าหากคุณกำลังเลือกโฮสต์อยู่ตอนนี้ ขั้นตอนด้วยมือด้านบนใช้ได้กับ Ubuntu VPS ทุกเครื่อง ดังนั้นส่วนที่เหลือของคู่มือนี้จึงเป็นกลางไม่ขึ้นกับผู้ให้บริการ

การติดตั้ง Claude Code

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

ใช้ตัวติดตั้งเนทีฟ ซึ่งเป็นวิธีที่ Anthropic แนะนำ:

curl -fsSL https://claude.ai/install.sh | bash

ยืนยันว่ามันติดตั้งแล้ว:

claude --version

หากคุณรัน Node.js 18 หรือใหม่กว่าอยู่แล้วและชอบจัดการเครื่องมือผ่าน npm เส้นทางนั้นมีอยู่เป็นทางเลือก:

npm install -g @anthropic-ai/claude-code

The native installer is the primary path in Anthropic's current documentation, and it auto-updates in the background. The npm package can also auto-update, but that depends on the npm global directory being writable; if it isn't, Claude Code shows a one-time notice instead of updating silently. Choose the native installer unless you have a specific reason to prefer npm.

Claude Code รองรับ Ubuntu 20.04+, Debian 10+ และ Alpine 3.19+ ดังนั้น VPS ที่คุณกำหนดขนาดไว้ด้านบนจึงผ่านคุณสมบัติแล้ว มันต้องใช้แพลน Claude แบบเสียเงินหรือ Anthropic API key ซึ่งคุณยืนยันในข้อกำหนดเบื้องต้น และแพลน Claude.ai แบบฟรีไม่รวมมัน

สำหรับการอ้างอิงการติดตั้งที่เชื่อถือได้ เอกสารปัจจุบันอยู่ที่ code.claude.com (ลิงก์เก่าที่ชี้ไป docs.anthropic.com จะเปลี่ยนเส้นทางมาที่นั่น ใช้ที่อยู่ code.claude.com โดยตรง)

การยืนยันตัวตน Claude Code บนเซิร์ฟเวอร์แบบไม่มีจอ

รัน claude เป็นครั้งแรก และมันพยายามเปิดหน้าต่างเบราว์เซอร์เพื่อทำการเข้าสู่ระบบให้เสร็จ บนเซิร์ฟเวอร์ระยะไกลที่เข้าถึงผ่าน SSH ไม่มีเบราว์เซอร์ให้เปิด นี่คือขั้นตอนเดียวที่หยุดการติดตั้งเซิร์ฟเวอร์ส่วนใหญ่ และมันมีทางแก้ที่สะอาดสามทาง

วิธีตรง: คัดลอก URL เข้าสู่ระบบไปยังเบราว์เซอร์ในเครื่องของคุณ เมื่อคุณรัน claude บนเซิร์ฟเวอร์ มันจะพิมพ์ URL เข้าสู่ระบบ (กด c เพื่อคัดลอกไปยังคลิปบอร์ดหากมันไม่เปิดขึ้นมาอัตโนมัติ) เปิด URL นั้นในเบราว์เซอร์บนเครื่องของคุณเอง เข้าสู่ระบบ และทำการอนุญาตให้เสร็จ หากเบราว์เซอร์แสดงรหัสเข้าสู่ระบบแทนการเปลี่ยนเส้นทาง ให้วางรหัสนั้นกลับเข้าไปในเทอร์มินัลที่พรอมต์ Paste code here if prompted นี่เป็นเรื่องปกติในเซสชัน SSH และคอนเทนเนอร์ นี่เป็นเส้นทางแบบโต้ตอบมาตรฐานสำหรับการสมัครสมาชิก Pro หรือ Max

วิธีถาวร: token ที่มีอายุยาว หากคุณไม่อยากยืนยันตัวตนเซิร์ฟเวอร์ใหม่เป็นระยะ ให้สร้าง OAuth token อายุหนึ่งปี:

claude setup-token

คำสั่งจะพาคุณผ่านการอนุญาต OAuth หนึ่งครั้งและพิมพ์ token ออกมา มันไม่ได้เก็บ token ให้คุณ ดังนั้นให้คัดลอกมันและตั้งเป็นตัวแปรสภาพแวดล้อมเพื่อให้ Claude Code หยิบมันขึ้นมาในทุกการรัน:

export CLAUDE_CODE_OAUTH_TOKEN=your-token-here

เพิ่มบรรทัด export นั้นลงในโปรไฟล์เชลล์ของคุณ (เช่น ~/.bashrc) เพื่อให้มันคงอยู่ข้ามเซสชัน token นี้ยืนยันตัวตนกับการสมัครสมาชิกของคุณและต้องใช้แพลน Pro, Max, Team หรือ Enterprise

วิธีใช้ API key หากคุณใช้บัญชี Claude Console (API) แทนการสมัครสมาชิก ให้ตั้ง API key ของคุณแทน:

export ANTHROPIC_API_KEY=sk-ant-your-key-here

หมายเหตุเรื่องความแม่นยำหนึ่งข้อเพื่อไม่ให้คุณแปลกใจกับใบเรียกเก็บเงิน คือ API key เรียกเก็บเงินต่อ token ผ่าน Claude Console ซึ่งเป็นเส้นทางการเรียกเก็บเงินแยกจากการสมัครสมาชิก Pro หรือ Max หากคุณมีทั้งการสมัครสมาชิกและ ANTHROPIC_API_KEY ถูกตั้งไว้ API key จะมีสิทธิ์เหนือกว่าเมื่อได้รับการอนุมัติ ดังนั้นหากคุณตั้งใจจะใช้การสมัครสมาชิกของคุณ อย่าทิ้ง API key ที่หลงเหลืออยู่ในสภาพแวดล้อมของคุณ

ประเด็นสำคัญของหมวดนี้: สามเส้นทางในการยืนยันตัวตนบนเครื่องแบบไม่มีจอ ได้แก่ คัดลอก URL เข้าสู่ระบบไปยังเบราว์เซอร์ในเครื่อง รัน claude setup-token เพื่อได้ token การสมัครสมาชิกที่มีอายุยาว หรือตั้ง ANTHROPIC_API_KEY สำหรับการเรียกเก็บเงินผ่าน API โดยตรง

การเปิด Code Server อย่างปลอดภัยด้วย HTTPS

ตอนนี้ Code Server ผูกกับ localhost และให้บริการ HTTP ธรรมดา คุณไม่อยากเปิดพอร์ต 8080 ออกสู่อินเทอร์เน็ตและเข้าสู่ระบบผ่านการเชื่อมต่อที่ไม่เข้ารหัส เพราะใครก็ตามในเส้นทางเครือข่ายอาจอ่านเซสชันของคุณได้ วิธีแก้มาตรฐานคือ reverse proxy ที่ยุติ HTTPS อยู่หน้า Code Server

มีข้อจำกัดที่ยากอยู่หนึ่งข้อที่กำหนดรูปแบบขั้นตอนนี้: Code Server ขึ้นอยู่กับ WebSockets (ตาม ความต้องการของ Coder) ตัวแก้ไขใช้การเชื่อมต่อ WebSocket แบบถาวรสำหรับการสื่อสารสดกับเซิร์ฟเวอร์ ดังนั้น reverse proxy ของคุณต้องส่งต่อการอัปเกรด WebSocket อย่างถูกต้อง นี่คือเหตุผลว่าทำไมการเลือก proxy จึงสำคัญ

ใช้ Caddy หรือ Nginx ทั้งสองจัดการการทำ proxy WebSocket ได้อย่างเชื่อถือได้ และทั้งสองมีให้ในมาร์เก็ตเพลส Cloudzy เป็นแอปคลิกเดียวหากคุณอยากข้ามการติดตั้งด้วยมือ Caddy เป็นเส้นทางที่สั้นกว่าเพราะมันขอและต่ออายุใบรับรอง Let's Encrypt อัตโนมัติ Caddyfile ขั้นต่ำสำหรับ Code Server คือ:

# /etc/caddy/Caddyfile
code.example.com {
    reverse_proxy 127.0.0.1:8080
}

นั่นคือคอนฟิกทั้งหมด Caddy ตรวจจับการอัปเกรด WebSocket และส่งต่อมันโดยไม่ต้องมีคำสั่งเพิ่มเติม และมันจัดเตรียม HTTPS สำหรับ code.example.com ด้วยตัวเอง รีโหลด Caddy ด้วย sudo systemctl reload caddy และเข้าไปที่ https://code.example.com แล้วคุณจะถึงหน้าจอเข้าสู่ระบบ Code Server ผ่านการเชื่อมต่อที่เข้ารหัส

หากคุณชอบ Nginx คอนฟิกจะยาวกว่าเพราะคุณตั้งค่า header การอัปเกรด WebSocket อย่างชัดเจนและขอใบรับรองแยกต่างหากด้วย Certbot:

# /etc/nginx/sites-available/code-server
server {
    listen 80;
    listen [::]:80;
    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;
    }
}

หมายเหตุ: Nginx และ Caddy คือ proxy สองตัวที่เอกสารทางการของ Coder บันทึกไว้ และทั้งสองเป็นตัวเลือกที่เชื่อถือได้ในที่นี้ Apache ก็สามารถทำ proxy Code Server ได้เช่นกัน แต่การส่งต่อ WebSocket ของมันต้องการการตั้งค่าโมดูลเพิ่มเติม (proxy_wstunnel บวกกฎ rewrite) ที่เอกสารทางการไม่ครอบคลุม และการตั้งค่าที่พลาดโมดูลเหล่านั้นมักลงเอยด้วยการดีบักการเชื่อมต่อตัวแก้ไขที่หลุด หากคุณรัน Apache สำหรับไซต์อื่นอยู่แล้ว เส้นทางที่ง่ายที่สุดคือวาง Code Server ไว้หลัง Nginx หรือ Caddy บน vhost แยกต่างหาก แทนที่จะตั้งค่า Apache ให้ทำ proxy มัน

การทำให้เซสชันของคุณอยู่รอด

มีสองสิ่งที่แตกต่างกันรันอยู่บนเซิร์ฟเวอร์นี้ และพวกมันมีพฤติกรรมต่างกันเมื่อการเชื่อมต่อของคุณหลุด ควรรู้ว่าอันไหนเป็นอันไหนก่อนที่คุณจะเสียการรัน Claude Code แบบ agentic ไปหนึ่งชั่วโมงเพราะปิดฝาแล็ปท็อป

Code Server เองอยู่รอดจากการหลุดการเชื่อมต่อเพราะคุณติดตั้งมันเป็นบริการ systemd การปิดแท็บเบราว์เซอร์หรือการหลุด SSH ไม่ได้หยุดบริการ Code Server ในการเชื่อมต่อใหม่ตามปกติ คุณจะกลับสู่เซสชัน IDE บนเบราว์เซอร์เดิม แม้ว่าการหลุดการเชื่อมต่อที่นานมากอาจต้องรีโหลดหน้าต่าง ขึ้นอยู่กับพฤติกรรมการเชื่อมต่อใหม่ของ Code Server

Claude Code แตกต่างออกไป เมื่อคุณรัน claude ในเทอร์มินัลแบบโต้ตอบผ่าน SSH มันผูกกับเซสชันเทอร์มินัลนั้น ปิดแท็บเบราว์เซอร์ที่ถือเทอร์มินัลนั้น หรือหลุดการเชื่อมต่อ SSH แล้วโปรเซสก็ตายไปด้วย กลางงานหากมันกำลังทำอยู่ วิธีแก้คือรัน Claude Code ภายในตัวมัลติเพล็กเซอร์เทอร์มินัลเพื่อให้เซสชันแยกตัวออกจากการเชื่อมต่อของคุณและทำงานต่อไป

tmux คือเครื่องมือมาตรฐานสำหรับเรื่องนี้ หากคุณยังไม่เคยใช้มาก่อน สามคำสั่งครอบคลุมสิ่งที่คุณต้องการ:

# Start a new named session
tmux new -s claude

# Run claude inside it as normal, then detach without stopping it:
# press Ctrl-b, then d

# Reattach later, from any new SSH session:
tmux attach -t claude

เริ่มต้น claude ภายในเซสชัน tmux ให้แยกตัวออกด้วย Ctrl-b แล้ว d และการรันแบบ agentic จะทำงานต่อไปบนเซิร์ฟเวอร์ เชื่อมต่อกลับด้วย tmux attach -t claude เมื่อใดก็ตามที่คุณเชื่อมต่อใหม่ (จากอุปกรณ์อื่นก็ได้ถ้าคุณต้องการ) และคุณก็จะกลับสู่เซสชันสดเดิม

หมายเหตุ: screen ทำงานแบบเดียวกันหากคุณใช้มันอยู่แล้ว (screen -S claude เพื่อเริ่ม, Ctrl-a แล้ว d เพื่อแยกตัว, screen -r claude เพื่อเชื่อมต่อกลับ) เครื่องมือทั้งสองแก้ปัญหาเดียวกัน เลือกตัวที่คุณรู้จัก

การใช้ Claude Code ภายใน IDE บนเบราว์เซอร์

เมื่อเครื่องมือทั้งสองอยู่บนเครื่องแล้ว มีสองวิธีในการเข้าถึง Claude Code จาก IDE บนเบราว์เซอร์ ได้แก่ เทอร์มินัลที่ผสานรวมอยู่ และส่วนขยาย VS Code หนึ่งในนี้เชื่อถือได้ในวันนี้ ส่วนอีกอันต้องทดสอบก่อนที่คุณจะพึ่งพามัน

เส้นทางเทอร์มินัลใช้ได้ผลโดยการออกแบบ เปิด Code Server ในเบราว์เซอร์ของคุณ เปิดเทอร์มินัลที่ผสานรวม (Terminal > New Terminal หรือ Ctrl+`) แล้วรัน:

claude

ตอนนี้คุณมี Claude Code CLI เต็มรูปแบบรันอยู่ภายใน IDE บนเบราว์เซอร์ ในไดเรกทอรีเดียวกับโปรเจกต์ที่คุณเปิดอยู่ นี่คือเส้นทางที่พึ่งพาได้ เทอร์มินัลเป็นเชลล์จริงบนเซิร์ฟเวอร์ และ Claude Code เป็น CLI ที่ติดตั้งบนเซิร์ฟเวอร์นั้น มันจึงรันได้ จับคู่มันกับขั้นตอน tmux ด้านบนแล้วเซสชันจะอยู่รอดจากการหลุดการเชื่อมต่อ

เส้นทางส่วนขยาย VS Code ก็เป็นไปได้ แต่เส้นทางเทอร์มินัลยังคงเป็นพื้นฐานที่ปลอดภัยกว่าสำหรับการตั้งค่านี้ Anthropic เผยแพร่ส่วนขยาย Claude Code VS Code และเอกสารปัจจุบันของมันบอกว่าสามารถติดตั้งได้จาก Open VSX ซึ่งสำคัญเพราะ Code Server ใช้ Open VSX แทน VS Code Marketplace ของ Microsoft ลองค้นหา "Claude Code" ในมุมมอง Extensions ของ Code Server หรือติดตั้งส่วนขยาย Anthropic.claude-code จาก Open VSX หากมันปรากฏในอินสแตนซ์ของคุณ หากส่วนขยายไม่ติดตั้งอย่างเรียบร้อย หรือหากการผสานรวม IDE ทำงานต่างจากบน VS Code เดสก์ท็อป ให้ถอยกลับไปใช้เทอร์มินัลที่ผสานรวม CLI ทำงานได้ในทุกเทอร์มินัล และสำหรับการตั้งค่า VPS นี้ นั่นคือเส้นทางที่เชื่อถือได้

ปรับใช้ AI IDE บนเบราว์เซอร์ของคุณเอง

ตอนนี้คุณเห็นภาพรวมแล้ว คือ ตัวแก้ไข VS Code ที่เข้าถึงได้ผ่านเบราว์เซอร์พร้อม Claude Code อยู่ข้าง ๆ ป้องกันด้วย HTTPS และตั้งค่าให้อยู่รอดเมื่อการเชื่อมต่อหลุด บน VPS ที่คุณควบคุมเอง

ส่วนเดียวของเรื่องนี้ที่เป็นงานตั้งค่าล้วน ๆ คือตอนเริ่มต้น คือ การจัดเตรียมเซิร์ฟเวอร์และติดตั้ง Code Server ให้ได้ก่อนที่คุณจะทำอะไรที่น่าสนใจได้ หากคุณอยากข้ามส่วนนั้น เรามี การติดตั้ง Code Server แบบคลิกเดียว ในมาร์เก็ตเพลส Cloudzy ที่จัดเตรียม VPS พร้อม Code Server ที่รันอยู่แล้ว คุณจึงลงตรงที่หน้าจอเข้าสู่ระบบและไปติดตั้ง Claude Code และยืนยันตัวตนได้โดยตรง สำหรับการใช้งานประจำวันตามปกติ ยังคงวางอินสแตนซ์ไว้หลัง HTTPS ด้วย Caddy หรือ Nginx ตามที่แสดงด้านบน แทนที่จะถือการเข้าสู่ระบบ http://<server-ip>:8080 แบบดิบเป็นเส้นทางการเข้าถึงระดับ production สุดท้าย

เหมือนกัน Linux VPS โฮสต์ทั้งสแตก (ตัวแก้ไข, AI CLI และ reverse proxy) พร้อมการเข้าถึง root ที่การตั้งค่านี้ต้องการ จากนั้นขั้นตอนด้านบนคือทั้งหมดที่ขวางกั้นระหว่างคุณกับการเขียนโค้ดด้วย AI จากเบราว์เซอร์ใดก็ได้

หากคุณยังชั่งใจอยู่ว่าจะเลือกใช้ AI coding CLI ตัวไหนก่อนจะสร้างสิ่งนี้ การเปรียบเทียบของเราเรื่อง OpenCode vs Claude Code และ การประลอง agentic coding CLI ในภาพกว้าง ครอบคลุมข้อดีข้อเสียต่าง ๆ

คำถามที่พบบ่อย

ฉันต้องใช้สเปก VPS อะไรบ้างสำหรับ Code Server และ Claude Code?

คุณต้องการ RAM อย่างน้อย 4 GB, 2 vCPU และพื้นที่จัดเก็บ 120 GB สำหรับสแตกรวม ขั้นต่ำ 4 GB ถูกขับเคลื่อนโดย Claude Code ไม่ใช่ Code Server (Code Server เพียงลำพังรันได้ในราว 1 GB) สำหรับการใช้งานที่สบายพร้อมส่วนขยายและโปรเจกต์ขนาดใหญ่ RAM 8 GB และ 4 vCPU คือขนาดที่แนะนำ

Claude Code ฟรีไหม?

ไม่ Claude Code ต้องใช้แพลน Claude แบบเสียเงิน (Pro, Max, Team หรือ Enterprise) หรือ Anthropic API key ผ่าน Claude Console แพลน Claude.ai แบบฟรีไม่รวมการเข้าถึง Claude Code

ฉันจะยืนยันตัวตน Claude Code บนเซิร์ฟเวอร์ที่ไม่มีเบราว์เซอร์ได้อย่างไร?

รัน claude แล้วคัดลอก URL เข้าสู่ระบบที่มันพิมพ์ออกมาไปยังเบราว์เซอร์บนเครื่องของคุณเพื่อทำการเข้าสู่ระบบให้เสร็จ วางรหัสกลับเข้าไปในเทอร์มินัลหากได้รับพรอมต์ สำหรับเซิร์ฟเวอร์แบบถาวร ให้รัน claude setup-token เพื่อสร้าง OAuth token อายุหนึ่งปีและตั้งมันเป็น CLAUDE_CODE_OAUTH_TOKEN หรือตั้ง ANTHROPIC_API_KEY เพื่อยืนยันตัวตนด้วย Claude Console API key

ส่วนขยาย Claude Code VS Code ทำงานภายใน Code Server ไหม?

CLI ของ Claude Code รันได้เต็มรูปแบบภายในเทอร์มินัลที่ผสานรวมของ Code Server ซึ่งเป็นวิธีที่เชื่อถือได้ที่สุดในการใช้มันในการตั้งค่า IDE บนเบราว์เซอร์นี้ ส่วนขยาย VS Code ก็ควรค่าแก่การลองเช่นกัน เพราะ Anthropic บอกว่าสามารถติดตั้งได้จาก Open VSX และ Code Server ใช้ Open VSX แทน VS Code Marketplace ของ Microsoft หากส่วนขยายไม่ติดตั้งอย่างเรียบร้อยหรือทำงานต่างออกไปในอินสแตนซ์ของคุณ ให้ใช้เส้นทางเทอร์มินัลที่ผสานรวมแทน

ฉันใช้สิ่งนี้จาก iPad หรือโทรศัพท์ได้ไหม?

ได้ Code Server ใช้ผ่านเบราว์เซอร์ ดังนั้นทุกอุปกรณ์ที่มีเบราว์เซอร์สมัยใหม่ (รวมถึง iPad หรือโทรศัพท์) เข้าถึง IDE เต็มรูปแบบได้ การเข้าถึงที่ไม่ขึ้นกับอุปกรณ์นั้นคือข้อได้เปรียบหลักของ IDE บนเบราว์เซอร์เหนือ VS Code Remote SSH ซึ่งต้องมีการติดตั้ง VS Code ในเครื่องเพื่อเชื่อมต่อ