ようへいの日々精進XP

よかろうもん

今更次郎ですが Visual Studio Code (VS Code) の Remote Containers 機能を使ってみた 〜 週末やったこと (1) 〜

tl;dr

週末に細々と自分が気になることをやってみたのでメモっておきます。

全て、以下の Github リポジトリに集約しています。

github.com

尚、以後、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 のバージョンは下図の通りです。

f:id:inokara:20210111162607p:plain

エディタの設定ですら

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 と共に起動することが出来ました。

f:id:inokara:20210111163137p:plain

キーボードショートカットのカスタマイズ

Remote Containers 機能は関係無いと思いますが、VS Code のキーボードショートカットについて。

出来るだけキーボードから手を離さずに使おうとすると、ショートカットのカスタマイズは必須ですよね...。試行錯誤している間にショートカットが使えるようになったり、急に使えなくなったりと、なかなか意図した通りに動いてくれません (VS Code が悪いわけではなく、自分の操作が不味いだけだと思います)

以上

コードと言っても、シェルスクリプトしか書きません (書けません) が、Remote Containers 機能を使うことで、コンテナのポータビリティの良さを活かした快適なコーディング環境が手に入りつつ、環境構築そのものを楽しむことが出来そうです。

参考

以下の資料を参考にさせて頂きました。

code.visualstudio.com

code.visualstudio.com

www.keisuke69.net