使用VSCode远程容器构建Node.js环境

3 年 ago
文, 翔
2 minutes

使用VSCode远程容器构建Node.js环境。

追求的目标

使用VSCode的远程容器功能，在不污染主机环境的情况下，在容器中进行Node.js环境的配置。同时，还可以通过扩展程序安装Lint工具并进行VSCode的设置。这是为了创建开发团队之间相同环境的目的。

VSCode远程容器是什么？

使用Docker容器构建开发环境，并通过挂载主机目录实现在主机上使用VSCode修改容器内的文件的功能(extension)。

image

构建流程

command

解释

文件组织

.
├── .devcontainer
│   ├── devcontainer.json
│   ├── postCreateCommand.sh
│   └── postStartCommand.sh
├── docker-compose.yml
├── package.json
└── test.js : サンプル実行ファイル

docker-compose.yml 的释义：Docer-compose文件

version: "3"

services:
  myservice:
    image: mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
    # working_dirディレクトリ下にホストのディレクトリをマウントします
    working_dir: /workspace
    volumes:
      # node_modulesディレクトリはホスト側に渡さないようにDockerのvolume内に格納します
      - node-modules:/workspace/node_modules
      - .:/workspace:cached
    # コンテナを起動させ続ける
    tty: true

volumes:
  node-modules:

本图片使用的是Microsoft的Javascript-Node14。
基本操作系统为Debian11（bullseye）。

.devcontainer目录及其子目录是特定于VSCode远程容器的文件。

.devcontainer/devcontainer.json

.devcontainer/devcontainer.json 文件

{
  "name": "remote container sample",
  "dockerComposeFile": ["../docker-compose.yml"],
  "service": "myservice",
  "workspaceFolder": "/workspace",
  "settings": {
    "terminal.integrated.defaultProfile.linux": "bash",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true,
      "source.fixAll.eslint": true
    },
    "[json]": {
      "editor.formatOnSave": false
    }
  },
  "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
  "postCreateCommand": "bash ./.devcontainer/postCreateCommand.sh",
  "postStartCommand": "bash ./.devcontainer/postStartCommand.sh"
}

以下是对docker-compose的路径、VSCode的设置和扩展进行描述。
此外，postCreateCommand是在创建容器时仅执行一次的命令，而postStartCommand是每次启动容器时都会被调用的命令。您可以直接编写命令，但是如果有多个命令，这样会显得混乱，因此我们使用独立的shell文件进行管理。

创建后命令.sh

npm install

启动命令.sh

node test.js

填补

在VSCode命令面板上执行“关闭远程连接”操作后，大约10秒后容器将被终止。

安装VSCode的Docker扩展后，您可以在VSCode上停止/删除容器等操作。

docker kill [container_id]
docker rm [container_id]

在安装VSCode的LiveShare扩展后，可以进行对pair programming的引入。
在.devcontainer/devcontainer.json文件中。

  "extensions": [
    ...
    "ms-vsliveshare.vsliveshare"
  ],

在.devcontainer/postCreateCommand.sh文件中

...

# live share dependencies
# via: https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/linux#debian--ubuntu
apt-get update && apt-get install -y \
  libssl1.1 \
  libkrb5-3 \
  zlib1g \
  libicu[0-9][0-9] \
  gnome-keyring \
  libsecret-1-0 \
  desktop-file-utils \
  x11-utils \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*

通过追加，在引言中可以进行导入。
即使与对方共享终端，它也变成了容器端终端，所以可以安心。

bannerAds