在Rancher Desktop中使用Visual Studio Code Remote Containers

Visual Studio Code Remote - Containers 扩展可以使用Docker容器作为全功能开发环境。在Rancher Desktop通过 Moby 支持Docker CLI，也就开箱即用地只吃了该插件。

  • 首先确保Rancher Desktop使用 dockerd (moby) 作为Container Runtime(设置位于 Kubernetes Settings 菜单):

../../_images/dockerd_setting.png

  • 在 VS Code 中安装 Remote Development 扩展包

../../_images/vscode-remotedevelopment.png

在安装了 Remote Development 扩展包，会在左方看到 Remote Development 相关命令按钮:

../../_images/vscode-remotedevelopment-installed.png

备注

Rancher Desktop How-to Guides: VS Code Remote Containers 原文中提供的安装 vscode-dev-containers 方法现在已经被微软废弃。

  • 访问 VS Code Dev Containers 安装，或者直接在 VS Code 中搜索 Dev Containers 插件安装

  • 在 Dev Containers 插件安装完成后，在 VS Code 中按下 F1 ，然后运行命令 Dev Containers: Try a Dev Container Sample... 此时会出现一系列已经配置好的容器案例(远程开发用途)，包含了常见的语言

../../_images/select-a-sample.png

这里选择 Node 案例

  • 此时VS Code就会调用系统配置好的docker环境来构建容器，在右下方点击 Connecting to Dev Container (show log) 能够看到后台正在pull镜像并在镜像下载完成后启动一个完整的开发容器

../../_images/dev-container_show_log.png

备注

有关Nodes Dev Container详情可以参考 vscode-remote-try-node ，README有详细说明

使用

如果你只想快速启动开发，那么只需要按下 F5 (运行)就可以，此时会在远程容器中启动 Node.js 服务，经过短暂的编译之后，你会看到 VS Code 提示你应用已经就绪在 3000 端口，可以通过浏览器访问

../../_images/run_ready.png

并且在 DEBUG CONSOLE 中显示

运行
/usr/local/bin/node ./server.js
Running on http://0.0.0.0:3000

此时使用浏览器访问 http://127.0.0.1:3000 就可以看到一个初始化的 Node.js 页面，虽然简陋，但是已经建立起完整的开发流程

  • 在 VS Code ，可以通过案例最简单的 server.js 修订来一步步完成开发，并且通过控制工具栏实现 Node.js 服务端重启和刷新，以便能够快速看到自己的开发效果:

../../_images/run_stop.png

Under the hool

  • 在完成上述 vscode-remote-try-node 部署之后，执行 docker ps 可以看到系统新增加了一个容器:

新增node运行容器
CONTAINER ID   IMAGE                                                           COMMAND                  CREATED        STATUS        PORTS     NAMES
3f4486b3c41b   mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye   "/bin/sh -c 'echo Co…"   9 hours ago    Up 9 hours              laughing_greider

  • 在本地 VS Code 可以浏览远程容器(当然这里是连接 Rancher Desktop 中运行的一个容器)的案例代码，也即是说完全可以将容器迁移到不同服务器上方便远程开发:

../../_images/dev_container_remote.png

  • 进入 dev container 容器检查可以看到这个容器操作系统是比较古老的 Debian 11 (bullseye):

进入容器
# 这里dev container的容器名是随机的 laughing_greider
docker exec -it laughing_greider /bin/bash

检查容器情况

容器情况检查
root ➜ / $ df -h
Filesystem                      Size  Used Avail Use% Mounted on
overlay                          98G  4.0G   89G   5% /
tmpfs                            64M     0   64M   0% /dev
shm                              64M     0   64M   0% /dev/shm
/dev/disk/by-label/data-volume   98G  4.0G   89G   5% /vscode
tmpfs                           2.0G     0  2.0G   0% /proc/acpi
tmpfs                           2.0G     0  2.0G   0% /proc/scsi
tmpfs                           2.0G     0  2.0G   0% /sys/firmware

root ➜ ~ $ cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 11 (bullseye)"
NAME="Debian GNU/Linux"
VERSION_ID="11"
VERSION="11 (bullseye)"
VERSION_CODENAME=bullseye
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"

参考