.devcontainer 使用方式

10 月 ago
木它
4 minutes

DevContainer 是一种用于开发环境的配置工具，通过它可以在容器中定义和使用开发环境。它通常与 Visual Studio Code (VS Code) 一起使用，以便开发者在一致的环境中工作。以下是使用 DevContainer 的基本步骤：

前提条件

  1. 安装 Docker：确保你的系统上已经安装了 Docker。
  2. 安装 VS Code：确保已经安装了 Visual Studio Code。
  3. 安装 Remote – Containers 插件：在 VS Code 中安装 Remote – Containers 插件。

创建 DevContainer

  1. 初始化项目：打开你想要配置 DevContainer 的项目文件夹。
  2. 创建 .devcontainer 文件夹：在项目根目录下创建一个名为 .devcontainer 的文件夹。
  3. 创建配置文件：在 .devcontainer 文件夹中创建一个 devcontainer.json 文件。这个文件用于定义容器的配置。

示例一 devcontainer.json ,用于python 开发

项目结构

my-python-project/
├── .devcontainer/
│   ├── devcontainer.json
│   └── Dockerfile
├── src/
│   ├── __init__.py
│   └── main.py
├── tests/
│   ├── __init__.py
│   └── test_main.py
├── .gitignore
├── README.md
└── requirements.txt

以下是一个简单的 devcontainer.json 示例：

{
    "name": "My Dev Container",
    "build": {
        "dockerfile": "Dockerfile",
        "context": ".."
    },
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": [
        "ms-python.python",
        "ms-azuretools.vscode-docker"
    ],
    "postCreateCommand": "pip install -r requirements.txt",
    "remoteUser": "vscode"
}

启动 DevContainer

  1. 打开命令面板：在 VS Code 中按 F1 或 Ctrl+Shift+P 打开命令面板,或者启动时自动会右下角提示,或者左下角点击。
  2. 选择命令：输入并选择 Remote-Containers: Reopen in Container。
  3. 等待构建和启动：VS Code 将会使用 devcontainer.json 中的配置构建并启动容器。这可能需要一些时间，具体取决于你的配置和网络情况。

使用 DevContainer

当容器启动后，VS Code 将会重新加载，并且你将在容器内进行开发。你可以使用终端、安装扩展和进行代码调试，所有操作都将在容器内进行。

高级配置

  1. Dockerfile：你可以在 .devcontainer 文件夹中创建一个 Dockerfile 来自定义容器镜像。
  2. 挂载卷：通过 mounts 配置项来挂载本地目录到容器中。
  3. 端口转发：通过 forwardPorts 配置项来转发本地端口。

示例 Dockerfile

FROM mcr.microsoft.com/vscode/devcontainers/python:3.9

# 安装额外的软件包
RUN apt-get update && apt-get install -y \
    curl \
    git \
    && apt-get clean

# 设置工作目录
WORKDIR /workspace

示例二 devcontainer.json ,用于Cesium 开发

项目结构

my-Cesium-project/
├── .devcontainer/
│   ├── devcontainer.json
│   └── Dockerfile
├── models/
│   └── example.glb
├── favicon.ico
├── index.html
└── package.json

示例 devcontainer.json 

{
  "name": "Cesium Dev Container",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ],
  "forwardPorts": [8080],
  "postCreateCommand": "npm install",
   "workspaceFolder": "/workspace",
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached"
  ]
}

示例 Dockerfile

# 使用官方的 node 镜像作为基础镜像
FROM node:14

# 设置工作目录
WORKDIR /workspace

# 只复制 package.json 和 package-lock.json 到工作目录, 剩余的文件用挂载的方式
COPY package*.json ./

# 安装项目依赖
RUN npm install && npm cache clean --force

# 暴露端口
EXPOSE 8080

# 启动 Cesium 开发服务器
CMD ["npm", "start"]

示例 package.json

{
  "name": "cesium-docker-test",
  "version": "1.0.0",
  "description": "Cesium Docker Test Environment",
  "scripts": {
    "start": "npx http-server -p 8080"
  },
  "dependencies": {
    "cesium": "^1.92.0",
    "http-server": "^0.12.3"
  }
}

示例 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Docker Test</title>
    <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
    <link href="node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
        #versionInfo {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.8);
            padding: 5px;
            border-radius: 3px;
            font-size: 14px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <div id="versionInfo"></div>
    <script>
        console.info("你好");

        var viewer = new Cesium.Viewer('cesiumContainer');

        // 显示Cesium版本信息
        var versionInfo = document.getElementById('versionInfo');
        versionInfo.textContent = 'Cesium.js 版本: ' + Cesium.VERSION;

        // 北京的地理坐标
        var beijingPosition = Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 250); // 高度设为250

        // 加载并显示GLB模型
        Cesium.Model.fromGltfAsync({
            url: 'models/example.glb',
            modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(beijingPosition),
            scale: 1.0 // 调整缩放比例
        }).then(function(model) {
            viewer.scene.primitives.add(model);
            viewer.zoomTo(viewer.entities.add({
                position: beijingPosition,
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.RED
                }
            }));
            console.info("模型加载成功，zoomTo");
        }).catch(function(error) {
            console.error("模型加载失败:", error);
        });

        // 检查Cesium是否正确加载
        if (Cesium) {
            console.info("Cesium.js 库正确加载");
        } else {
            console.error("Cesium.js 库加载失败");
        }

        // 增加3D Tiles展示功能
        const add3dTiles = async () => {
            let tileset;
            try {
                tileset = await Cesium.Cesium3DTileset.fromUrl('models/output/tileset.json');
                viewer.scene.primitives.add(tileset);
                viewer.zoomTo(tileset); // 自动缩放到3D Tiles
                console.log('3D Tiles加载成功');
            } catch (error) {
                console.error('3D Tiles加载失败:', error);
            }
        };
        add3dTiles();
    </script>
</body>
</html>

通过这些步骤，可以使用 DevContainer 配置和管理开发环境，从而使开发过程更加高效和一致。