2023.09.25

DockerコンテナにVSCodeをアタッチして使用する方法の紹介

はじめに

こんにちは、AITPの壱岐です。

AITPではDockerで開発環境を用意して開発しているプロジェクトがいくつかあり、 DockerコンテナにVSCodeをアタッチして使用することで快適に開発ができます。

今回はその設定方法等についてのご紹介です。

LaravelやPHPのデバッグ方法について紹介した記事 (Laravel のデバッグ方法についてのご紹介)も良ければ御覧ください。

概要

VSCodeを起動中のDockerコンテナにアタッチして使用する
- 詳しくは VSCodeドキュメントが参考になるかと思います

DockerコンテナにVSCodeをアタッチして使用するメリット

VSCodeをDockerコンテナーにアタッチ使用することによってローカルのVSCodeを汚さずに使用することができる
Dockerコンテナごとに拡張機能をインストールできるので、必要最小限の拡張機能がインストールされた状態にできるのでVSCodeが軽量になる
VSCode上のターミナルでコンテナに対してコマンド操作が可能なので、ホストマシンのターミナル(コマンドプロンプト)等でコンテナに入って操作するような手間が省ける
Gitの操作もVSCodeのGUIから行えるため別途Gitクライアントを用意したり、コマンドを覚えて打ち込む必要がなくなる

前提条件

Docker環境でLaravelの環境が構築済みであること
Windows上での操作が基準

VSCode設定

VSCodeをDockerコンテナにアタッチする

まずはVSCodeをDockerコンテナにアタッチできるようにするための拡張機能 Dev Containers をVSCodeにインストールします。

インストールが完了するとサイドバーにリモートエクスプローラーが表示されます。

リモートエクスプローラー内の開発コンテナのー任意のコンテナーにマウスカーソルを合わせると現在のウィンドウ/新しいウィンドウでアタッチするボタンで VSCodeをコンテナにアタッチすることができます。

もしくは画面左下のアイコンをクリックすることでコマンドパネルメニュが表示されるので「実行中のコンテナーにアタッチ」から任意のコンテナーにアタッチすることもできます。

コンテナにアタッチするとエクスプローラーには何も表示されていない状態なので、任意のディレクトリを開いた状態にしておきます。

フォルダを開いたときには以下のような表示になります。 (フォルダを開く作業はコンテナにアタッチをした初回のみ必要で、それ以降は自動で開かれます。)

ローカル上のみで開発するときにはローカルのターミナル等で都度 docker exec -it {コンテナ名} bash のようにしてコンテナに入ってコマンドを打ち込むと思いますが、 VSCodeをコンテナにアタッチすることでVSCodeを開くとすぐにコンテナー側にコマンドを打ち込むことができる状態になっています。

拡張機能の管理について

コンテナにアタッチしたVSCodeの拡張機能はローカルのVSCodeの拡張機能とは別で管理され、コンテナ毎に管理されます。 (このため、Laravelで開発をしているコンテナにはLaravelやPHP関連の拡張機能だけ、Goで開発をしているコンテナにはGo関連の拡張機能だけ…とインストールすることができ、必要最小限のものだけインストールすることでなるべく軽量にしておき、快適な開発をすることができます。)

ローカルにインストールしている拡張機能をコンテナ側にもインストールしたい場合にも画像に示す通りに個別でインストールしたり、チェックボックスにチェックを付けてまとめてインストールすることもできます。

VSCode拡張機能は~/.vscode-server/extensionsにインストールされるため、docker compose down等でコンテナを削除した際に消えてしまいます。コンテナが作り直される毎にインストールをし直すのが面倒であれば、ボリュームの永続化等の対応が必要になるかと思います。

DockerコンテナからGithubにSSH接続できるようにしておく

普段ホスト側(Windows側)でGithubへSSH接続を行っている場合、Dockerコンテナ側からもSSH接続できるように SSH-Agentの起動と鍵の登録をしておく必要があります。

(下記はホストマシン側でSSHキーを生成し既にGithubに登録している前提になります。登録をしていない場合はgenerating SSH keys のページを参考に登録を行ってください。)

ホスト側(Windows)で管理者権限でPowershellで実行

# ssh-agentを自動起動に設定
> Set-Service ssh-agent -StartupType Automatic
# ssh-agentを起動
> Start-Service ssh-agent
# 起動できているかの確認
> Get-Service ssh-agent  # Statusが以下のようにRunningになっていればOK

------------------------------------------------
Status   Name               DisplayName
------   ----               -----------
Running  ssh-agent          OpenSSH Authentication Agent
------------------------------------------------

# ssh-agentに秘密鍵を登録
> ssh-add C:\\Users\\ユーザー名\\.ssh\\id_rsa    # パスや鍵のファイル名は置き換えてください
# 登録できたか確認
> ssh-add -l  # 登録した秘密鍵が表示されればOK

この作業後にコンテナ側(VSCodeターミナル)でGithubに接続できるか確認します。

$ ssh -T git@github.com
--->
### (成功例)
Hi {UserName}! You've successfully authenticated, but GitHub does not provide shell access.

### (失敗例)
git@github.com: Permission denied (publickey).

ここまでの設定でGithubへのSSH接続ができるようになり、 DockerコンテナにアタッチしたVSCode上でGitプル／プッシュ等ができるようになります。

Git操作について

ソース管理パネルからGitの基本的な操作をすることができます。

変更したファイルの任意の箇所だけをコミットしたい場合には、コミットしたい箇所を選択(ドラッグ)して右クリックのメニューから「選択した範囲をステージする」で選択した部分のみがステージすることもできます。

また、GitLens の拡張機能を入れることで行ごとの変更履歴を見ることができたり、ソース管理パネルで追加情報を表示することができます。

💡 .gitconfigについて補足

VSCodeをDockerコンテナにアタッチして起動するタイミングでホストマシン側の.gitconfig ファイルがコピーされます。このため、既にホストマシンだけで開発を行っている開発者がVSCodeをDockerコンテナにアタッチして開発を行いたい場合、特に何も気にせずGitを使い始めることができます。

完全に初期化された状態のPC等で.gitconfigファイル自体ない場合にはホスト側で下記のようなGitの設定を行った上でVSCodeをアタッチしてください。

$ git config --global user.name "Your Name"
$ git config --global user.email "your.email@address"

ログを流しておく

これは設定というよりもこうしたら開発しやすい！という内容になりますが、せっかくVSCode上でコンテナーのBashが触れる状態にあるので、tail -f ログファイル名でログを流した状態にしておくと、エラーが起きたときや、デバッグのためにメッセージを流しているときにすぐに確認できるのでおすすめです。

おわりに

基本的な内容だとは思いますが、以上となります。

コーディング・コマンド実行・Git操作等がVSCodeで完結できて便利なので、ぜひ使ってみてください！

All Blog