Podmanコンテナ + Zed Editor で快適開発！

Zed Editorでコンテナ環境の開発できないか？と思い、調べていたところ、devPodで構築する方法に辿り着きました。今回はdockerよりも軽量のpodmanを使用しています。

今回のゴール

Dockerfile, docker-compose.yml, devcontainer.json の3つのファイルを使って、Podman コンテナ上に Zed Editor の開発環境を構築し、実際に Zed Editor からコンテナに接続して開発できるようにします。
devpod-container/
└── .devcontainer/
└── Dockerfile
└──docker-compose.yml
└──devcontainer.json

1. インストール

まずは、必要なツールをインストールしましょう。

Zed Editor: 公式サイトからダウンロードしてインストールしてください。
https://zed.dev/

Podman: Podman 公式サイトの手順に従ってインストールしてください。
https://podman.io/docs/installation

DevPod: DevPod 公式サイトからインストールしてください。DevPod は、Dev Containers 環境を簡単に作成・管理できる便利なツールです。
https://devpod.sh/

2.ファイルの準備
次に、開発環境の設定ファイルを用意します。devpod-container ディレクトリを作成し、その中に .devcontainer ディレクトリを作成、さらにその中に以下の3つのファイルを作成してください。
イメージは下記の通りです。

各ファイルの内容は下記の通りです。
Dockerfile

FROM ubuntu:latest

# パッケージリストを更新
RUN apt-get update

RUN apt-get upgrade -y

# 必要なパッケージをインストール
RUN apt-get install -y nano curl

CMD ["sleep", "infinity"]

CMD ["sleep", "infinity"]はコンテナを起動し続けるためのコマンドです。開発中はコンテナを起動したままにしておく必要があるため、sleep infinity で無限に待機させます。
docker-compose.yml

services:
  devpod-dev: #service名
    build: .  # Dockerfile があるディレクトリを指定 (ここでは docker-compose.yml と同じディレクトリ)
    container_name: devpod-container
    volumes:
      - .:/app
    working_dir: /app
    restart: unless-stopped

services: devpod-dev:: devpod-dev というサービス (コンテナ) を定義します。このサービス名 (devpod-dev) は後で devcontainer.json で指定します。

• build: .: Dockerfile を使ってイメージをビルドすることを指定します。. は Dockerfile が docker-compose.yml と同じディレクトリにあることを意味します。
• restart: unless-stopped: コンテナが予期せず停止した場合に、自動的に再起動するように設定します。

devcontainer.json
featureでsshサーバーのツールのインストールを指定します。

{
  "name": "devpod-dev",
  "dockerComposeFile": [
    "docker-compose.yml"
  ],
  "service": "devpod-dev", 
  "features": {
    "ghcr.io/devcontainers/features/sshd:1": {
      "version": "latest"
    }
  },
  "workspaceFolder": "/app"
}

• dockerComposeFile: ["docker-compose.yml"]: 使用する docker-compose.yml ファイルを指定します。

• service: "devpod-dev": docker-compose.yml で定義した devpod-dev サービスを、開発コンテナとして使用することを指定します。

• features: ...: Dev Containers の Features 機能を使って、コンテナに機能を追加します。ここでは sshd Feature を有効にしています。これにより、コンテナに SSH サーバーがインストールされ、Zed Editor から SSH 接続できるようになります。

• workspaceFolder: "/app": Zed Editor でコンテナに接続した際に、最初に開くワークスペースのパスを /app ディレクトリに設定します。docker-compose.yml でボリュームマウント設定をした /app ディレクトリを指定することで、ホスト側のファイルがワークスペースとして開かれます。

DevPodの設定
DevPod を使ってコンテナを立ち上げます。DevPod の設定画面を開き、以下の手順で設定してください。

Provider: 「Docker」を選択します。
Docker Path: Podman を使用する場合は、Docker Path に podman と入力します。これにより、DevPod が Docker の代わりに Podman を使用するようになります。
ProviderのDockerを選択し、DockerPathにpodmanを入力。

Workspaceを選択し、podmanの「create」をクリック。

フォルダーを選択し、ディレクトリを入力

Devcontainer Pathに自分がEnter Workspaceで選択したディレクトリの中にある「devontainer.json」の相対パスを入力する。
今回は「.devcontainer/devcontainer.json」を入力。

後はcreate workspaceをクリックしたら、コンテナが立ち上がり、remote接続した、zed editorが立ち上がります。

まとめ

これで、Podman コンテナ + Zed Editor の開発環境が完成しました！

DevPod を使うことで、Zed Editorでも簡単にコンテナ開発環境を構築・管理できます。今回の設定をベースに、ぜひ色々な開発環境を試してみてください。

おわりに

最後までお読みいただきありがとうございました！