Help us understand the problem. What is going on with this article?

VSCode Remote Containerが良い

architecture.png
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でDockerfiledocker-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に記述することでほぼ何でも使えるようになります。

.devcontaner/devcontainer.json
"extensions": [
  "rebornix.ruby",
  "kaiwood.endwise",
  "sibiraj-s.vscode-scss-formatter"
]

シェルはローカルと同じように使える?

設定次第で使えます。.devcontaner/docker-compose.ymlを編集してマウントしましょう。

.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のサーバーにアクセスできない

.devcontainer/docker-compose.yml
#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後の処理が設定できるので、そこでやると良いと思います。

devcontainer/devcontainer.json
"postCreateCommand": "bundle install solargraph readapt; apt-get install -y zsh",

.devcontainerをgit管理から外せない

一度コミットしてしまうと、.gitignoreに記載するだけではgit管理から外すことはできません。以下のコマンドを叩いて解決。

$ git rm -r --cached .devcontainer

ローカルで使っていたCLI等が使えない

Dockerfileを編集してインストールしましょう。

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が好きなので

Dockerfile
RUN apt-get update -qq && apt-get install -y zsh #zshをインストール
.
.
RUN chsh -s /bin/zsh #デフォルトのシェルをzshに変更
.devcontainer/docker-compose.yml
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に貼り付けると良いです。

devcontainer/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

参考

d0ne1s
Qiitaの記事検索サービス【Qiigle】を運営。 フリーランスエンジニア。Ruby on Rails、Tailwind CSS、Heroku、Cloudflareが好き。少ない人数で高速で開発することに強い関心があります。ちょっとした情報はTwitterで🦈
https://twitter.com/d0ne1s
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away