devcontainerを使って開発環境を作ってみた

by Kazuki Hara

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

開発環境構築で苦労することローカル環境に開発ツールをインストールする方法では、依存関係などにより開発環境をサクッと作れない。多数の開発ツールを入れるとローカル環境が汚れる。開発ツールの依存関係により再インストールが大変である。ローカル環境に開発環境を構築するには、多くの場合手動で手順を実施する必要がある。開発環境の共有は構築手順書に基づいたもので再現性が低い。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

devcontainer を使うと… ローカル環境に入れるのはDocker （on WSL or Docker Desktop ）と、Remote Container プラグインを入れたVisual Studio Code だけで良い。開発環境はDocker コンテナ上に構築されるため、ローカル環境が汚れない。 Docker コンテナなので開発環境の作り直しが簡単。事前ビルドされた開発環境コンテナイメージや、コンテナに機能を追加する feature が多数公開されており、少ない工数で開発環境コンテナを作ることができる。 Docker コンテナの構成情報をコードで記述するため、開発環境の共有が簡単。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 6

Slide 7

Slide 7 text

devcontainer とは Docker コンテナを使って開発環境を構築する仕組み。リポジトリのディレクトリ直下の .devcontainer/devcontainer.json に開発環境の構成情報を記述する。公開されているImage とFeature を使って開発環境を構築する。ただし、RHEL 系のコンテナイメージには非対応。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 7

Slide 8

Slide 8 text

Slide 9

Slide 9 text

構成ファイルの例 { "name": "react-calendar", "image": "mcr.microsoft.com/devcontainers/javascript-node:20-bullseye", "features": { "ghcr.io/devcontainers/features/aws-cli:1": {} } } image 事前ビルドのjavascript-node イメージを使う。 feature 開発環境構築時にaws-cli を自動でインストールする。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 9

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Feature 　( フィーチャー) 開発コンテナをビルドするときに、自動でインストールするツールのこと。フィーチャー自体はtarball でアーカイブであり、中に含まれるinstall.sh を実行することで追加のツールをインストールできる。 .devcontainer ディレクトリの中にそのリポジトリだけで使うことができる Feature を用意することも可能。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 11

Slide 12

Slide 12 text

まとめ再掲ローカル環境に入れるのはDocker （on WSL or Docker Desktop ）と、Remote Container プラグインを入れたVisual Studio Code だけで良い。開発環境はDocker コンテナ上に構築されるため、ローカル環境が汚れない。 Docker コンテナなので開発環境の作り直しが簡単。事前ビルドされた開発環境コンテナイメージや、コンテナに機能を追加する feature が多数公開されており、少ない工数で開発環境コンテナを作ることができる。 Docker コンテナの構成情報をコードで記述するため、開発環境の共有が簡単。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 12