VSCode+Devcontainer+Podman（コンテナランタイム）での開発環境構築

はじめに

• VSCodeとその拡張機能Devcontainerで手軽にコンテナを用いた開発環境を手に入れたい
• コンテナランタイムは下記の理由でPodmanを採用したい
  • Docker Desktopの無償利用にかなり制限がある（詳細）
  • podmanはdocker互換のCLIを持つ など
• GUIでコンテナの状況を見たい場合を考慮してPodman Desktopもインストールしておく

ホスト環境

• Ubuntu 20.04

手順

1. Podman・Podman Composeインストール

1. 下記のコマンドを実行

   $ . /etc/os-release
   $ echo "deb http://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/xUbuntu_${VERSION_ID}/ /" | sudo tee /etc/apt/sources.list.d/devel:kubic:libcontainers:stable.list
   $ wget -nv https://download.opensuse.org/repositories/devel:kubic:libcontainers:stable/xUbuntu_${VERSION_ID}/Release.key -O- | sudo apt-key add -
   $ sudo apt update -y
   $ sudo apt install -y podman
   

   • ホスト環境が異なる場合、こちらを参照
2. podmanコマンドの動作確認

   $ podman version
   Version:      3.4.2
   API Version:  3.4.2
   Go Version:   go1.15.2
   Built:        Thu Jan  1 09:00:00 1970
   OS/Arch:      linux/amd64
   

   • ERRO[0000] cannot find UID/GID for user $USER:...のようなエラーが出る場合はこちらを参照
3. podman-composeをインストール

   $ sudo apt install python3-pip
   $ sudo pip3 install podman-compose
   

4. podman-composeコマンドの動作確認

   $ podman-compose version
   podman-compose version 1.3.0
   podman version 3.4.2
   

2. Podman Desktopインストール

• ホスト環境が異なる場合こちらを参照
  • Windowsの場合: こちらでインストーラをダウンロード
  • Macの場合: こちらからインストーラをダウンロード

1. TerminalでFlatpakのインストール

   $ sudo add-apt-repository ppa:flatpak/stable
   $ sudo apt update
   $ sudo apt install flatpak
   $ sudo apt install gnome-software-plugin-flatpak
   

2. Flatpakリポジトリの追加

   $ flatpak remote-add --if-not-exists --user flathub https://flathub.org/repo/flathub.flatpakrepo
   

3. Ubuntuをログアウトし、ログイン
4. Podman Desktopをインストール

   $ flatpak install --user flathub io.podman_desktop.PodmanDesktop
   

   • 2回入力を求められるが、どちらもyを入力で良い
5. Podman Desktopを起動

   $ flatpak run io.podman_desktop.PodmanDesktop
   

3. Podman Desktop初回起動

1. 初回起動後、表示されるサービス（Compose・kubectl CLI・Podman）に全てチェックした状態でStart onboardingをクリック
2. その後、全てNextをクリック

4. VSCodeインストール

1. こちらでインストーラをダウンロードする
   • Ubuntuの場合は、.debをダウンロード（以下、~/Downloadsにcode_1.xxxxx.debをダウンロードした場合を想定）
   • ホスト環境がWindowsやMacの場合も同じ様にダウンロードし、インストーラを起動する
2. Terminalで下記のコマンドを実行し、VSCodeをインストール

   $ sudo apt install ~/Downloads/code_1.xxxxx.deb
   

5. Devcontainer追加・設定

1. VSCodeを開いて、拡張機能ボタンをクリック
   

2. EXTENSIONS: MARKETPLACEの検索バーに「devcontainer」と入力し、MicrosoftのDev Containersを選択、Installをクリック
   

3. Dev Containersの歯車マークをクリックし、Settingsを選択
   

4. 検索バーに@ext:ms-vscode-remote.remote-containers DockerPathと入力

5. Dev>Containers: Docker Pathの値をdockerからpodmanに変更
   

6. 動作確認

1. テストのフォルダを作成し、VSCodeのEXPLORERを開く

   • 以降、~/testで作業することを想定
     

2. Open Folderをクリックし、6.1.で作ったフォルダを選択

3. Do you trust the authors of the files in this folder?と聞かれたらTrust the authors of all files in the parent folderにチェックを入れて、Yes, I trust the authorsをクリック

4. Dockerfileを作成し下記の内容を記述

   FROM python:3.12
   

   • コンテナランタイムとしてDockerを使っていないが、Dockerfileというファイル名にしておくと次のプロセスが楽

5. VSCodeウィンドウ下部ステータスバーの左端 >< ボタンをクリック
   

6. ウィンドウ上部に現れる、Add Dev Container Configuration Files...を選択
   

7. Add configuration to workspaceを選択

8. From 'Dockerfile'を選択
   

9. 以降、何もチェックせずにOKをクリック
   
   

10. .devcontainerフォルダとdevcontainer.jsonが生成されることを確認

    • devcontainer.jsonの内容は下記

      // For format details, see https://aka.ms/devcontainer.json. For config options, see the
      // README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-dockerfile
      {
      	"name": "Existing Dockerfile",
      	"build": {
      		// Sets the run context to one level up instead of the .devcontainer folder.
      		"context": "..",
      		// Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
      		"dockerfile": "../Dockerfile"
      	}
      
      	// Features to add to the dev container. More info: https://containers.dev/features.
      	// "features": {},
      
      	// Use 'forwardPorts' to make a list of ports inside the container available locally.
      	// "forwardPorts": [],
      
      	// Uncomment the next line to run commands after the container is created.
      	// "postCreateCommand": "cat /etc/os-release",
      
      	// Configure tool-specific properties.
      	// "customizations": {},
      
      	// Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
      	// "remoteUser": "devcontainer"
      }
      
      

    • Dockerを使ってないので6.4.で作成したDockerfileというファイル名が気持ち悪い場合、ファイル名をContainerfileに変更、devcontainer.jsonの"dockerfile": "../Dockerfile"を"dockerfile": "../Containerfile"に変更しても良い

11. VSCodeウィンドウ下部ステータスバーの左端 >< ボタンをクリック

12. Reopen in Containerを選択

13. VSCodeウィンドウ内のTERMINALペインに、root@xxxxx:/workspaces/test#と表示されコンテナがビルドされたことを確認

参考

• https://www.redhat.com/ja/topics/containers/what-is-podman