# Remote Containerとは
Remote ContainerはVSCodeの拡張機能のひとつ。
Dockerの機能を活用して、コンテナ内で作業ができる。
これにより、以下のような恩恵を得られる。(一例)
- ローカルを汚さずに開発環境を整えられる。
- 環境構築をコード化できる。
- プロジェクトごとにVSCode拡張機能を使い分けられるようになる。
# クイックスタート
ためしにVuejsの開発環境をRemoteContainerで作ってみる。
以下にすべて書いてあるが、日本語でまとめてみる。
https://code.visualstudio.com/docs/remote/containers
# 前提
- Dockerがインストール済みであること。
- VSCodeの拡張機能「Remote Container」がインストール済みであること。
# Container を立ち上げる
空のフォルダを作成し、VSCodeで開く。
Ctrl+Shift+P
を押し、以下のコマンドを実行するRemote-Containers: Add Development Container Configuration Files
Show All Definitions...
をクリック。nodeと入力して
Node.js
を選択。バージョンを選択。
以下のようなメッセージが出たら
Reopen in Container
をクリック。
コンテナの準備が整うまでしばらく待つ。VSCodeの左下が以下のようになれば完了。
なお、コンテナの準備に時間がかかるのは初回のみで、次回からはもう少し早く起動できる。
これだけでNodejs導入済みのコンテナを立ち上げ、リモート接続することができた。
試しにnpmが動くか確認。
$ npm -v
6.14.8
# ディレクトリの内訳
ディレクトリの中身を見ると、以下のようになっている。
devcontainer.json**
**コンテナ内で使用するVSCodeの設定、拡張機能、使用するDockerfileなどを指定できる。
Dockerfile
dockerイメージをビルドする際の設定を書くファイル。
# Vue CLIが初回起動時にグローバルインストールされるようにする
Vueには便利な公式cliが存在するため、コンテナの初回起動時に自動でインストールされるようにしてみる。
Dockerfile
を開き、以下の行を追記する。RUN npm install -g @vue/cli
左下の
Dev Container: Node.js
を押下し、Rebuild...
を選択する。
ターミナルで以下のように入力し、Vue cliがグローバルインストールされている事を確認する。
$ vue -V @vue/cli 4.5.9
# Vue拡張機能が初回起動時にインストールされるようにする
VSCodeには、Vuejs開発に便利なVeturという拡張機能がある。
なのでこれをコンテナの初回起動時に自動インストールされるようにしてみる。
拡張機能ペインを開き、
Vetur
と検索する。Veturを右クリックし、
Add to devcontainer.json
をクリックする。devcontainer.json
を開き、VeturのIDが追加されている事を確認する。"extensions": [ "dbaeumer.vscode-eslint", "octref.vetur" ],
コンテナをリビルドする。
DEV CONTAINER... - インストール済み
のところにVeturが追加された。
# おわりに
今まではローカル環境に全ての拡張機能を入れていたので、「Vue開発してる時はJava拡張機能が邪魔で、Java開発する時にはVue拡張機能が邪魔」みたいな事になっていた。
これが解決出来るだけでもめちゃくちゃ有り難い。
チームでエディタの設定なども同時に共有出来るのもすごく捗りそうだなと思った。