はじめに
みなさんプログラミングの際にVS Codeを使っていますでしょうか。
私はよく使っています！
とても軽量ですし、必要最低限の機能はもちろん、ソースの管理や、デバッグ、強力な拡張機能など、非常に気に入っております。
今回はVS CodeでDockerを使った開発を試してみました。
驚くほど簡単に使うことができます。
Dockerを使いPHP環境を用意し、VS Codeでリモートデバッグを行います。
他にも私のブログで、PHPについて解説している記事がありますのでご覧ください。
環境
リモート(Dockerコンテナ)開発のメリット
VS Codeの起動はローカルPC、実行環境はリモート(Dockerコンテナ)先と分けることにより、ローカルPCの環境を汚すことがありません。
コンテナ上に環境を用意すれば、ローカルPCに色々と開発に必要なライブラリなどをインストールする必要がないためです。
Dockerコンテナは、不要になれば破棄することもできますし、様々なプロジェクトの開発環境が必要な場合、各コンテナごとに環境を用意できますので便利です。
今回はDockerコンテナを利用してリモート開発を行いますが、複数人で開発する際に、同じ開発環境を用意することができます。
他にも、SSHでのリモート開発もサポートしておりますので、Linuxでしか動かないアプリの開発や、クラウド環境にリモート接続し、ローカルPCのVS Codeで編集といったこともできます。
VS Codeインストール
VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。
VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。
拡張機能(Dev Containers)のインストール
VS Codeを起動しましょう。
何も拡張機能が入っていない状態ですが、日本語パックだけはインストールしました。
以下の拡張機能をインストールします。
VS Code上から拡張機能を検索し、「Dev Containers」をインストールします。
参考までに拡張機能で、「Remote Development」というのもあります。
今回は、リモート先にDockerコンテナを利用しますので、「Dev Containers」拡張機能のみインストールしました。
インストールした拡張機能は、以下の２つだけです。
開発に必要なものはリモート先にインストールしますので、ローカルPCのVS Codeはこれだけにしました。
Dockerの用意
Macの場合はDockerのみですが、Windowsの場合はDocker(WSL2がバックエンド)が必要です。
Dockerのインストール方法は、以下の記事をご覧ください。
PHP環境の用意
コンテナ上にPHPの環境を用意してみましょう。
今回は、以下のサンプルプロジェクトを利用して試してみます。
サンプルプロジェクトはコマンドで開くことができます。
VS Code上でF1をクリックし、以下を入力しましょう。
Dev Containers: Try
「Dev Containers: Try a Dev Container Sample…」を選択します。
PHPを選択し、サンプルプロジェクトを構築します。
サンプルプロジェクトを開くことができました。
この時点でコンテナは作成され、コンテナ上にソースコードがあります。
ソースはDockerのボリュームに存在します。ですので、コンテナが破棄されてもソースは残ります。
Docker Desktop上でも確認できます。
PHPの実行
index.phpを開いてみましょう。
文字列のechoとphpinfoが記載されています。
<?php
/*----------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See LICENSE in the project root for license information.
*---------------------------------------------------------------------------------------*/
function sayHello($name) {
echo "Hello $name!";
}
?>
<html>
<head>
<title>Visual Studio Code Remote :: PHP</title>
</head>
<body>
<?php
sayHello('remote world');
phpinfo();
?>
</body>
</html>VS Codeのターミナルを開き、コンテナ上でコマンドを確認してみましょう。
試しにunameと打ってみましょう。
Linuxと表示され、コンテナ内であることが確認できました。
vscode ➜ /workspaces/vscode-remote-try-php (main) $ uname
LinuxPHPのバージョンを確認してみましょう。
PHP 8.2.6でした。
vscode ➜ /workspaces/vscode-remote-try-php (main) $ php -v
PHP 8.2.6 (cli) (built: May 23 2023 09:42:25) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.6, Copyright (c) Zend Technologies
with Xdebug v3.2.1, Copyright (c) 2002-2023, by Derick RethansPHPを実行してデバッグを確認します。
PHP Debugという拡張機能をインストールします。
ソースコードにブレークポイントを設定します。
F5を押し、PHPコマンドでブレークポイントが止まることを確認できます。
サーバーの起動
今度はサーバーを起動して、ブラウザからPHPを実行しましょう。
ターミナルから以下のコマンドを実行し、サーバーを起動します。
php -S 0.0.0.0:8000ブラウザを開き、以下のURLにアクセスします。
http://localhost:8000/index.phpには、echoとphpinfoが記述されており、以下の画面が表示されます。
サーバーのデバッグ
ブラウザからのアクセス時に、PHPのデバッグを行ってみます。
サーバーを起動した状態で、「実行とデバッグ」を開き、「Listen for XDebug」を選択します。
F5をクリックし、デバッガーを起動します。
ブラウザから先程のURLにアクセスすると、ブレークポイントで止まることが確認できます。
PHP環境の変更
Dev Containersを使って、簡単にPHP環境が構築できます。
サンプルのdevcontainer.jsonを確認しましょう。
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/php
{
"name": "PHP",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/php:1-8.3",
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
"settings": {},
"extensions": [
"streetsidesoftware.code-spell-checker"
]
}
},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [8000],
// Use 'portsAttributes' to set default properties for specific forwarded ports. More info: https://code.visualstudio.com/docs/remote/devcontainerjson-reference.
"portsAttributes": {
"8000": {
"label": "Hello Remote World",
"onAutoForward": "notify"
}
}
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html"
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}featuresに指定できる設定や、Javaに関する拡張機能は以下に定義されています。
コンテナの環境について
今回はサンプルプロジェクトをダウンロードし、簡単に試してみました。
環境については、プロジェクト直下の「.devcontainer」フォルダに格納されています。
devcontainer.jsonにはリモート先のVS Codeの拡張機能や設定、Dockerfileにはコンテナの定義が記載されています。
このファイルを元にして、PHP環境をカスタマイズするのも良いでしょう。
Dockerファイルを修正したらF1キーを押しコマンドパレットから、「Rebuild Container」でコンテナの再作成ができます。
さいごに
VS Codeのリモート開発は素晴らしいですね！
ローカルPCの環境を汚さず、コンテナで開発環境を作成することができます。
手順も面倒ではないので、ぜひ活用しましょう。
さらに詳しくリモート開発を知りたい場合は、以下の記事もご覧ください。
他にも私のブログで、PHPについて解説している記事がありますのでご覧ください。
コメント