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


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

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

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

そんなあなたに！

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

[Developing inside a Container](https://code.visualstudio.com/docs/remote/containers)

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

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

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

# プリリクイジット

- [Docker Desktop for Windows](https://docs.docker.com/docker-for-windows/)
- VScode
- Dockerの基本的な知識（DockerFile書ければ良き）


# 準備

- Dockerfile

を用意します。よく分からなくても、[Docker Hub](https://hub.docker.com/)にいろいろ上がってますので、探してみてください。

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

```DockerFile
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の拡張機能をインストールいただきたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/8f8765a6-48dd-2c03-7679-544f013f28b5.png)

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

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

# .devcontainer.json

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/294cd92a-03ca-97ee-b308-1af0dbb0eb56.png)

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

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/3060e2bf-e931-9501-169a-7de10e63be9d.png)

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

```
Remote-Containers: Add Development Container Configuration Files...
```
を実行します。続けて、``` From 'Dockerfile' ```を選択してください(今回は既存のDockerfileをもとに環境を作るため)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/7c052f44-eb0f-fdbf-a038-42611dff1c51.png)

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

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

[https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference](https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference)

を参照ください。

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

```Json: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"
	]
}

```

ここまでで、環境構築は終わりです！！いざ、コンテナを建ててみましょう！！

# いざ、！！

緑ボタン→`Remote-Containers: Reopen in Container`を実行！

(初回起動時はimageのインストールなどあり結構時間がかかるので注意)
↑めっちゃ時間かかってたのですが、[11月のupdate](https://code.visualstudio.com/updates/v1_41#_remote-development)でこんなの来てました。
> Remote - Containers: Improved performance when creating a container and new options for devcontainer.json.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/82fb2778-9a60-757f-128f-d43764360ca6.png)

左下の緑ボタンに注目！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/8a9ba781-7914-6994-1807-7315e4c2942e.png)

これが出ていれば成功です、コンテナが起動され、シェル(bash)にアクセスしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/3799cbcd-1337-a507-0d84-0088b4157bf2.png)

nodeはローカルではなく、このコンテナの中にインストールされてます。

PowerShellとかCMDにて、

`docker ps`

を実行するとコンテナが走っていることを確認できます。

ではでは、今回はExpressを使って二秒でウェブアプリ作りましょう。

# Webアプリ作るぞい

以下のコードをシェルで実行！！以上！！(Expressの話なので、今回はコマンドだけです)

1. `sudo npm install express-generator -g`
2. `express --view=pug tekitoWeb`
3. `cd tekitoWeb`
4. `npm install`
5. `set DEBUG=tekitoWeb:*`
6. `npm start`
　

そしたら、
[http://localhost:3000](http://localhost:3000)にアクセス！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/20fbf4a6-1851-f239-4c0b-280cfb0ec828.png)


これでコンテナにアプリができました、めでたしめでたし。
(画像は4000番にアクセスしていますが、3000をほかで使っていたため編集しているためです。皆様は3000でどうぞ)

# デバッギング

左の虫マークをクリックし、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/5c0442a0-0a0a-94c5-6b7e-b84a9844736f.png)


歯車をクリックして、`Node.js`を選択

すると、.vscode/launch.json ファイルが追加されていると思います。

準備おーけーなので、デバッグしましょう。

/tekitoWeb/routes/index.js

のを編集。してデバッグポイントを置く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/469508f9-2e32-9b98-912f-c37ddcfb86bb.png)


`f5`をおしてデバッグ実行！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/ad2ae1b5-b1bb-d025-c12e-2c6a753d67aa.png)


待機している、、、VScodeに戻ると、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/2da30a71-a8c0-515c-869a-446171d2db0b.png)

ちゃんと止まってらーー！！もっかい`f5`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322632/da47b775-6d1e-7fc8-f378-f6b7b3cd3daa.png)

表示できらー！！

# 終りに

どうでしょうか。

ここおかしくねーか！？とかうごかね！！とか何言ってんだこいつ。。。的なことあったらコメントなりメールなりスラックなりで教えて頂けると**非常**にありがたいです。

まじVScodeしゅごい。。。もうこれでええやん。

リリースが6月なので、何番煎じや、ていう記事ですが、、、