VS CodeのDevContainerを使って Vue.js 開発環境を作ってみた


本日、我が家にも例の「アベノマスク」が届きました。ちゃんと実在してたんですね。。。

## はじめに

新しく関わるプロジェクトが Vue.js + TypeScript を使っているので、予習のために開発環境を整えたい。でも node.js なり npmホニャララなりを大量にインストールしてローカルを汚したくないので、ここは [VS Code の DevContainer](https://code.visualstudio.com/docs/remote/containers) を使って Docker コンテナに開発環境のアレコレ依存ライブラリをパッケージングしたいな、と。

とはいえ、DevContainer自体がまだ日の浅い機能なので、ググって出てくる日本語記事どおりにやっても、もう実態が変わっていて、まんまはできませんでした。

ということで、今日（2020/04/23）時点で、Vue.js（node.js + TypeScript）用のDevContainerを作ってみた記録を残しておきます。


## 成果物

https://github.com/shionit/vuejs-devcontainer

経緯はいいから早く使いたい、出来上がりを見たい、という方はお先にどうぞ。



## 環境構築の記録

### 作業フォルダを作り、VS Code を起動

```zsh
% mkdir vuejs-devcontainer
% code !$
```

### DevContainer Config file を生成

VS Code で、 `Cmd + Shift + P` から `Remote-Containers: Add Development Container Configuration Files...` を選択。

![Kobito.MGXJZJ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13994/e6f6aa10-8a33-49d9-3588-751a05f73795.png "Kobito.MGXJZJ.png")


`Node.js 12 & TypeScript` を選択。

※単に最新のNode.js が12だったので

![Kobito.t8tBlN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13994/81182fd3-ac67-58a0-4eeb-be6ae3456efc.png "Kobito.t8tBlN.png")


`.devcontainer/devcontainer.json` と `.devcontainer/Dockerfile` が生成される。

![Kobito.6Jwjl2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13994/d0af2aa1-65db-d9a7-9245-c3bb907d0ac1.png "Kobito.6Jwjl2.png")


※ここで、 `Reopen in Container` と聞かれるけど、無視して次にいく

### Vue CLI のインストール定義

`Dockerfile` にコマンドを追記する。

```Dockerfile
RUN npm install -g @vue/cli
```


### 起動Portの指定

`devcontainer.json` に `yarn serve` したときに起動する 8080 ポートを追加する。"forwardPorts" 部分のコメントアウトを外して書く。

```devcontainer.json
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	"forwardPorts": [
		8080,	
	],

```

### Vue.js開発用 VS Code拡張の追加

同じく `devcontainer.json` に DevContainer 内で開発する際に必要なVS Code拡張を追記する。

```devcontainer.json
	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"dbaeumer.vscode-eslint",
		"ms-vscode.vscode-typescript-tslint-plugin",
		"octref.vetur",
		"dariofuzinato.vue-peek"
	],
```

今回は、以下の拡張機能を追加した。（他に Vue.js 開発にオススメの拡張があればコメントで教えてください :angel: ）

- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
- [Vue Peek](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek)

## Remote-Containers: Container を使ってVS Codeを開き直す

VS Code で、 `Cmd + Shift + P` から `Remote-Containers: Reopen in Container` を選択。

![Kobito.vKSkXt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13994/6f0927ed-bd3b-f5bd-a939-ce364c7fc12c.png "Kobito.vKSkXt.png")

Dockerコンテナにリモート接続して VS Code が起動する。元のディレクトリがアタッチされている。ターミナル上で `vue` コマンドも使える。素敵。

![Kobito.foJL20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13994/60fc6826-c7a8-d3ee-3435-283a3b51034c.png "Kobito.foJL20.png")

ここまでで開発環境の構築は完了。


## Vue.jsプロジェクトを作って動かす

実際に DevContainer 内で Vue.js プロジェクトを作って動かしてみる。VS Codeのターミナルにてコマンド実行。

```bash
# vue create .
```

ウィザードで確認されるオプションはお好みで。

ただし、TypeScriptを使う場合は、"Manually select features" を選択する。

https://jp.vuejs.org/v2/guide/typescript.html

Vue.js プロジェクトが生成されたら、ターミナルから起動。

```bash
# yarn serve
```

ブラウザで http://localhost:8080/ を開くと、ちゃんと起動できていることが確認できた！

![Kobito.c8BikD.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13994/59702b81-c278-a914-e458-a2e9b5890e17.png "Kobito.c8BikD.png")


めでたし、めでたし。