tl;dr
週末に細々と自分が気になることをやってみたのでメモっておきます。
尚、以後、Visual Stdio Code は VS Code と表記したいと思います。
VS Code のモチベーション
自宅では Windows 環境を使いたいなーと思って、エディタやターミナル等の普段、最も向き合っている時間が長いツールについては統一しておきたい気持ちが高まって VS Code を業務用の macOS 端末にインストールしてみました。
色々とググって調べていたら、Remote Containers 機能は VS Code から Docker コンテナ内のファイルを直接操作出来るし、開発環境自体を Dockerfile もしくは docker-compose.yml と Dockerfile で記述して構築出来るので、ホストを汚さずに、言語毎だったりプロジェクト毎にエディタ環境を整えられるのでは... という思いが高まりました。
ということで、2019 年には、既にリリースされていた機能のようなので、今更次郎感は否めませんが、触ってみた感想等をメモしたいと思います。ちなみに、自分は VS Code を触るのは 4 年ぶり 2 回目です。
今回、利用している VS Code のバージョンは下図の通りです。
エディタの設定ですら
Remote Containers 機能を使ってみて驚いたのが、エディタの設定やエクステンションの一覧を JSON 設定ファイルに記述することが出来る点です。
開発する言語やプロジェクト単位でソースコードだけでなく、エディタの設定も管理することで、OS やホスト環境を問わず、VS Code と Docker さえあれば、エディタ環境を整えることが出来るというのは素晴らしいですよね。 (キーボードのショートカットについては、OS によって違ったりするので、完全に再現というわけにはいきませんが。。。)
$ tree . -a -I .git . ├── .circleci │ └── config.yml ├── .devcontainer │ └── devcontainer.json ├── docker │ └── Dockerfile ├── docker-compose.yml ├── README.md ├── src │ └── sample │ ├── lib │ │ └── sample.sh │ ├── .shellspec │ └── spec │ ├── sample_spec.sh │ └── spec_helper.sh └── .vscode └── settings.json
.devcontainer/devcontainer.json や .vscode/settings.json がそれにあたります。
.devcontainer/devcontainer.json は以下のような感じです。
{ "name": "shellspec workspace (debian:latest)", "dockerComposeFile": [ "../docker-compose.yml", ], "service": "base", "workspaceFolder": "/work", "extensions": [ "ms-ceintl.vscode-language-pack-ja", "timonwong.shellcheck", "vscodevim.vim", "mads-hartmann.bash-ide-vscode", "valmack.circleci-config-validator" ] }
sevice に指定されている base が、後述する docker-compose.yml 内の service 名を指定しています。
.vscode/settings.json は以下のような感じです。
{ "workbench.list.keyboardNavigation": "simple", "workbench.enableExperiments": false }
環境構築に docker-compose.yml を使う
今回、以下のような docker-compose.yml を書きました。
version: '3.7' services: base: build: context: ./docker dockerfile: Dockerfile tty: true volumes: - .:/work environment: AWS_ACCESS_KEY_ID: EXAMPLEKEY123 AWS_SECRET_ACCESS_KEY: EXAMPLESECRET123456 AWS_DEFAULT_REGION: us-east-1 AWS_REGION: us-east-1 AWS_ENDPOINT: http://minio:9000 AWS_DISABLE_SSL: 'true' PARAM_BUCKET: 'example-bucket' command: [ bash ] minio: image: minio/minio:latest environment: MINIO_ACCESS_KEY: EXAMPLEKEY123 MINIO_SECRET_KEY: EXAMPLESECRET123456 command: ['server', '/data']
minio という S3 API 互換のサービスを動かすことを想定いますが、特殊なことをしなくても作業用のコンテナ base と共に起動することが出来ました。
キーボードショートカットのカスタマイズ
Remote Containers 機能は関係無いと思いますが、VS Code のキーボードショートカットについて。
出来るだけキーボードから手を離さずに使おうとすると、ショートカットのカスタマイズは必須ですよね...。試行錯誤している間にショートカットが使えるようになったり、急に使えなくなったりと、なかなか意図した通りに動いてくれません (VS Code が悪いわけではなく、自分の操作が不味いだけだと思います)
以上
コードと言っても、シェルスクリプトしか書きません (書けません) が、Remote Containers 機能を使うことで、コンテナのポータビリティの良さを活かした快適なコーディング環境が手に入りつつ、環境構築そのものを楽しむことが出来そうです。
VSCode の Remote Containers 機能 (という呼び方で良いのかな？) を初めて触ってみたけど、コードを書く前の環境構築が楽しいみたいな感じを味わえてとても良かった。
— Yohei Kawahara（かっぱ） (@inokara) 2021年1月10日
参考
以下の資料を参考にさせて頂きました。
