Trải nghiệm tính năng Visual Studio Code Remote

Ngày nay việc sử dụng docker trong quá trình phát triển phần mềm đã quá phổ biến. Nó được sử dụng từ code ở local tới deploy lên môi trường production. Ở môi trường local nó giúp developer setup môi trường nhanh, ít tác động tới hệ điều hành đang chạy. Vì các compiler, tool, datebase,... được chạy trong các container tách biệt với hệ điều hành. Tuy vậy, việc tách biệt này lại làm nãy sinh một số hạn chế như khó debug, intellisense trong ide không làm việc vì các ide yêu cầu các compiler, tool phải được cài đặt song song với nó. Vì thế, gần đây Vscode đã thử nghiệm tính năng mới đó là Visual Studio Code Remote để khắc phục vấn đề này. Cùng nhau khám phá nào!

1. Yêu cầu

Để sử dụng được tính năng này có một số yêu cầu sau:

Vscode
Docker (Thông tin lấy từ docs của Vscode):
- Windows: Docker Desktop 2.0+ on Windows 10 Pro/Enterprise. (Docker Toolbox is not supported. Windows container images are not supported.)
- macOS: Docker Desktop 2.0+.
- Linux: Docker CE/EE 18.06+ and Docker Compose 1.21+. (The Ubuntu snap package is not supported.)
Remote Development extension pack phải được cài trong Vscode. Extension pack này bao gồm 3 extenstion: Remote - SSH, Remote - Containers, Remote - WSL.

Ngoài ra các container được sử dụng container phải là:

x86_64 / ARMv7l (AArch32) / ARMv8l (AArch64) Debian 9+, Ubuntu 16.04+, CentOS / RHEL 7+

x86_64 Alpine Linux 3.7+

Khi sử dụng Alpine container thì một số extension sẽ không hoạt động.

2. Giới thiệu qua về Vscode Remote - Container

Với Remote Development extension pack Vscode có thể remote code theo 3 cách:

Remote-SSH - Kết nối với bất kỳ vị trí nào bằng cách mở các thư mục trên máy / VM từ xa bằng SSH.
Remote-Container - Làm việc với một chuỗi công cụ hộp cát hoặc ứng dụng dựa trên container bên trong (hoặc gắn vào) một container.
Remote-WSL - Nhận trải nghiệm phát triển do Linux cung cấp trong Hệ thống con Windows cho Linux.

Trong bài viết này mình chỉ giới thiệu qua Remote - Container. Mấy cái kia mình cũng chưa thử qua.

Một cái hình tổng quan về Remote - Container

3. Thử nghiệm

a. Remote - Container cho 1 container

Tạo thư mục cho dự án và mở nó với vscode

project_path=~/vscode-remote-node-demo && mkdir $project_path && code $project_path

Tạo file .devcontainer/devcontainer.json
Mở source trong container
Đợi 1 lúc cho vscode và docker làm việc ta có môi trường node. Tiến hành khởi tạo project
Viết ít source và test

Working

Tạo breakpoint và bấm F5

Ngon

Vậy còn eslint có làm việc ko nhỉ 🤔? Cài eslint, thêm file config của eslint, cài eslint extension cho vscode và reload lại vscode thử thôi.

yarn add -D "eslint@^6.1.0" "eslint-plugin-import@^2.18.2" "eslint-config-airbnb-base@^14.0.0"

Work perfect

Nhưng... Nếu mỗi khi rebuild lại container (khi sửa file .devcontainer.json) thì extension cài theo cách này sẽ mất. Bạn sẽ không muốn mỗi lần rebuild lại container là phải cài lại extension. Cách giải quyết là định nghĩa thêm extension sẽ được cài trong container ở file devcontainer.json.

{
	"name": "Node.js Sample",
	"image": "node:12.13",

	// Thêm id của các các extension để vscode tự cài đặt chúng mỗi khi container được tạo.
	"extensions": [
		"dbaeumer.vscode-eslint"
	]
}

Sau khi thay đổi phải devcontainer.json nhớ rebuild lại container

Còn vấn đề access vào container từ host 🤔? Remote - Container cho phép làm việc này thông qua cấu hình appPort trong .devcontainer.json. Cước thử thôi, tiến hành cài package express, thêm cấu hình appPort, rebuild lại container và run node index.js

Kết quả từ browser

b. Remote - Container với nhiều container

Remote - Container cũng hỗ trợ file docker-compose.yml. Let's try

Thêm file docker-compose.yml, sửa lại index.js để connect tới mongodb, sửa .devcontainer.json, rebuild container và run node index.js

# docker-compose.yml
version: "3.7"

services:
  node:
    image: node:12.13
    ports:
      - 3000:80
    volumes:
    # mount source vào container để vscode có thể access
      - ..:/source
    # Thay đổi command để giữ container chạy
    command: tail -f /dev/null
  mongo:
    image: mongo:4.2
    ports:
      - 27017:27017

Kết quả

Lời kết

Như trong quá trình thử nghiệm ta thấy với Vscode Remote - Container ta có thể setup môi trường dev nhanh và hiệu quả chỉ với Vscode, Remote Extension pack, Docker và devcontainer.json. Chúng ta không cần cài bất kỳ thêm compiler, tool, database nào ở máy local từ đó đảm bảo hệ điều hành luôn sạch sẽ trong khi đó vẫn đảm bảo được debugger, intellisense hoạt động. Những file cấu hình ta để vào source control nên các developer khác lúc kéo source về thì chỉ cần mở vscode lên là mọi thứ đã được cài động tự động. Đảm bảo thống nhất code convention giữa các developer.

Vscode Remote ngoài ra còn hỗ trợ thêm Remote - SSH và Remote - WSL mà trong bài viết chưa đề cập đến. Đó chắc hẵn cũng là một tính năng thú vị. Bạn có thể tìm hiểu thêm chúng cũng như Remote - Container ở link tham khảo.

Chúc các bạn code vui vẻ!!!

Tham khảo

Source
https://code.visualstudio.com/docs/remote/remote-overview