Dev Containerのファイルはdocker cpしなくてもVS Codeでダウンロードできる

Dev Container内のファイルをローカルに持ってきたいとき、毎回docker cpでWSLにコピーしてくるという力技を使っていた。Geminiに聞いたらVS Codeだけで完結する方法を教えてもらった。

TL;DR

  • VS Codeのエクスプローラーで右クリック → 「ダウンロード」 でローカルに保存できる
  • /workspace以外の場所もエクスプローラーで開けばダウンロード可能

何がしたかったのか

PWAアプリをスマホ実機で動作確認するために、ローカル開発環境のHTTPS化が必要になった。localhost以外のアドレス(LANのIPなど)でアクセスする場合、ブラウザがセキュアなコンテキストとして認識してくれないためだ(PWA化で詰まった話は別記事で書く予定)。

Dev Container内でmkcertを使ってCA証明書を生成しているが、この証明書をモバイル端末にもインストールしないといけない。証明書ファイルは/home/vscode/.local/share/mkcert/に配置されるので、/workspaceのマウント経由では取り出せない。

そこで今まではこんな感じで取り出していた。

# コンテナID調べて
docker ps

# docker cpでWSLにコピーして
docker cp <container_id>:/home/vscode/.local/share/mkcert/rootCA.pem ~/

# 必要ならWindowsにも持っていく
cp ~/rootCA.pem /mnt/c/Users/<username>/Desktop/

動くけど地味に面倒。証明書を再生成するたびにこれをやるのはしんどかった。

VS Codeなら右クリックでダウンロードできる

Geminiに聞いたらあっさり教えてくれました。VS CodeでDev Containerを開いている場合、エクスプローラーからファイルを直接ダウンロードできる。

/workspace以外のパスにあるファイルの場合は、エクスプローラーの「フォルダーを開く」から対象ディレクトリを指定するか、ターミナルで以下を実行すればエクスプローラーに表示される。

code /home/vscode/.local/share/mkcert/

あとは右クリック →「ダウンロード」で完了。複数ファイルの選択ダウンロードも可能。

まとめ

「Dev Containerからファイルを取り出す=docker cp」という思い込みでずっと遠回りしていた。VS Codeで開いてるので普通にダウンロードできるというシンプルな話でした。 こういう「知ってれば一瞬」系のTipsはAIに聞くのが早い。自分で調べてたらたぶんDockerのドキュメントを読みに行って、よりスマートなdocker cpの方法を探してたと思う。