Visual Studio Online の環境をカスタムする

2代目 Visual Studio Online(以下 VSO) がパブリックプレビューになりました。

機能やクイックスタートは id:okazuki さんが記事を書かれているのでこちらから。
blog.okazuki.jp

この記事では、VSO でオレオレ開発環境を作る方法をご紹介します。

簡単に説明すると、Dockerfile を使って開発環境を作ることができるというものです。ざっくりとイメージ。
f:id:mitsuki0820:20191105140751p:plain

それでは簡単に流れを見ていきましょう

1-1. VSO の設定

VSO は、Environment の作成時に、GitHubリポジトリを指定することができます。
f:id:mitsuki0820:20191105133045p:plain

この時に、

  • repository-root}/.devcontainer.json

もしくは

  • {repository-root}/.devcontainer/devcontainer.json

に設定ファイルを置いておくと、拡張やエディタ設定、フォワードポートを、展開時に自動的に設定してくれます。

ここで、"dockerfile" オプションに、Dockerfile のパス(.devcontainer.json からの相対パス)を指定すると、VSO が docker build してコンテナを作ってくれるという仕組みです。

ということで、.devcontainer.json を書いてみましょう。

※2019/12/1 追記:
以下の様なエラーになってしまうため -u, vscodeコメントアウトを外しました。

COMMAND: docker start vsonline_5e523a68-be25-4086-b1a9-1ed8fe5cad4f
Error: failed to start containers: vsonline_5e523a68-be25-4086-b1a9-1ed8fe5cad4f
Error response from daemon: linux spec user: unable to find user vsonline: no matching entries in passwd file
{
	"name": "Azure CLI",
	"dockerfile": "Dockerfile",
	//"image": "nginx",
	
	// The optional 'runArgs' property can be used to specify additional runtime arguments.
	"runArgs": [
		// Uncomment the line if you will use a ptrace-based debugger like C++, Go, and Rust.
		// "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined",

		// Uncomment the next line to use a non-root user. On Linux, this will prevent
		// new files getting created as root, but you may need to update the USER_UID
		// and USER_GID in .devcontainer/Dockerfile to match your user if not 1000.
		"-u", "vscode"
	],

	// Use 'settings' to set *default* container specific settings.json values on container create. 
	// You can edit these settings after create using File > Preferences > Settings > Remote.
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash"
	},

	// Uncomment the next line if you want to publish any ports.
	// "appPort": [],

	// Uncomment the next line to run commands after the container is created.
	"postCreateCommand": "az --version",

	// Add the IDs of extensions you want installed when the container is created in the array below.
	"extensions": [
		"ms-vscode.azurecli"
	]
	
}

書き方が分からないときは、実は、こちらのリポジトリに一通りありますのでここからコピーしてきます。
github.com

先ほどの .devcontainer.json も、Azure CLI のテンプレートから持ってきました。

1-2. Dockerfile の作成

次に Dockerfile を作ります。といってもこれもテンプレからそのままです。

#-------------------------------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#-------------------------------------------------------------------------------------------------------------

FROM debian:9

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

# This Dockerfile adds a non-root 'vscode' user with sudo access. However, for Linux,
# this user's GID/UID must match your local user UID/GID to avoid permission issues
# with bind mounts. Update USER_UID / USER_GID if yours is not 1000. See
# https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=vscode
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Configure apt and install packages
RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \
    #
    # Verify git, process tools installed
    && apt-get -y install git iproute2 procps \
    #
    # Install the Azure CLI
    && apt-get install -y apt-transport-https curl gnupg2 lsb-release \
    && echo "deb [arch=amd64] https://packages.microsoft.com/repos/azure-cli/ $(lsb_release -cs) main" > /etc/apt/sources.list.d/azure-cli.list \
    && curl -sL https://packages.microsoft.com/keys/microsoft.asc | apt-key add - 2>/dev/null \
    && apt-get update \
    && apt-get install -y azure-cli \
    #
    # Create a non-root user to use if preferred - see https://aka.ms/vscode-remote/containers/non-root-user.
    && groupadd --gid $USER_GID $USERNAME \
    && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m $USERNAME \
    # [Optional] Add sudo support for the non-root user
    && apt-get install -y sudo \
    && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
    && chmod 0440 /etc/sudoers.d/$USERNAME \
    #
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

# Switch back to dialog for any ad-hoc use of apt-get
ENV DEBIAN_FRONTEND=

ここまでで、一旦 GitHub にプルしておきます。

参考までに、こちらの私のリポジトリを置いておきます。
github.com

2. オプトインの設定

ちょっと分かり辛いのがこちら。ドキュメントにもありますが、この機能は試験的な機能なのでオプトインで有効化してあげる必要があります。
docs.microsoft.com

.cloudenv-settings.json の部分ですね。

重要なのはこれを、VSCode を実行しているローカルの端末上に作る必要があるということです。
# どうやら今のところ VSO 上で作る方法は無いようです。

なので、Windows であれば、%USERPROFILE% 、Linux であれば、$HOME に以下の記述がされた .cloudenv-settings.json を配置します。

{
    "isInternal": true,
    "experimentalFeatures": {
        "customContainers": true
    }
}

3. Environment の作成

ここまで来たら、あとは Environment を作るだけです。

1. 作成

f:id:mitsuki0820:20191105135303p:plain

2. Custom Setting

f:id:mitsuki0820:20191105135327p:plain

3. リポジトリの指定

f:id:mitsuki0820:20191105135356p:plain

4. 名前を入れて

f:id:mitsuki0820:20191105135517p:plain

5. SKU を決めて

f:id:mitsuki0820:20191105135540p:plain

6. Suspend を決めると

f:id:mitsuki0820:20191105135620p:plain

7. docker build が始まります

f:id:mitsuki0820:20191105135801p:plain

VSO 上から見ると Creating 状態になってます。
f:id:mitsuki0820:20191105135957p:plain

4. 完成

ということで、az コマンドの入った VSO 環境が出来上がりました。
f:id:mitsuki0820:20191105140305p:plain


PC を変えたあとのセットアップの時間短縮や言語によって環境を変えたいとき、他の人と環境を共有したいときに使えそうです。あとは Linux VM を度々セットアップするのが面倒なときとかも。

これは夢が広がる機能ですね!