VS Code から Podman コンテナ@Mac＆Windows にDevContainerを使って接続＆開発

VS Code から Docker コンテナに接続して、接続したコンテナの中でコード開発をする方法は既に[Hidekazu Karino](https://zenn.dev/hkdord)さんの[VSCode Remote Containers 事始め](https://zenn.dev/hkdord/articles/remote-containers) といった記事、[virtualtech](https://devops-blog.virtualtech.jp/about)さんの[Docker DesktopとVS Codeでコンテナを使ったローカル環境でのアプリ開発](https://devops-blog.virtualtech.jp/entry/20220420/1650422689)といった記事にて巨匠達が紹介してくださっています。
が、しかし上記の記事ではDockerをコンテナエンジンとして使っています。コンテナエンジンは Docker だけではなく[Podman](https://podman.io/)もあります。今回はそんな Podman と VSCode を使ってコンテナへ接続＆開発を行う方法について記載します。
※ VS Code から Docker コンテナに接続する方法はネット記事で多く出されておりますが、VS Code から Podman コンテナに接続する方法については希少です。

# 環境
* OS : macOS Monterey (MacBook Pro), Windows 10 Pro (22H2)
** Mac/Windows で若干操作が異なりますがほぼ同じ事を実施できます。
* VS Code : 1.73.1 (Universal)
* Podman : Client 4.3.1/ Server 4.3.0
* Podman Desktop : バージョン0.9.1 (0.9.1)

# 1. Podman インストール
今回利用する podman としてGUI版の [Podman Desktop](https://podman-desktop.io/)を使います。Podman Desktop は [Docker Desktop](https://www.docker.com/products/docker-desktop/)のようにGUI上でコンテナ、イメージ、ポッド、ボリューム管理を容易に行えて podman の仮想環境も容易に管理できます。

Macの場合インストールは以下のコマンドで簡単に実行できます。
```
$ brew install podman-desktop
```
Windwosの場合[Podman Desktop](https://podman-desktop.io/) のサイトよりダウンロードできるインストーラーを実行します。

* Podman の管理画面
以下がPodman Desktop の管理画面です。
  * ダッシュボード
![スクリーンショット 2022-12-02 11.20.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/856aeaae-37b7-5336-c36d-e5359b374884.png)

  * コンテナ管理
![スクリーンショット 2022-12-02 11.26.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/a1c2b441-9f41-b596-3f36-70f9a61b7968.png)

  * イメージ管理
![スクリーンショット 2022-12-02 11.26.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/0a200799-b49f-01df-ecf5-7f0b5d4ba6a2.png)

  * ポッド管理
![スクリーンショット 2022-12-02 11.26.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/ed46a5b4-62b9-1433-d010-b9fbb9ed3391.png)

  * ボリューム管理
![スクリーンショット 2022-12-02 11.27.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/ec0cc6f0-f2d0-9c78-6866-d15d483c8627.png)

  * 仮想環境管理
![スクリーンショット 2022-12-02 11.21.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/d134444f-143e-d865-0413-bdd19b40e3b5.png)


# 2. VS Code 設定
VS Code のインストールについては色々なサイトで紹介されていますので、ここでは割愛致し、Podman コンテナに接続するための設定について記載します。
ここで実施することは ①VS Code に　Docker 拡張を追加し、②「Dev 〉 Docker:Docker Path」を修正する。です。
## 2.1. VS Code にDocker 拡張追加
以下の図に示すように「Docker]拡張を VS Code に追加します。
![スクリーンショット 2022-12-02 11.42.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/1758b9d5-ccef-1149-0dff-5872634b1861.png)

## 2.2. 「Dev 〉 Docker:Docker Path」修正
2.1で追加した「Docker」拡張 に関して「拡張機能の設定」から Podman のコマンドパスを指定します。
**①** 「Docekr」拡張の右にある歯車アイコンをクリックし、メニューの中から「拡張機能の設定」を選択
**②** 上記検索ウィンドウに「DockerPath」を入力
**③** 「Dev 〉 Docker:Docker Path」を下図のように「docker」→「podman」
![スクリーンショット 2022-12-02 13.04.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/f928f5e6-06d6-5296-6199-0d61eb7a8b09.png)

# 3.  VS Code から Podman コンテナ実行
デモとして python のウェブアプリを構築します。

## 3.1. ディレクトリ、ファイル作成
以下の構成を作成します。
```
demo4podman
    ┣ app
    ┃  ┗ index.py 
    ┗ Dockerfile
```

Dockerfile の内容
```
FROM python:3.9.10

WORKDIR /app

ENV PORT 80

COPY ./app /app

RUN pip install Flask

CMD ["python", "index.py"]
```
    
index.py の内容
```
from flask import Flask
app = Flask(__name__)

@app.route("/")
def index():
  return "<h1>Hello, World!</h1>"

if __name__ == "__main__":
  app.run(host="0.0.0.0", port=80, debug=True)
```

## 3.2. イメージ作成とコンテナ実行
以下のコマンドでDockerfileからイメージを作成します。
ここでは VSCode の中で実施しますが、コマンドは Mac のターミナルでも良いです。
まず、VS Code 内でターミナルを開いてください。
![スクリーンショット 2022-12-02 13.25.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/f34d8827-6ce6-7a6b-b2e0-97718b3fe11b.png)

** Windowsでターミナルの設定をWSL側で開くようにしている(プロンプトが「***@DESKTOP-*****」)場合、Powershell を別窓で開いてください。

* コンテナビルド
![スクリーンショット 2022-12-02 13.30.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/63c32105-b0f2-1879-0af5-f44e85d80e43.png)
実行したコマンド
```
podman build -f ./Dockerfile -t flaskapp:latest .
```
Podman Desktop 上の表示で新しいイメージ(localhost/flaskapp)が作成されたことが確認できます。
![スクリーンショット 2022-12-02 13.32.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/d6d10f92-1197-c815-f3fa-45f3fcfa3788.png)

* ビルドされたイメージからコンテナ起動
![スクリーンショット 2022-12-02 13.34.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/cd187f64-7aaa-16b5-4d2e-34f90cbb9f81.png)

イメージからコンテナを実行するコマンド
```
podman run --name vscodeTestFlask -t -v ./app:/app -p 9000:80 -d localhost/flaskapp
```
上記コマンドでは、


Podman Desktop 上の表示で新しいコンテナ(vscodeTestFlask)が実行されている状況を確認できます。
![スクリーンショット 2022-12-02 13.34.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/01403a16-5fe5-2ed2-878e-5544bb850bf8.png)

* コンテナ実行確認
ブラウザを開き、「localhost:9000」にアクセスしてください。以下のように「Hello World!」が表示されます。
![スクリーンショット 2022-12-02 14.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/05ee7758-ce4a-cb65-24cc-e8bad4c665fd.png)


# 4. 新規アプリ作成
ここまではコンテナに接続せずに python アプリを実行しただけですが、次からローカルマシンとコンテナの共有フォルダを使って新規アプリを作っていきます。

## 4.1. ローカルマシンで新規アプリのコードを生成
```
demo4podman
    ┣ app <- ローカルマシンとコンテナと共有するフォルダ
    ┃  ┣ index.py 
    ┃  ┗ newfile.py <- 新規コード
    ┗ Dockerfile
```

newfile.py の内容
```
import os 

from flask import Flask

port = int(os.environ['PORT'])
app = Flask(__name__)

@app.route('/')
def index():
   return '<h1>Hello World Cup!</h1>'

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=81)
```

## 4.2. VSCodeから実行中のコンテナへ接続
以下の順でコンテナに接続します。
### 1.attach to container
図にあるように VSCode の左にある「リモートエクスプローラー」をクリックし、起動しているコンテナを表示する
→ 対象となるコンテナを選択
→「Attach to Container」をクリック
![スクリーンショット 2022-12-02 13.36.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/a1ecf414-8e78-0599-601d-d8d4045ea05c.png)
すると新しく VS Code ウィンドウが開きます。
![スクリーンショット 2022-12-02 13.37.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/f17c9877-0f8f-6bcf-a59a-0e50881878a3.png)

### 2.devcontainers
新たに開いた VS Code で「Dev Containers」-[ターミナルの分離]をクリックすると、コンテナ環境に接続することができます。
![コンテナへ接続.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/a9c82b0f-5f40-fa80-07a5-5d9ed8bd64f4.jpeg)

## 4.3. 新規アプリ作成
最後に、新しいファイルをローカルマシンの方で作成しコンテナ環境で実行します。
**①** コンテナ環境で新規生成ファイルをpythonにて実行
**②** 実行を確認するため「ブラウザで開く」をクリック


![スクリーンショット 2022-12-02 15.34.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/be9e6ca3-8e09-4493-8304-26131ce2fc18.png)

コマンド
```
python newfile.py 
```
* 実行確認
![スクリーンショット 2022-12-11 1.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/5d3152e3-9b1a-9117-1cbc-2a1fab76ba31.png)


## 4.4. アプリ修正

* newfile.py はローカルマシンとコンテナ間で共有されているので、ローカルマシンのテキストエディタを使って変更＆保存
```
import os 

from flask import Flask

port = int(os.environ['PORT'])
app = Flask(__name__)

@app.route('/')
def index():
   return '<h1>Hello World Cup!</h1><br><h2>感動をありがとー！!!</h2>'

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=81)
```
* 実行確認として、先程開いたブラウザを更新
![スクリーンショット 2022-12-11 2.05.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682574/b9e78105-0a73-ab7d-5318-c10ba9620781.png)





# まとめ
以上より、Macの中でVSCodeを使ってコンテナ環境へ接続し、アプリ開発をすることができました。

# 参照


|#  |巨匠 |タイトル(リンク) |
|---|---|---|
|1  |[Hidekazu Karino](https://zenn.dev/hkdord)さん  |[VSCode Remote Containers 事始め](https://zenn.dev/hkdord/articles/remote-containers)  |
|2  |[virtualtech](https://devops-blog.virtualtech.jp/about)さん  |[Docker DesktopとVS Codeでコンテナを使ったローカル環境でのアプリ開発](https://devops-blog.virtualtech.jp/entry/20220420/1650422689)  |
|3  | [Shion Tanaka](https://zenn.dev/tnk4on)さん |[（2021年版）Podman + Remote-Containers](https://zenn.dev/tnk4on/scraps/5faab16a531182) |
|4  | [Shion Tanaka](https://zenn.dev/tnk4on)さん |[Remote-ContainersでPodmanを使う動作検証（随時更新）](https://qiita.com/tnk4on/items/05d6b0567fb076e5b757) |