.NET 和 Azure 的 DevContainer

10/28/2022 11:56:45 | China Standard Time

容器不仅是为了使开发和生产环境保持一致，还被用在构建 CI/CD 管道、自动化测试等。 DevContainer 是一个开放的标准，它被称为开发容器。您可以在仓库中构建开发容器，并在 VSCode 中使用它。这篇文章将会介绍开发容器的规范，并讨论如何将其用于 .NET 和 Azure 应用开发。

# DevContainer 的标准

您可以从此 GitHub 存储库了解 DevContainer 的标准。 

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=microsoft&repo=vscode-dev-containers)](https://github.com/microsoft/vscode-dev-containers)

其中包含了几种常见开发环境的模板

- [Node Sample](https://github.com/Microsoft/vscode-remote-try-node)
- [Python Sample](https://github.com/Microsoft/vscode-remote-try-python)
- [Go Sample](https://github.com/Microsoft/vscode-remote-try-go)
- [Java Sample](https://github.com/Microsoft/vscode-remote-try-java)
- [.NET Sample](https://github.com/Microsoft/vscode-remote-try-dotnetcore)
- [Rust Sample](https://github.com/microsoft/vscode-remote-try-rust)
- [C++ Sample](https://github.com/microsoft/vscode-remote-try-cpp)
- [PHP Sample](https://github.com/microsoft/vscode-remote-try-php)

# DevContainer 的定义

构建 DevContainer 只需要两个文件

- devcontainer.json（定义了构建 DevContainer 所需的信息）
- Dockerfile（在 devcontainer 中调用的 Docker 容器映像）

> 您可以在构建容器的生命周期内调用 shell 脚本。`postCreateCommand` 属性用于指定需要运行的脚本。

# devcontainer.json 的结构

devcontainer.json 中包含许多信息，这里只介绍常用部分。

- build（指定了构建 Docker 容器的参数）
- forwardPorts（定义要公开的端口号列表。例如 Azure Function `7071`，ASP.NET Web/API `5000/5001`）
- features（预配置的[功能](https://github.com/devcontainers/features)，常见的程序和工具。您可以在[此处](https://github.com/devcontainers/features/tree/main/src)找到功能的完整列表。例如 Azure CLI、GitHub CLI 和 Terraform，以及 Node.js、Java、.NET、Python 等环境。）
- customisations（DevContainer 中需要使用的工具，例如 VSCode 扩展，编辑器设置等。）
- remoteUser（在 DevContainer 中设置用户，不设置默认为 root）
- postCreateCommand（创建 DevContainer 后需要运行的命令）

> 你可以在[此处](https://github.com/devcontainers/spec)查看更多配置

# 构建 DevContainer 的顺序

开发容器是如何构建的？

1. 构建 Docker 容器
1. 在构建 Docker 镜像时执行 devcontainer.json 中 features 的声明。
1. 运行 devcontainer.json 中 postCreateCommand 属性中声明的命令。
1. 应用 [dotfiles](https://docs.github.com/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account)。
1. 在 DevContainer 启动的时同应用 devcontainer.json 中定义的 extensions 和 settings 选项。

# 基本容器映像

DevContainer Images [存储库](https://github.com/devcontainers/images)中包含了一些 DevContainer 的基本映像列表。这里我们选择一个 .NET 的 Base Image。

> 您可以选择许多不同的变体，如果您更喜在 Ubuntu 中使用 .NET 7，则可以选择 （Ubuntu 22.04）`7.0-jammy` 或 （Ubuntu 20.04）`7.0-focal`。

```dockerfile
# [Choice] .NET version: 7.0-jammy, 7.0-focal
ARG VARIANT="7.0-jammy"
FROM mcr.microsoft.com/dotnet/sdk:${VARIANT}
```


# devcontainer.json 的配置

devcontainer.json 中包含了许多配置

## build 选项

声明 Dockerfile 的位置并传递一些参数。

```json
"build": {
    "dockerfile": "./Dockerfile",
    "context": ".",
    "args": {
    "VARIANT": "7.0-jammy"
        // Use this only if you need Razor support, until OmniSharp supports .NET 7 properly
        // "VARIANT": "7.0-focal"
    }
}
```

## forwardPorts 选项

您可能需要公开一些特定的端口。

```json
"forwardPorts": [
    // Azure Functions
    7071,
    // ASP.NET Core Web/API App, Blazor App
    5000, 5001,
    // Azure Static Web App CLI
    4280
]
```

## features 选项

添加更多工具和或开发环境。

- 常用工具（您可以通过此配置添加 `zsh` 和 `oh-my-zsh`。）

```json
"features": {
    // Install common utilities
    "ghcr.io/devcontainers/features/common-utils:1": {
        "installZsh": true,
        "installOhMyZsh": true,
        "upgradePackages": true,
        "username": "vscode",
        "uid": "1000",
        "gid": "1000"
    }
}
```

- Azure CLI

```json
"features": {
    // Uncomment the below to install Azure CLI
    "ghcr.io/devcontainers/features/azure-cli:1": {
        "version": "latest"
    }
}
```

- GitHub CLI

```json
"features": {
    // Uncomment the below to install GitHub CLI
    "ghcr.io/devcontainers/features/github-cli:1": {
        "version": "latest"
    }
}
```

- Node.js

```json
"features": {
    // Uncomment the below to install node.js
    "ghcr.io/devcontainers/features/node:1": {
        "version": "lts",
        "nodeGypDependencies": true,
        "nvmInstallPath": "/usr/local/share/nvm"
    }
}
```

假设您需要其他功能，但此[功能列表](https://github.com/devcontainers/features/tree/main/src)中尚不存在该功能。您可以通过定义 postCreateCommand 来手动添加它。

> overrideFeatureInstallOrder 可以指定按顺序添加某些功能，其他功能将按照随机顺序进行安装。

```json
"overrideFeatureInstallOrder": [
    "ghcr.io/devcontainers/features/common-utils"
]
```

## customizations.vscode.extensions 选项

在创建 DevContainer 时，可能需要安装一些扩展。该部分包含要安装的所有扩展。下面的扩展列表适用于 Azure 和 .NET 开发。如果要添加更多内容，请在 【Visual Studio Marketplace](https://marketplace.visualstudio.com/VSCode?WT.mc_id=dotnet-78728-juyoo) 中搜索它们并添加其扩展 ID。


> [C# 扩展](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp&WT.mc_id=dotnet-78728-juyoo)的 ID 为 `ms-dotnettools.csharp`

```json
"customizations": {
    "vscode": {
        "extensions": [
            // Recommended extensions - GitHub
            "cschleiden.vscode-github-actions",
            "GitHub.vscode-pull-request-github",

            // Recommended extensions - Azure
            "ms-azuretools.vscode-bicep",

            // Recommended extensions - Collaboration
            "eamodio.gitlens",
            "EditorConfig.EditorConfig",
            "MS-vsliveshare.vsliveshare-pack",
            "streetsidesoftware.code-spell-checker",

            // Recommended extensions - .NET
            "Fudge.auto-using",
            "jongrant.csharpsortusings",
            "kreativ-software.csharpextensions",

            // Recommended extensions - Power Platform
            "microsoft-IsvExpTools.powerplatform-vscode",

            // Recommended extensions - Markdown
            "bierner.github-markdown-preview",
            "DavidAnson.vscode-markdownlint",
            "docsmsft.docs-linting",
            "johnpapa.read-time",
            "yzhang.markdown-all-in-one",

            // Required extensions
            "GitHub.copilot",
            "ms-dotnettools.csharp",
            "ms-vscode.PowerShell",
            "ms-vscode.vscode-node-azure-pack",
            "VisualStudioExptTeam.vscodeintellicode"
        ]
    }
}
```

## customizations.vscode.settings 选项

您可能还希望在创建 DevContainer 时个性化编辑器设置。您可以在此处设置。

- 默认 Shell 为 `Bash`， 您可以修改为 `zsh`

```json
"customizations": {
    "vscode": {
        "settings": {
            // Uncomment if you want to use zsh as the default shell
            "terminal.integrated.defaultProfile.linux": "zsh",
            "terminal.integrated.profiles.linux": {
                "zsh": {
                "path": "/usr/bin/zsh"
                }
            }
        }
    }
}
```

- 您可以更改终端的字体

```json
"customizations": {
  "vscode": {
    "settings": {
        // Uncomment if you want to use CaskaydiaCove Nerd Font as the default terminal font
        "terminal.integrated.fontFamily": "CaskaydiaCove Nerd Font"
    }
  }
}
```

- 禁用滚动条预览

```json
"customizations": {
  "vscode": {
    "settings": {
        // Uncomment if you want to disable the minimap view
        "editor.minimap.enabled": false
    }
  }
}
```

- 修改资源管理器的行为

```json
"customizations": {
    "vscode": {
        "settings": {
        // Recommended settings for the explorer pane
        "explorer.sortOrder": "type",
        "explorer.fileNesting.enabled": true,
            "explorer.fileNesting.patterns": {
                "*.bicep": "${capture}.json",
                "*.razor": "${capture}.razor.css",
                "*.js": "${capture}.js.map"
            }
        }
    }
}
```

## postCreateCommand 选项

创建 DevContainer 后，您可能希望执行更多操作。例如，您无法通过 features 部分添加额外功能，因为它尚未准备就绪。您可以通过 postCreateCommand 部分添加 shell 脚本来执行这些附加操作。

```json
"postCreateCommand": "/bin/bash ./.devcontainer/post-create.sh > ~/post-create.log"
```

> post-create.sh 将会在 DevContainer 创建后立即执行

下面是一些您可能会用到的 postCreateCommand

#### CaskaydiaCove Nerd 字体

用于 `oh-my-zsh` 或 `oh-my-posh`

```bash
## CaskaydiaCove Nerd Font
# Uncomment the below to install the CaskaydiaCove Nerd Font
mkdir $HOME/.local
mkdir $HOME/.local/share
mkdir $HOME/.local/share/fonts
wget https://github.com/ryanoasis/nerd-fonts/releases/latest/download/CascadiaCode.zip
unzip CascadiaCode.zip -d $HOME/.local/share/fonts
rm CascadiaCode.zip
```

#### Azure CLI Extensions

您可以运行此脚本来安装 Azure CLI

```bash
## AZURE CLI EXTENSIONS ##
# Uncomment the below to install Azure CLI extensions
extensions=$(az extension list-available --query "[].name" | jq -c -r '.[]')
for extension in $extensions;
do
    az extension add --name $extension
done
```

#### Azure Functions Core Tools

您首先需要通过 `features` 安装 Node.js 环境

```bash
## AZURE FUNCTIONS CORE TOOLS ##
# Uncomment the below to install Azure Functions Core Tools
npm i -g azure-functions-core-tools@4 --unsafe-perm true
```

配置完成后，您可以通过 Github CodeSpace 来预览效果。

![CodeSpace](https://corehome.oss-cn-shenzhen.aliyuncs.com/blogs/2f7eb0cb-6bf6-44ac-ba8f-d8aea5520fc0.jpg)

# 了解 DevContainers 的更多内容

- [面向 DevContainers 的初学者 - Microsoft Docs](https://learn.microsoft.com/shows/beginners-series-to-dev-containers/?WT.mc_id=dotnet-78728-juyoo)
- [创建一个 DevContainer - Visual Studio Docs](https://code.visualstudio.com/docs/remote/create-dev-container?WT.mc_id=dotnet-78728-juyoo)
- [GitHub Codespaces 概览 - Github Docs](https://docs.github.com/codespaces/overview)
- [向你的存储库添加 DevContainer - Github Docs](https://docs.github.com/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=dotnet)