0

Series VS Code Bài 4: Remote Development - Gõ Code Ở Nhà, Chạy Xuyên Biên Giới

Có một kịch bản rất kinh điển thế này: Bạn chuẩn bị code một dự án Backend phức tạp sử dụng Docker, hoặc một hệ thống C++ cần tài nguyên phần cứng cực mạnh để biên dịch. Chiếc laptop văn phòng của bạn bắt đầu gầm rú, quạt kêu to và RAM chạm đỉnh 99%. Hoặc tệ hơn, dự án yêu cầu chạy trên môi trường Linux chuẩn, nhưng bạn lại đang dùng Windows và gặp hàng tá lỗi xung đột về đường dẫn (/ vs ).

Ngày xưa, giải pháp là bạn phải dùng Vim/Nano để gõ code "mù" qua Terminal SSH, hoặc dùng SFTP để sync code thủ công rất dễ mất file.

Nhưng với VS Code, bạn có thể kết nối thẳng vào VPS từ xa hoặc chui vào trong Docker Container. Bạn vẫn được dùng giao diện mượt mà, đầy đủ Extension của máy nhà, nhưng toàn bộ code và trình thực thi thì nằm hoàn toàn ở server.

1. Bí Mật Kiến Trúc: VS Code Server

Để hiểu tại sao tính năng này lại mượt mà đến thế, chúng ta phải quay lại triết lý đa tiến trình đã nói ở Bài 1.

Khi bạn kích hoạt tính năng Remote, VS Code sẽ tự động cắt đôi chính nó:

  • UI Client (Máy local của bạn): Chỉ chịu trách nhiệm hiển thị giao diện, nhận phím bấm từ bàn phím và click chuột. Cực kỳ nhẹ nhàng.
  • VS Code Server (Chạy trên VPS hoặc Docker): VS Code sẽ tự tải và cài một bộ máy mini lên server từ xa. Bộ máy này sẽ trực tiếp quản lý file, chạy Terminal, phân tích cú pháp ngôn ngữ (LSP) và debug.

Hai phần này giao tiếp với nhau qua một kết nối bảo mật ổn định. Kết quả là bạn có trải nghiệm mượt mà 100% như thể code đang nằm trên máy mình, không hề có độ trễ của việc truyền hình ảnh như TeamViewer hay VNC.

2. Thực Chiến 1: Remote - SSH (Biến VPS thành máy làm việc)

Bước 1: Chuẩn bị "đạn dược"

  • Cài đặt extension Remote - SSH chính chủ từ Microsoft.
  • Có sẵn một con VPS Linux (ví dụ: Ubuntu) và đã cấu hình SSH Key kết nối không cần mật khẩu (Mẹo: dùng ssh-copy-id để lưu key, vừa bảo mật vừa nhanh).

Bước 2: Kết nối trong 3 nốt nhạc

  1. Ấn vào biểu tượng Remote Explorer màu xanh ở góc dưới cùng bên trái giao diện VS Code.
  2. Chọn Connect to Host... -> Nhập lệnh SSH của bạn (ví dụ: root@123.45.67.89).
  3. VS Code sẽ mở một cửa sổ mới. Hãy nhìn xuống góc trái, nếu hiện chữ SSH: 123.45.67.89 tức là bạn đã thành công!

Giờ đây, khi bạn ấn Ctrl + ~ để mở Terminal, đó chính là Terminal của con VPS Linux. Khi bạn mở thư mục, đó chính là cây thư mục trên VPS. Bạn có thể thoải mái code và tận dụng tài nguyên RAM/CPU hàng khủng của Server.

3. Thực Chiến 2: Dev Containers (Nói lời từ biệt với "Nhà em chạy được mà?")

Là một kỹ sư, chắc chắn bạn đã từng điên đầu vì máy mình cài Node.js v14 nhưng dự án mới lại đòi Node.js v20, dự án cũ hơn lại chạy PHP 7.4 trong khi máy đang cài PHP 8.3. Việc cài cắm đè các phiên bản môi trường lên máy local sẽ biến máy bạn thành một bãi rác công nghệ.

Extension Dev Containers giải quyết triệt để chuyện này bằng cách ép bạn phải code bên trong một Docker Container được cô lập hoàn toàn.

Cách vận hành:

  1. Mở một thư mục dự án trống ở máy local.
  2. Mở Command Palette (Ctrl + Shift + P), gõ Dev Containers: Add Dev Container Configuration Files....
  3. Chọn môi trường bạn muốn (ví dụ: Node.js & Mongo hoặc Go hoặc PHP).
  4. VS Code sẽ tự sinh ra một thư mục .devcontainer/ chứa file cấu hình devcontainer.json.
  5. Chọn tiếp Dev Containers: Reopen in Container.

Hệ thống sẽ tự dựng một Docker Container chạy ngầm, cài sẵn mọi công cụ cần thiết cho ngôn ngữ đó và đưa VS Code của bạn chui vào trong container đó. Máy local của bạn hoàn toàn "sạch sẽ", không cần cài thêm bất kỳ runtime nào cả. Khi tắt dự án, container tự tắt, trả lại sự bình yên cho chiếc laptop của bạn.

4. Tính Năng Đỉnh Cao: Tự Động Forward Port (Cầu nối mạng)

Khi bạn code Web Backend (ví dụ chạy trên port 8000) ở trên một con VPS từ xa hoặc bên trong Docker Container, làm sao để bạn dùng trình duyệt Chrome ở máy nhà truy cập vào xem giao diện được?

VS Code có tính năng Port Forwarding cực kỳ thông minh.

  • Tại tab Terminal phía dưới, bạn sẽ thấy một tab tên là Ports.
  • VS Code sẽ tự động phát hiện ứng dụng của bạn đang lắng nghe ở port nào (hoặc bạn có thể bấm nút Forward a Port thủ công và gõ 8000).
  • Nó sẽ tạo một đường ống bảo mật nối port 8000 của Server về đúng port 8000 của máy local.
  • Bây giờ, bạn chỉ cần mở Chrome ở máy nhà, gõ localhost:8000 là có thể test sản phẩm mượt mà như đang chạy ở local.

Tóm lại là...

Làm chủ bộ công cụ Remote Development giúp bạn giải phóng hoàn toàn sức mạnh của máy tính cá nhân. Bạn có thể tự tin nhận những dự án có môi trường cài đặt phức tạp nhất, nặng nề nhất mà không sợ hỏng máy hay lag máy. Mọi thứ đã có VPS và Docker gánh, việc của bạn chỉ là tập trung gõ code.


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.