自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【VS Code】PHP環境のリモート開発・デバッグ【Dockerコンテナ】

PHP

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

みなさんプログラミングの際にVS Codeを使っていますでしょうか。
私はよく使っています!

とても軽量ですし、必要最低限の機能はもちろん、ソースの管理や、デバッグ、強力な拡張機能など、非常に気に入っております。

今回はVS CodeでDockerを使ったリモート開発を試してみました。
驚くほど簡単に使うことができます。

Dockerを使いPHP環境を用意し、VS Codeでリモートデバッグを行います。

他にも私のブログで、PHPについて解説している記事がありますのでご覧ください。

環境

今回試した環境
  • Windows 11 / 10
  • macOS Monterey (M1)
  • Visual Studio Code
  • Docker

2023/09/14 WindowsとMacを使い、最新バージョンで確認しました。

リモート(Dockerコンテナ)開発のメリット

VS Codeの起動はローカルPC、実行環境はリモート(Dockerコンテナ)先と分けることにより、ローカルPCの環境を汚すことがありません
コンテナ上に環境を用意すれば、ローカルPCに色々と開発に必要なライブラリなどをインストールする必要がないためです。

Dockerコンテナは、不要になれば破棄することもできますし、様々なプロジェクトの開発環境が必要な場合、各コンテナごとに環境を用意できますので便利です。

今回はDockerコンテナを利用してリモート開発を行いますが、複数人で開発する際に、同じ開発環境を用意することができます。

他にも、SSHでのリモート開発もサポートしておりますので、Linuxでしか動かないアプリの開発や、クラウド環境にリモート接続し、ローカルPCのVS Codeで編集といったこともできます。

PHPの場合、ローカルPCにXAMPPをインストールして開発するのが主流でした。
環境の定義を用意すれば、Dockerコンテナ上に開発環境を簡単に構築できますので、お試しください。

VS Codeインストール

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。

拡張機能(Dev Containers)のインストール

VS Codeを起動しましょう。
何も拡張機能が入っていない状態ですが、日本語パックだけはインストールしました。

以下の拡張機能をインストールします。

Dev Containers - Visual Studio Marketplace
Extension for Visual Studio Code - Open any folder or repository inside a Docker container and take advantage of Visual ...

VS Code上から拡張機能を検索し、「Dev Containers」をインストールします。

画像に alt 属性が指定されていません。ファイル名: 2022-10-01_22h36_11-1024x210.png

ちなみに以前は、「Remote-Containers」という名称でした。

別な拡張機能で、「Remote Development」というのもあります。

Remote Development - Visual Studio Marketplace
Extension for Visual Studio Code - An extension pack that lets you open any folder in a container, on a remote machine, ...

こちらは、「Remote – SSH」「Remote – Containers」「Remote – WSL」「Remote – Tunnels」の4つの拡張機能を含んでいるようです。

今回は、リモート先にDockerコンテナを利用しますので、「Dev Containers」拡張機能のみインストールしました。

インストールした拡張機能は、以下の2つだけです。
開発に必要なものはリモート先にインストールしますので、ローカルPCのVS Codeはこれだけにしました。

スポンサーリンク

Dockerの用意

Macの場合はDockerのみですが、Windowsの場合はDocker(WSL2がバックエンド)が必要です。
Dockerのインストール方法は、以下の記事をご覧ください。

Windows
Mac

Dockerを起動しておきましょう。

PHP環境の用意

コンテナ上にPHPの環境を用意してみましょう。
今回は、以下のサンプルプロジェクトを利用して試してみます。

GitHub - microsoft/vscode-remote-try-php: PHP sample project for trying out Dev Containers
PHP sample project for trying out Dev Containers. Contribute to microsoft/vscode-remote-try-php development by creating ...

サンプルプロジェクトはコマンドで開くことができます。
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
Linux

PHPのバージョンを確認してみましょう。
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 Rethans

PHPを実行してデバッグを確認します。
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にアクセスすると、ブレークポイントで止まることが確認できます。

コンテナの環境について

今回はサンプルプロジェクトをダウンロードし、簡単に試してみました。
環境については、プロジェクト直下の「.devcontainer」フォルダに格納されています。

devcontainer.jsonにはリモート先のVS Codeの拡張機能や設定、Dockerfileにはコンテナの定義が記載されています。
このファイルを元にして、PHP環境をカスタマイズするのも良いでしょう。

Dockerファイルを修正したらF1キーを押しコマンドパレットから、「Rebuild Container」でコンテナの再作成ができます。

Dockerfileを修正し、コンテナの環境をカスタマイズ→コンテナ作成が、VS Code上で完結し、非常に便利です。他の人との開発環境の共有にも便利ですね。

さいごに

VS Codeのリモート開発は素晴らしいですね!
ローカルPCの環境を汚さず、コンテナで開発環境を作成することができます。
手順も面倒ではないので、ぜひ活用しましょう。

さらに詳しくリモート開発を知りたい場合は、以下の記事もご覧ください。

他にも私のブログで、PHPについて解説している記事がありますのでご覧ください。

\オススメ/
MacOSPHPVS CodeWindowsツール
スポンサーリンク
この記事を共有
千草をフォローする
管理人

現役のITエンジニア。
気ままにコードや技術情報をまとめています。
Webアプリ/Windows・Macアプリ/モバイルアプリ/機械学習やIoT他。
(Java, PHP, Javascript, Swift, Python, C#, 他)
個人開発:Clibor, Quipha, TXT-Crypter
Kindle本: Laravel9 実践入門, 他

千草をフォローする

個人開発

Cliborはシンプルで高機能なクリップボード履歴ソフトです。
Mac版も公開しています。

自分だけの問題集や問題を作成し、クイズを行い学習に活用しましょう。

Mac版Cliborです。
基本的な使い方は、Windows版と同じです。

麻雀の符計算をマスターしよう。

簡単にテキストを暗号・復号でき、秘密情報を守ります。

便利なツールを公開しています。
是非、活用してください!

コメント