Dockerコンテナ上のVue.jsの開発環境を、Visual Studio Codeでリモート接続して開発してみる

# はじめに
タイトルどおり、VSCodeで出来ることは極力VSCodeでやっていく方針
気づいた点とかあればサイレント更新するかも

# 環境
## Windows 10 Pro
OS XやLinuxでも別に問題ないと思います。

# インストール
## Visual Studio Code
拡張機能もインストールします。

- Docker (識別子 : ms-azuretools.vscode-docker)
- Remote - Containers (識別子 : ms-vscode-remote.remote-containers)

## Docker for Windows
OSに合わせたDockerでドウゾ

# Dockerイメージ作成
## ファイルの準備
Dockerfileを作成します。

```dockerfile:Dockerfile
FROM node:lts-alpine

WORKDIR /usr/src/app
COPY vue.config.js .

RUN npm install -g npm @vue/cli

EXPOSE 8080

CMD ["/bin/sh"]
```

開発サーバーの起動ポートを固定するために、vue.config.jsも作成します。

```javascript:vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};
```

作成したDockerfileとvue.config.jsは同じフォルダへ置いておきます。

## Dockerイメージ作成
PowerShell等でコマンドを実行します。

```shell:
> cd 'Dockerfile等を配置したフォルダ'
> docker build -t vuejs_dev .
```
vuejs_dev : Dockerイメージ名

正しく作成されると、VSCodeのDockerのIMAGEにコンテナ(node,vuejs_dev)が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/0b17afb5-fa8c-2998-27d8-36777b1f7a8f.png)

# Dockerコンテナ作成(と開始)

PowerShell等でコマンドを実行します。

```shell:
> docker run -it -d -p 8081:8080 --name vuejs_dev_test0001 vuejs_dev
```

vuejs_dev : Dockerイメージ名
vuejs_dev_test0001 : Dockerコンテナ名

正しく作成されると、VSCodeのDockerのCONTAINERSにコンテナ(vuejs_dev_test0001)が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/98094599-30e7-05f2-8d30-ec69220a7e0a.png)

# VSCodeでリモート接続

VSCodeのDockerのCONTAINERSのイメージ(vuejs_dev_test0001)のコンテキストメニューから
[Attach Visual Studio Code]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/3d114fa6-36d1-376a-0002-ab18e6cb61d1.png)

VSCodeのリモート エクスプローラーから開くことも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/36778652-ddc5-01fb-02d4-692f21f220f0.png)

リモート接続が成功した場合、左下に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/e0deb4b7-e20d-7a45-4c31-4637a3210d0e.png)

VSCodeのエクスプローラーからフォルダーを開くを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/789e1ce4-68d6-3f88-066b-0078df11e5d5.png)

コンテナ内のパスを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/b9e76aa8-15dd-02cf-bec9-e52e65ca644e.png)

正しいパスを指定していれば、ファイルが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/b815e8ea-1728-7d89-b14a-1cb7619c678e.png)

#Vue.jsのプロジェクト作成

リモート接続したVSCodeのターミナルで、コマンドを実行します。

```shell:
/usr/src/app # vue create .
```
選択肢は任意で良いですが、今回はパッケージマネージャーはNPMを選択しています。

プロジェクト作成時に追加されたファイルもVSCodeのエクスプローラーから確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/eec5d9f8-abe4-c63a-52b6-08916beb7ba4.png)

# 実装
お好きにドウゾ

# 実行確認

リモート接続したVSCodeのターミナルで、コマンドを実行します。

```shell
/usr/src/app # npm run serve
```

ブラウザで127.0.0.1:8081へアクセスし、実行していることを確認できました。

![localhost_9050_ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/49096d05-3502-c647-b81b-02931a5eb667.png)

# その他
## コンテナ停止
VSCodeのDockerのCONTAINERSのイメージ(vuejs_dev_test0001)のコンテキストメニューから
[Stop]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/183c0302-8b0e-086b-024a-d4a6c79ec10b.png)

コンテナが停止されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/db3241fa-cd6c-a9f9-8b4f-dbb0bd3e4919.png)

## コンテナ開始(既にコンテナがある場合)
VSCodeのDockerのCONTAINERSのコンテナ(vuejs_dev_test0001)のコンテキストメニューから
[Start]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/4b6fe46e-19f6-2fee-69fd-a7c9cff53142.png)

コンテナが開始されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/26d86ed6-97f4-56b2-cc1f-7689663b9f73.png)

# 感想
思ってたよりVSCodeの拡張機能がちゃんとしていた。
Remote - Containersはプレビュー版(2020/4/24現在)だったので、早く正式リリースして欲しい。