はじめに
前回の記事では、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 - SSH、Remote - Containers、Remote - WSLの3つの機能が含まれます。
WSLからVS Codeを起動
次に、docker-compose.yml
を設置した~/cakephpでcode
コマンドを実行し、WSLからVS Codeを起動します。
yoyoyo@wsl:~/cakephp$ code .
起動したVS Codeの左下に「WSL:Ubuntu-22.04」と表示されていれば接続成功です。
code
コマンドを実行したディレクトリのファイルがExplorerタブに表示されています。
VS CodeからDockerにアクセス
VS Code左下の「WSL:Ubuntu-22.04」をクリックし、「Reopen in Container」を選択。
「From 'docker-compose.yml'」を選択。
「web」コンテナを選択。
「/var/www/html」を開く。
Dockerコンテナに接続することができました!
Dev Containerについて
VS CodeからWSLのDockerに接続すると、.devcontainer
というフォルダが作成されます。
このフォルダは、VS CodeのDev Containerによって管理されているフォルダです。
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コンテナを開発環境として使用するための拡張機能です。
Developing inside a Container using Visual Studio Code Remote Development より引用
.devcontainer
にはdevcontainer.json
とdocker-compose.yml
が含まれており、devcontainer.json
にDockerコンテナの設定が記載されています。
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
が作成されると、次回以降は設定ファイルから同じコンテナを開くことができるようになります。
おわりに
いままでVS Codeは単なるエディタとしか使っていなかったのですが、ローカルPCのWindowsのみで開発環境のインフラ構築、SSH接続、ファイルの編集まで完結できるのはとても便利ですね。
実環境にサーバーを建て、ミドルウェアをインストールし、TeraTermでファイルをやり取り…というこれまでの作業を考えると、こんなに簡単でいいの?とびっくりしてしまいます。
Comments
Let's comment your feelings that are more than good