Zenn
🚢

macの開発環境を綺麗に構築する

2024/03/24に公開
Docker
docker-compose
dood
devcontainer
tech

やりたいこと

新しくmacbookを買ったので、PCにnode.jsやnpmなどの開発ツールを直接インストールせずに開発環境を構築したい。

Dockerを使っていないプロジェクトがあると結局ローカルにインストールすることになるのをなんとかする。

アプローチ

  • Dockerで開発用のコンテナを立て、そこにnode.jsとかnpmをインストール
  • volumeマウントで全てのプロジェクトリポジトリをコンテナの中で操作できるようにする
  • 開発用コンテナの中からプロジェクトのコンテナを操作できるようにする
  • DevContainersを使ってコンテナにインストールされているコンパイラなどをVSCodeが認識できるようにする

成果物

https://github.com/kanaru-ssk/dev

dev/
├── .devcontainer/
│   └── devcontainer.json  # コンテナ内のVSCodeの設定、拡張機能を管理
├── projects/              # プロジェクトをこの中に作る、又はcloneする
│   ├── proj-1/
│   └── proj-2/
├── compose.yml            # volumeマウントをうまいことやる
└── Dockerfile             # 開発に必要なツールをインストール

使い方はDocker DesktopとVSCodeをインストール。VSCodeにDev Containersをインストール。コンテナ起動して開発準備完了です。

他にインストール必要なものがあればDockerfileに追加。拡張機能はdevcontainer.jsonに追加していきます。

詳細はREADMEをご覧ください。

解説

devcontainer.json

参考 : https://containers.dev/implementors/json_reference/

開発コンテナ内で有効なVSCodeの設定と拡張機能をこのファイルに記述。

compose.ymlとDockerfileを消してこのファイルのみに統合することも可能ですが、DevContainersよりDockerの方が動作の信頼性が高いのと、書き慣れているという理由で分けました。

{
  "name": "dev",
  "dockerComposeFile": "../compose.yml",
  "service": "dood",
  "workspaceFolder": "${localWorkspaceFolder}",
  "customizations": {
    "vscode": {
      // vscodeの設定
      "settings": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        ...
      },
      // vscodeの拡張機能
      "extensions": [
        "esbenp.prettier-vscode",
        ...
      ]
    }
  }
}

compose.yml

services:
  dood:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        - HOST_PWD=$PWD
    tty: true
    network_mode: host  # ポイント　1
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock  # ポイント2
      - .:$PWD:delegated  # ポイント3

ポイント1. network_mode: hostで、コンテナ内で起動したサーバーは自動的にホストPCでlocalhost アクセス可能

ポイント2. docker.sockを共有することでhostのdockerデーモンに開発コンテナからアクセスできる。
プロジェクトにDockerを使っているものがあっても、開発コンテナの中だけで完結可能。Dood (Docker outside of Docker)という手法。

参考 : https://esakat.github.io/esakat-blog/posts/docker-in-docker/

ポイント3. DooDでvolumeマウントを使う関係で、ホスト内のファイルパスと開発コンテナ内のファイルパスを同じにする必要があったので　.:$PWDを設定。

:delegatedを設定することで負荷を軽減

参考 : https://docs.docker.jp/docker-for-mac/osxfs-caching.html

Dockerfile

FROM alpine

# ポイント1
ARG HOST_PWD
WORKDIR $HOST_PWD

RUN apk update

# ポイント2
# install basic packages
RUN apk add\
  docker-cli\
  docker-cli-compose\
  bash\
  curl\
  nodejs\
  npm\
  git

# set up git
RUN git config --global user.name kanaru-ssk
RUN git config --global user.email kanaru.ssk@gmail.com

ポイント1. compose.ymlで以下の設定をしたのでWORKDIRを引数で受け取り

ポイント3. DooDでvolumeマウントを使う関係で、ホスト内のファイルパスと開発コンテナ内のファイルパスを同じにする必要があったので　.:$PWDを設定。

ポイント2. docker-cliとdocker-cli-composeをインストールすることでdocker clientのみをインストール。

以上です。Docker勉強中なので、問題点や改善点などあればコメント頂けるとありがたいです。

Discussion