【VScodeマン】ローカル環境汚さずに、簡単に自己学習環境用意したい！！(remote-container)

Last updated at 2019-12-23Posted at 2019-12-23

「〇〇の勉強したい！！」

そう思ったら、環境を用意しなきゃ！！
ですが、その度に必要な環境を全てインストールしていたら、
ローカルの環境がごちゃごちゃに！（glitchとかあるんですが？みたいなのは考えないでください）

ローカル環境汚さないといえば、Dockerがありますよね。
ただ、Dockerでコンテナ建てて、ローカルで書いたファイルをマウントして実行して、、、
え、コマンドでしか実行できないの？え、デバッグできないの？
普段windowsでVSやVScodeで開発しているマン(linuxあんまり詳しくない)は、使いづら！と思ったのでした。

そんなあなたに！

VScodeがこんな拡張機能を出してました。（確かstableは6月くらい？）

Developing inside a Container

VScode使ってコンテナの中で開発することができるようになるという拡張です。

ということで、これ使ってnode+Expressでwebサーバ作ってみよ～

結果から言うと、ローカルにできるのは、ソースファイルたちがいるフォルダのみで、VScodeの機能を利用しつつ開発できます。

プリリクイジット

Docker Desktop for Windows
VScode
Dockerの基本的な知識（DockerFile書ければ良き）

準備

Dockerfile

を用意します。よく分からなくても、Docker Hubにいろいろ上がってますので、探してみてください。

今回はこちらです。上述した記事で紹介されていたものです。

FROM node:10-buster
 
 
ENV DEBIAN_FRONTEND=noninteractive
 
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 and needed tools are installed
    && apt-get install -y git procps \
    #
    # Remove outdated yarn from /opt and install via package
    # so it can be easily updated via apt-get upgrade yarn
    && rm -rf /opt/yarn-* \
    && rm -f /usr/local/bin/yarn \
    && rm -f /usr/local/bin/yarnpkg \
    && apt-get install -y curl apt-transport-https lsb-release \
    && curl -sS https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/pubkey.gpg | apt-key add - 2>/dev/null \
    && echo "deb https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update \
    && apt-get -y install --no-install-recommends yarn \
    #
    # Install eslint globally
    && npm install -g eslint \
    #
    # Create a non-root user to use if preferred - see https://aka.ms/vscode-remote/containers/non-root-user.
    && if [ "$USER_GID" != "1000" ]; then groupmod node --gid $USER_GID; fi \
    && if [ "$USER_UID" != "1000" ]; then usermod --uid $USER_UID node; fi \
    # [Optional] Add sudo support for non-root users
    && apt-get install -y sudo \
    && echo node ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/node \
    && chmod 0440 /etc/sudoers.d/node \
    #
    # 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=

次に、

Remote-Containers

というVScodeの拡張機能をインストールいただきたいです。

(ついでに"Docker"という拡張機能もご一緒にインストールお願いします。便利なので)

では先ほどクローンしていただいた方は、そのフォルダをオープンして、いざ始めてゆきます。

.devcontainer.json

こんなフォルダ構成。git関係はお好きにどうぞ。そして、左下に何やら怪しい緑色が！！！！

ここを押すとRemote-Containers拡張で追加されたコマンドを見ることができます。

初めに、今回の拡張機能を用いる上で必要なファイルをプロジェクトに追加してあげます。

VScodeのデバッグ設定とかで追加するlaunch.jsonとかと同じノリで、

コンテナを立ち上げる目的の設定ファイル .devcontainer.json をファイルを追加する必要があります。

左下の緑ボタンをクリック！！

↑のようにコマンドが出てきます。今回は

Remote-Containers: Add Development Container Configuration Files...

を実行します。続けて、From 'Dockerfile'を選択してください(今回は既存のDockerfileをもとに環境を作るため)

このように、ファイルが追加されているはずです。

このファイルの細かい設定については、流石にすべてを説明するのは厳しいので、

https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference

を参照ください。

今回は、こちらをまるっとコピペしていただければ幸いです。

devcontainer.json

{
	"name": "docker-vscode-demo",

	"context": "..",

	"dockerFile": "..\\Dockerfile",

	"appPort": [3000],

	"runArgs": [
		"-u", "node"
	],

	"settings": {
		"terminal.integrated.shell.linux": "/bin/bash"
	},

	"postCreateCommand": "yarn install",

	"extensions": [
		"dbaeumer.vscode-eslint"
	]
}