本記事の対象
- 開発する際にDockerを使用している方
- テキストエディタにVScodeを使用している方
VScodeのインストール
まだされていない方は下記からインストールをしてください。
Remote Containersのインストール
Remote Containersとは？
VScodeのプラグインの一つです。
そもそもプラグインとは何？とかVScode自体よくわからないという方はまず下記記事を御覧ください。
話を戻します。では何をするためのプラグインかということを解説していきます。
一言でいうと「Dockerで作ったコンテナにVScodeで直接アクセスできるプラグイン」になります。
こいつマジで何言ってんだ状態の方、、もう少しだけお付き合いください。
図も使いながら噛み砕いて解説していきます。
Dockerで開発環境を構築する際、一般的な方法としてコンテナ側とローカル側（自分のPC）にソースファイルをマウント（同期）させる手法を取ります。
- ローカル側のファイルを編集
- コンテナ側のファイルにもその修正が反映される
- コンテナ側のファイルを編集
- ローカル側のファイルにもその修正が反映される
いや、一緒じゃん！
そう思われたからもいらっしゃるかと思います。
実際にそうです（笑）、順番が逆なだけで結果は一緒です。結果が全てです。
ではなぜプラグインをいれる必要があるのか説明していきます。前フリが長くてすみません。
例えばDockerでDjango環境を構築したとします。（docker-compose×Django環境構築の方法はこちら）
DjangoはPythonで動いています。そうするとVScodeでPythonの便利なプラグインを使用したくなりますよね？
関数ジャンプだったり、コード補完だったり、そのほかにもVScodeでPython関連のプラグインを使用すると開発がものすごく捗ります。
ただし、こういったプラグインはPythonが開発する環境にインストールされていないと機能しません。
ローカル側で編集するとローカル側にPythonをインストールしないといけないということです。
せっかくPython用のコンテナを作成したのにローカル側にもインストールするのは面倒ですよね？
詳しくは割愛しますがバージョンの問題などもあったりします。
Remote Containersでコンテナ側で編集することでこの問題が解決します。
コンテナ側にはPythonがインストールされているためVScodeのPythonプラグインがそのまま使えるようになります。
ほかにはDjangoのコマンドを実行する点においてもやりやすいです。
VScodeはターミナルの機能がデフォルトで搭載されています。
Remote Containersを使用するとターミナルもコンテナのターミナルに最初から設定されるためスムーズにコマンド実行ができます。
Remote Containersの使用方法
まずはVScodeのサイドバーにある「拡張機能」をクリックします。
そこで「Remote Containers」と検索します。「Remote – Containers」が出てきますのでそれをインストールしましょう
インストールすると左下に緑色の「><」みたいなアイコンが表示されます。
中央上あたりに下記画像のダイアログが表示されます。
「Remote-Containers: Attach to Running Containers」を選択してください。
そうすると起動済みのコンテナが表示されます。
そこで接続したいコンテナをクリックしましょう。
今回は「docker-compose×Django環境構築」の記事で作成したappコンテナに接続してみましょう。
「docker_django_app_1」が表示されていますのでそちらをクリックしてください。
そうすると新しいWindowが開き、左下の緑の部分が画像のようになります。
「フォルダーを選択」で/workspace配下にDjangoのソースがあるのでそこを選択してください。
また新しいwindowが立ち上がるのでそれで完了です！
WSL2でdocker環境構築が済んでいない方はこちらをご覧ください。
上記記事で環境構築していた場合、VScodeのプラグインである「Remote WSL」での接続も完了していると思いますのでそちらを前提に進めていきます。
「フォルダを選択」でdocker-compose.ymlがおかれているフォルダを選択してください。
その状態で左下に緑色の「><」をクリックすると中央上あたりにダイアログが表示されます。
「Remote-Containers: Add Development Container Configuration Files…」を選択してください。
そのあと「From docker-compose.yml」を選択し、サービスを「app」で選択して下さい。
その後、再度左下に緑色の「><」クリックし「Remote-Containers: Reopen in Container」を選択しましょう。
そうすると新しくWindowが開きます。
「フォルダーを選択」で/workspace配下にDjangoのソースがあるのでそこを選択してください。
また新しいwindowが立ち上がるのでそれで完了です！
接続後はお好きなプラグインを入れていただければOKです。
例えばPythonのプラグインを入れた場合、コンテナに接続している際にしかプラグインが効かないようになります。
コメント