vscodeと開発環境をdockerにまとめてみた(2018年版)

# [記事の概要]
- 取ってきたらX転送でVisual Studio Codeが試せる環境。
- ubuntu:16.04をベース
- Visual Studio Codeインストール済み
- X転送設定済み
- 日本語入力(Mozc)設定済み
- nvm経由でnodejs設定済み(8.11.3)

----

##　はじめに
Angularの勉強をしようと思い立ちました。
普段はwindowsを使っているのですが、この業界、素のwindowsだと何かと厳しいです。
(ツール類はmac、linuxが第一プラットフォームな感じが強い...。)
Cygwinは長く使っているのですが、ちょっと特殊な事をしようとすると簡単にドはまりするので避けたくて(；´･ω･)
WSLももうちょっと枯れてからが良いなぁと思っていました(´・ω・`)
結局、Dockerの勉強を兼ねてDocker + X転送という形で落ち着いたのでまとめます。

## 作ったもの
取ってきたらvscodeが入っていて、Angularが試せるDockerfileです。

---

## 準備(Windows 10)

### Docker for windows 
説明は不要かと思います。
入れてください。

### VcXsrv
Windows上で動作するXサーバです。
インストールに関して特に難しい事は無いので、以下サイトが参考になります。

参考
[VcXsrv のインストール](https://www.kunihikokaneko.com/free/wintoolchain/vcxsrv.html)

### putty
sshクライアントです。
実際は何でもよいのですが、色々と試した結果、VcXsrvとの相性が一番良かったのがこれだったので推奨します。
(最初はCygwinのsshでX転送していたけど、上手く動く時とそうでない時があり原因が良くわからなかったため...。)

[Windowsでsshクライアント「PuTTY」を使う](http://www.atmarkit.co.jp/ait/articles/1006/25/news095.html)

---

## 使い方
### docker image取得

docker huubからイメージを取得します。

> docker pull yamada28go/docker-x-japanese-vscode-nodejs

### docker 起動

取ってきたイメージを起動します。
起動コマンドの実行例は以下です。

[コマンド例]
>docker run --rm -p 23001:22 --name VsCodeTest yamada28go/docker-x-japanese-vscode-nodejs

[意味]
- sshポートをローカルポートの23001に転送
- 停止したらコンテナ消去
- コンテナ名は「VsCodeTest」

###　VcXsrvの起動
Xサーバを先に起動します。
普通に起動すれば使えますが、設定に関して質問が出てきます。
設定方法は上の参考リンクを参照してください。

###　puttyの設定

puttyから接続します。
何か所か設定が必要なので、以下説明します。

- 接続ポート

コンテナ起動時に指定したポートを指定します。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/63200/4750b9bc-b553-31a2-06f1-d777f59601c0.png)

- 優先する暗号種別

ローカルで転送するだけなので軽い暗号を使用して暗号計算の負荷を下げます。
下のほうにある「Arcfour」を最上位に持ってきます。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/63200/08965d4d-6b0f-89e8-7aff-c55b1a34da41.png)

- X転送の有効化

X転送の有効化をします。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/63200/768a1226-1861-c397-e7de-6916dd87f20c.png)

###　puttyからの接続

設定が出来たら接続します。
ログイン情報は以下です。

| ユーザー名      |       パスワード |備考|
|:-----------------|:------------------|:------------------|
| dev            |             dev |←こっちを使う|
| root            |             hoge |管理者用|

接続するとX転送が有効な状態となっています。
puttyから「xeyes」と入力するとお馴染みの目玉が出てきます。
「code」と入力するとVisual Studio Codeが立ち上がってきます。
nvm経由でnodejsも入っているので、この状態でAngularCLI等を入れる事が出来ます。
クリップボードも有効になっているので、windowsアプリが開いているような状態で扱う事が出来ます。

![sc.png](https://qiita-image-store.s3.amazonaws.com/0/63200/11f3ac45-af36-ef59-3946-5da43fc64567.png)

###　日本語入力設定
Mzcの入力設定は「ibus-setup」から設定する事が出来ます。
以下のようにコマンドを入力すると設定画面が出てきます。

>ibus-setup&

ここで、「Input Method」をタブを選択してMozcの設定を切り替えてください。

![jp.png](https://qiita-image-store.s3.amazonaws.com/0/63200/1410046d-8b5a-a397-6303-2aab505458a2.png)

---

## その他

この記事では、nodejsまで入った環境を使っています。
DockerfileはVisual Studio Codeを入れた状態で分けているので、
そのファイルを下地にすれば別言語用のDockerfileも同様に作れるものと思います。

[docker-x-japanese-vscode-base](https://github.com/yamada28go/docker-x-japanese-vscode-base)


## 参考

[DockerでポータブルなLinux開発環境(GUI付き)を構築する](https://qiita.com/gitcell/items/8b1f154edc26def7ecce)
↑
基本的にはこの記事をベースにさせて頂きました。

[install nvm in docker](https://stackoverflow.com/questions/25899912/install-nvm-in-docker)
↑
dockerの中でnvmしようとしたらはまりました...。

[【Linux小技】 scp(ssh)での暗号化方式の違いによる転送速度ベンチマーク]
(http://kenknown.blog42.fc2.com/blog-entry-171.html)
↑
X転送が遅いのでsshの暗号を切り替えました。
その参考です。