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

Transcript

1. devcontainer を使って開発環境を作ってみた インフラエンジニア 原 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 1
2. 自己紹介 原 一貴（ハラ カズキ） 2022/10 入社のインフラエンジニア はまっていること ぼっちざろっく 一次創作同人誌 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 2
3. 早速ですが… 開発環境の構築で苦労してませんか？ devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 3
4. 開発環境構築で苦労すること ローカル環境に開発ツールをインストールする方法では、依存関係などにより開発環 境をサクッと作れない。 多数の開発ツールを入れるとローカル環境が汚れる。 開発ツールの依存関係により再インストールが大変である。 ローカル環境に開発環境を構築するには、多くの場合手動で手順を実施する必要 がある。 開発環境の共有は構築手順書に基づいたもので再現性が低い。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 4
5. じゃあどんな技術を使えば開発環境を簡単に作れる？ 開発環境の構築にdevcontainer はとても便利である。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 5
6. devcontainer を使うと… ローカル環境に入れるのはDocker （on WSL or Docker Desktop ）と、Remote Container プラグインを入れたVisual Studio Code だけで良い。 開発環境はDocker コンテナ上に構築されるため、ローカル環境が汚れない。 Docker コンテナなので開発環境の作り直しが簡単。 事前ビルドされた開発環境コンテナイメージや、コンテナに機能を追加する feature が多数公開されており、少ない工数で開発環境コンテナを作ることができ る。 Docker コンテナの構成情報をコードで記述するため、開発環境の共有が簡単。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 6
7. devcontainer とは Docker コンテナを使って開発環境を構築する仕組み。 リポジトリのディレクトリ直下の .devcontainer/devcontainer.json に開発環境 の構成情報を記述する。 公開されているImage とFeature を使って開発環境を構築する。 ただし、RHEL 系のコンテナイメージには非対応。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 7
8. devcontainer のアーキテクチャ 画像出典:https://code.visualstudio.com/docs/devcontainers/containers devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 8
9. 構成ファイルの例 { "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
10. .devcontainer のキーワード ディレクティブ 値 image ベースイメージに使うコンテナイメージ features コンテナイメージの拡張に使うフィーチャー devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 10
11. Feature 　( フィーチャー) 開発コンテナをビルドするときに、自動でインストールするツールのこと。 フィーチャー自体はtarball でアーカイブであり、中に含まれるinstall.sh を実行す ることで追加のツールをインストールできる。 .devcontainer ディレクトリの中にそのリポジトリだけで使うことができる Feature を用意することも可能。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 11
12. まとめ 再掲 ローカル環境に入れるのはDocker （on WSL or Docker Desktop ）と、Remote Container プラグインを入れたVisual Studio Code だけで良い。 開発環境はDocker コンテナ上に構築されるため、ローカル環境が汚れない。 Docker コンテナなので開発環境の作り直しが簡単。 事前ビルドされた開発環境コンテナイメージや、コンテナに機能を追加する feature が多数公開されており、少ない工数で開発環境コンテナを作ることができ る。 Docker コンテナの構成情報をコードで記述するため、開発環境の共有が簡単。 devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 12
13. ありがとうございました devcontainer を使って開発環境を作ってみた © 2024 Kazuki Hara 13