Docker DesktopとVS Codeでコンテナを使ったローカル環境でのアプリ開発

Visual Studio Code（以下VSCode）はマイクロソフトが開発している拡張可能なエディターであり、元々はオープンソースではありませんでしたが、現在はオープンソースで開発されています。

何かの言語でソフトウェア開発をする場合、開発用のマシンに開発環境をセットアップするのが従来のやり方ですが、Dockerを使えばコンテナ上で開発環境を動かして、環境がいらなくなったらコンテナごと削除するだけでクリーンアップできて便利です。

今回はVS CodeとVS Codeの拡張機能を使って、コンテナベースでアプリケーション開発を試してみます。

Visual Studio Code
Docker
Remote - Containers

また本例ではPHP開発を例にしているので、次のVS Codeの拡張機能をインストールしています。ここは言語ごとに適切な拡張機能を入れておけば良いでしょう。

PHP Debug
PHP Intelephense

開発環境を作成するためのファイルを作成

どのような開発環境を作るか、これから各ファイルを作成して定義します。まずはdockerfileの準備から。

dockerrfile

PHP 8.0ベースのPHPとApacheがセットアップされたイメージを利用する例にします。次のような内容でファイルを作成します。このイメージはDebianベースです。

FROM php:8.0-apache-bullseye

docker-compose.yml

次に実行環境を定義するために次のようなdocker-compose.ymlを作成します。

version: '3'
services:
  php:
    build: .
    stdin_open: true
    tty: true
    ports:
      - '8080:80'
    volumes:
      - ./source:/var/www/html

このYAMLではApacheの公開ディレクトリーとしてローカルの/sourceディレクトリーをバインドするので、ディレクトリーを作成しておきます。

mkdir source

とりあえずこのディレクトリーにPHPファイルを一つ置いておきます。

<?php
echo "Hello";
?>

必要なのは最低限これだけです。

開発環境を作成

先ほどいろいろなファイルを作成したディレクトリーをVS Codeで開きます。

tree
.
├── docker-compose.yml
├── dockerfile
└── source
    └── test.php

1 directory, 3 files

もしくはcodeコマンドを使って該当のディレクトリーに移動した後にcode .などとすると開かれます。

docker-compose.ymlを右クリックして「Compose Up」を選択すると、定義した環境をDockerコンテナーの中に作成してくれます。

実はここまではVS CodeのDocker拡張機能だけあれば実現できます。なんとなくですがローカル上のDockerコンテナーの中に開発環境を作るのに、「Remote - Containers」拡張機能を入れるのってなんか不思議ですよね。

「Remote - Containers」拡張機能を入れるメリットとして、ローカル、リモートに関わらず、コンテナーの中のファイルを手元のVS Codeで開いて編集できるメリットがあります。デプロイした後にソースの手直しをしたり環境に直接アクセスしてデバッグが可能になるので、合わせてインストールしておくと良いと思います。