Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

WSL2上のDockerをVSCodeからアクセスする

Posted at

はじめに

前回の記事では、WSLで動作させたDockerでCakePHPのインストールまで行いました。

今回は、DockerとVS Codeの連携設定を行います。

環境

  • Windows 10 Home 22H2
  • WSL2 Ubuntu 22.04.2 LTS
  • Visual Studio Code 1.77.3

Remote Developmentをインストール

Remote Developmentは、VS Codeを実行しているローカルPCから、リモート環境のファイル編集やターミナル操作が行えるVS Codeの拡張機能です。
Remote Development
Remote - SSH、Remote - Containers、Remote - WSLの3つの機能が含まれます。

WSLからVS Codeを起動

次に、docker-compose.ymlを設置した~/cakephpでcodeコマンドを実行し、WSLからVS Codeを起動します。

~/cakephp
yoyoyo@wsl:~/cakephp$ code .

起動したVS Codeの左下に「WSL:Ubuntu-22.04」と表示されていれば接続成功です。
codeコマンドを実行したディレクトリのファイルがExplorerタブに表示されています。
Visual Studio Code

VS CodeからDockerにアクセス

VS Code左下の「WSL:Ubuntu-22.04」をクリックし、「Reopen in Container」を選択。
Reopen in Container
「From 'docker-compose.yml'」を選択。
From 'docker-compose.yml'
「web」コンテナを選択。
web
「/var/www/html」を開く。
/var/www/html
Dockerコンテナに接続することができました!
html

Dev Containerについて

VS CodeからWSLのDockerに接続すると、.devcontainerというフォルダが作成されます。
このフォルダは、VS CodeのDev Containerによって管理されているフォルダです。

~/cakephp
yoyoyo@wsl:~/cakephp$ ls -la
total 28
drwxr-xr-x  5 yoyoyo yoyoyo 4096 May  1 17:17 .
drwxr-x---  7 yoyoyo yoyoyo 4096 May  1 16:21 ..
drwxr-xr-x  2 yoyoyo yoyoyo 4096 May  1 17:17 .devcontainer
-rw-r--r--  1 yoyoyo yoyoyo   80 May  1 14:02 .env
drwxr-xr-x  4 yoyoyo yoyoyo 4096 May  1 13:18 docker
-rw-r--r--  1 yoyoyo yoyoyo  563 May  1 12:49 docker-compose.yml
drwxr-xr-x 14 root   root   4096 May  1 14:41 html

Dev Containerとは、VS CodeからDockerコンテナを開発環境として使用するための拡張機能です。
Architecture Dev Containers
Developing inside a Container using Visual Studio Code Remote Development より引用

.devcontainerにはdevcontainer.jsondocker-compose.ymlが含まれており、devcontainer.jsonにDockerコンテナの設定が記載されています。

.devcontainer
yoyoyo@wsl:~/cakephp$ ls .devcontainer/
devcontainer.json  docker-compose.yml

先ほど指定したdocker-compose.ymlとwebコンテナの設定はここにあります。

{
        "name": "Existing Docker Compose (Extend)",
        "dockerComposeFile": [
                "../docker-compose.yml",
                "docker-compose.yml"
        ],
        "service": "web",
        "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}"
}

いったん.devcontainerが作成されると、次回以降は設定ファイルから同じコンテナを開くことができるようになります。
h.png

おわりに

いままでVS Codeは単なるエディタとしか使っていなかったのですが、ローカルPCのWindowsのみで開発環境のインフラ構築、SSH接続、ファイルの編集まで完結できるのはとても便利ですね。
実環境にサーバーを建て、ミドルウェアをインストールし、TeraTermでファイルをやり取り…というこれまでの作業を考えると、こんなに簡単でいいの?とびっくりしてしまいます。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address