Visual Studio Code Remote Development
VSCode Remote Containerは、VSCodeの拡張機能の1つです。
Dockerのコンテナ内でVSCodeを開き、開発することを可能にします。
使ってみてかなり良さげだった&当初はよく分からない部分も多かったので、2週間くらい使ってみて分かったことをまとめます。
##そもそもDockerで開発環境を作るメリット
- 開発環境が簡単に作って壊せる
- 今どういう環境で開発しているのかファイルで確認でき、バージョン管理も容易
- PCにRubyやらRubocopやら各種CLIやらをいれる必要がなくなる
- プロジェクトごとに言語等のバージョンを切り替える必要がなくなる
##VSCode Remote Containerを合わせて使うメリット
- 開発環境をDockerで作っていても、構文チェックや補完が効く
- ローカルで開発すると、補完をするためにローカルにrubocop等をインストールする必要がある
- 結局ローカルの環境に強く依存してしまい、Dockerのメリットの一部が享受できなかった問題を解決
-
rails generate ◯◯、bin/rspecなどのコマンドを叩く時、いちいちdocker-compose exec < appname> /bin/bashなどを叩く必要がなくなる - コンテナ内のシェルをカスタマイズして使いやすくできる
##導入方法
- VSCodeで
Dockerfileやdocker-compose.ymlがあるプロジェクトを開く - 拡張機能(Remote-Containers)をインストール
- VSCodeの画面の一番左下の部分にアイコンが出てくるので、クリック
-
Reopen in Containerをクリック -
From docker-compose.ymlをクリック -
webをクリック - プロジェクトのルートディレクトリに
.devcontaner/devcontainer.jsonと.devcontaner/docker-compose.ymlが作成される - もう一度左下のアイコンをクリック
-
Reopen in Containerをクリック - コンテナ内でVSCodeが開けば成功。初回はビルドがあるので時間がかかります。
##当初の疑問点とその答え
###VSCode Remote Developmentとの違いは？
VSCode Remote Developmentの機能を削り、Dockerコンテナに接続する関連の機能だけを残したのがRemote Container、という理解で合ってるはず。
(202010/26 追記)
以下、コメントにて教えていただきました。
Remote Development自体はカテゴリ的には拡張機能ではなく、拡張機能パックです。
Remote - WSLと、Remote - Containers、Remote - SSHを1まとまりで入れてくれるいわばセット商品のようなものですね。
###VSCodeの拡張機能は全部使える？
デフォルトでは使えるものと使えないものがあるようです。
devcontainer.jsonに記述することでほぼ何でも使えるようになります。
"extensions": [
"rebornix.ruby",
"kaiwood.endwise",
"sibiraj-s.vscode-scss-formatter"
]
###シェルはローカルと同じように使える？
設定次第で使えます。.devcontaner/docker-compose.ymlを編集してマウントしましょう。
volumes:
- .:/workspace:cached
- ~/.bashrc:/root/.bashrc #bashの設定
- ~/.ssh:/root/.ssh #sshキー
- ~/.gitconfig:/root/.gitconfig #gitの設定
- ~/.vimrc:/root/.vimrc #vimの設定
- ~/.vim/colors/iceberg.vim:/root/.vim/colors/iceberg.vim #vimのカラーテーマ
###Railsのサーバーにアクセスできない
#command: /bin/sh -c "while sleep 1000; do :; done"
command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0' ; while sleep 1000; do :; done"
###どこまでgitで管理する？
VSCode Remote Container用の設定は全て.devcontainer以下に保存し、.devcontainerディレクトリを丸ごとgit管理から外します。
コンテナ内で叩きたいコマンドが入っていない場合に限り、Dockerfileを編集する必要があるので、周りの人と相談して決めましょう。
※2020/5/22追記
.devcontainerはgitで管理することも普通にあるっぽいです。
東京都のコロナ対策サイトのGitHubで管理されてました。
https://github.com/tokyo-metropolitan-gov/covid19
※2020/12/19追記
コメントより以下の方法を教えていただきました。この方法だと、チームで相談せずに自分の使いたいシェル等が使えそうです。
devcontainer.json の postCreateCommand で初回build後の処理が設定できるので、そこでやると良いと思います。
"postCreateCommand": "bundle install solargraph readapt; apt-get install -y zsh",
###.devcontainerをgit管理から外せない
一度コミットしてしまうと、.gitignoreに記載するだけではgit管理から外すことはできません。以下のコマンドを叩いて解決。
$ git rm -r --cached .devcontainer
###ローカルで使っていたCLI等が使えない
Dockerfileを編集してインストールしましょう。
# Heroku CLI
RUN curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
# Vim、Zsh
RUN apt-get update -qq && apt-get install -y vim zsh
###コンテナ内でPreztoを使いたい
Preztoが好きなので
RUN apt-get update -qq && apt-get install -y zsh #zshをインストール
.
.
RUN chsh -s /bin/zsh #デフォルトのシェルをzshに変更
volumes:
- .:/workspace:cached
#zsh関連の設定ファイルをマウント
- ~/.zshrc:/root/.zshrc
- ~/.zlogin:/root/.zlogin
- ~/.zprofile:/root/.zprofile
- ~/.zenv:/root/.zenv
# prezto関連のファイルをマウント
- ~/.zpreztorc:/root/.zpreztorc
- ~/.zprezto:/root/.zprezto
*2020/12/19追記
以下のコメントをいただきました。
VS Codeで起動するshellは
設定項目のTerminal > Integrated > Shell : Linuxという項目があるので、それをdevcontainer.jsonに貼り付けると良いです。
"settings": {
"terminal.integrated.shell.linux": "/bin/zsh"
},
でもって antigenでもoh-my-zshでもprezto でもdotfileはgitリポジトリで管理して、vs code でpullする設定にすると良いです。
この記事が参考になると思います。
https://banatech.net/blog/view/33
###pryでデバッグしたい
ローカルからアタッチする。
処理をとめたい箇所にbinding.pryを挿入後
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
3bc533887532 sample_web "/bin/sh -c 'rm -f t…" 2 weeks ago Up 18 seconds 0.0.0.0:3000->3000/tcp sample_web_1
$ docker attach sample_web_1
[1] pry(#<HogesController>)>
docker-compose上のRailsのデバッグを行う - My External Storage
##参考