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

![スクリーンショット 2025-01-15 12.33.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/2ca7d5cd-d86b-beca-5d24-278e63d9b884.png)

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

## ホスト環境
- Ubuntu 20.04

## 手順
### 1. Podman・Podman Composeインストール
1. 下記のコマンドを実行
    ```bash
    $ . /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
    ```
    - ホスト環境が異なる場合、[こちら](https://podman.io/docs/installation)を参照
1. podmanコマンドの動作確認
    ```bash
    $ 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:...`のようなエラーが出る場合は[こちら](https://qiita.com/akagi_hayato/items/4c6a160365d78e468bfb)を参照
1. podman-composeをインストール
    ```bash
    $ sudo apt install python3-pip
    $ sudo pip3 install podman-compose
    ```
1. `podman-compose`コマンドの動作確認
    ```bash
    $ podman-compose version
    podman-compose version 1.3.0
    podman version 3.4.2
    ```
### 2. Podman Desktopインストール
- ホスト環境が異なる場合[こちら](https://podman-desktop.io/docs/installation)を参照
    - Windowsの場合: [こちら](https://podman-desktop.io/downloads/windows)でインストーラをダウンロード
    - Macの場合: [こちら](https://podman-desktop.io/downloads/macos)からインストーラをダウンロード
1. TerminalでFlatpakのインストール
    ```bash
    $ sudo add-apt-repository ppa:flatpak/stable
    $ sudo apt update
    $ sudo apt install flatpak
    $ sudo apt install gnome-software-plugin-flatpak
    ```
1. Flatpakリポジトリの追加
    ```bash
    $ flatpak remote-add --if-not-exists --user flathub https://flathub.org/repo/flathub.flatpakrepo
    ```
1. Ubuntuをログアウトし、ログイン
1. Podman Desktopをインストール
    ```bash
    $ flatpak install --user flathub io.podman_desktop.PodmanDesktop
    ```
    - 2回入力を求められるが、どちらも`y`を入力で良い
1. Podman Desktopを起動
    ```bash
    $ flatpak run io.podman_desktop.PodmanDesktop
    ```
    
### 3. Podman Desktop初回起動
1. 初回起動後、表示されるサービス（Compose・kubectl CLI・Podman）に全てチェックした状態でStart onboardingをクリック
1. その後、全てNextをクリック

### 4. VSCodeインストール
1. [こちら](https://code.visualstudio.com/download)でインストーラをダウンロードする
    - Ubuntuの場合は、.debをダウンロード（以下、`~/Downloads`に`code_1.xxxxx.deb`をダウンロードした場合を想定）
    - ホスト環境がWindowsやMacの場合も同じ様にダウンロードし、インストーラを起動する
1. Terminalで下記のコマンドを実行し、VSCodeをインストール
    ```bash
    $ sudo apt install ~/Downloads/code_1.xxxxx.deb
    ```
### 5. Devcontainer追加・設定
1. VSCodeを開いて、拡張機能ボタンをクリック
![スクリーンショット 2025-01-14 22.15.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/76b9613d-825b-593c-c972-0f0eb35210bf.png)

1. EXTENSIONS: MARKETPLACEの検索バーに「devcontainer」と入力し、MicrosoftのDev Containersを選択、Installをクリック
![スクリーンショット 2025-01-14 22.18.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/70c30572-92cc-7745-9dec-533bbec9a244.png)

1. Dev Containersの歯車マークをクリックし、Settingsを選択
![スクリーンショット 2025-01-15 8.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/32ca9c9c-9955-440d-45b1-4ff9a0cd3526.png)

1. 検索バーに`@ext:ms-vscode-remote.remote-containers DockerPath`と入力
1. Dev>Containers: **Docker Path**の値を`docker`から`podman`に変更
![スクリーンショット 2025-01-15 8.45.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/91f7babe-3c14-0011-3f94-b8aa9503b253.png)

### 6. 動作確認
1. テストのフォルダを作成し、VSCodeのEXPLORERを開く
    - 以降、`~/test`で作業することを想定
![スクリーンショット 2025-01-15 8.49.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/7d9ba6ac-958b-351b-5d1f-be8cdf1ff6b4.png)
1. Open Folderをクリックし、6.1.で作ったフォルダを選択
1. 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をクリック
1. `Dockerfile`を作成し下記の内容を記述
    ```Dockerfile
    FROM python:3.12
    ```
    - コンテナランタイムとしてDockerを使っていないが、`Dockerfile`というファイル名にしておくと次のプロセスが楽
1. VSCodeウィンドウ下部ステータスバーの左端 >< ボタンをクリック
![スクリーンショット 2025-01-15 9.42.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/ca08f852-1773-d093-6b4d-8bf7bbe0482c.png)
1. ウィンドウ上部に現れる、Add Dev Container Configuration Files...を選択
![スクリーンショット 2025-01-15 9.43.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/70eb1735-77a2-cdd9-3c2d-ab5297c5042f.png)

1. Add configuration to workspaceを選択
1. From 'Dockerfile'を選択
![スクリーンショット 2025-01-15 11.48.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/ff4a634a-5350-2b7a-3493-6cb2cb6a0f6a.png)

1. 以降、何もチェックせずにOKをクリック 
![スクリーンショット 2025-01-15 9.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/e5fbdf16-df91-a45f-5218-5310f277791d.png)
![スクリーンショット 2025-01-15 9.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982238/1339efc9-fa5a-44c8-f617-767c2b2d23b4.png)

1. `.devcontainer`フォルダと`devcontainer.json`が生成されることを確認
    - `devcontainer.json`の内容は下記
        ```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"`に変更しても良い
1. VSCodeウィンドウ下部ステータスバーの左端 >< ボタンをクリック
1. Reopen in Containerを選択
1. VSCodeウィンドウ内のTERMINALペインに、`root@xxxxx:/workspaces/test#`と表示されコンテナがビルドされたことを確認

## 参考
https://qiita.com/akagi_hayato/items/4c6a160365d78e468bfb
- https://www.redhat.com/ja/topics/containers/what-is-podman
-