使用 VSCode 远程开发最佳实践

发表于 分类于 ， 本文字数： 1.1k 阅读时长 ≈ 1 分钟

首先分析一下，为什么要远程开发？本人认为远程开发主要有以下优点：

  1. 一处搭建，多处使用

    只需要在远程机上搭建好开发环境，在任何电脑上都可以进行开发，非常便利

  2. 开发环境隔离，可以在不同的开发环境之间快速切换

  3. 对本机性能要求低

远程开发方式选择

远程开发方式：

  1. Remote - SSH

    通过使用 SSH 远程连接计算机或者虚拟机中

  2. Remote - Containers

    通过 SSH 远程连接到 Docker 容器，在 Docker 中进行开发

  3. Remote - WSL

    在 Windows 中远程 WSL 进行开发。这种方式无法实现环境隔离，但是可以在 Windows 中获取 Linux 开发的体验

选择比较：

由于业务原因，有的软件必须基于 Windows 进行开发，只能选择 Windows+WSL 组合，但是 WSL 无法实现开发隔离，因此还需要加上 Docker。

虽然可以仅使用 Docker 实现远程开发，但这会带来一个问题，需要在每个开发容器中安装 ssh、git、zsh 等一系列工具，增加部署负担；若需要增加映射端口或者新增挂载，则必须要重建容器，这个时候，容器里的配置将会清空，又得从头配置一次。

综合考虑，最终选择了 Windows + Docker Desktop + WSL 组合使用的方式。

方案实施

具体的实施方案为：

  1. 在 Docker 中跑应用
  2. 将代码文件挂载到 WSL 的某个工作目录
  3. 使用 VSCode 远程 WSL，打开工作目录进行编程

举例说明

下面以 vue 项目为例举例说明

首先，在 WSL 中，创建一个远程工作目录，例如 ~/docker-envs，将下面的 docker-compose.yml 复制过去，运行 docker compose up -d 启动开发环境

1
2
3
4
5
6
7
8
9
10
11
12
services:
  vue-env:
    container_name: vue-env
    image: node:lts
    volumes:
      - ./vue:/app
    working_dir: /app
    ports:
      - 9527:9527
    # 为容器启动一个轻量级的 init 系统，可以处理孤儿进程并转发信号，解决 stop 速度慢的问题
    init: true
    command: [ "sh", "-c", "exec sleep infinity" ]

然后，使用下面的命令进入到容器内开始初始化项目

1
2
3
4
docker exec -it vue-env bash
# 项目初始化及依赖安装此处省略
...
# 退出容器

接着，执行 docker exec -it vue-env npm run dev 启动开发环境，这个终端不能退出，在开发中需要一直保持。

最后，使用 VSCode 远程 WSL，打开 ~/docker-envs/vue 进行开发。