【連載】春の新入社員におくるPHP超入門 ～ その1：環境構築 – Visual Studio Code × Docker –

SHARE

こんにちは。サイオステクノロジーの川田です。

新入生、新社会人、そして新しい環境にチャレンジする皆様おめでとうございます！

今回はPHPを始めてみよう！触ってみよう！と考えている方向けへのPHP超入門をお届けしたいと思います。
この記事を読んでなにかのきっかけになれたら嬉しいです^^

 

目次

環境について

では、早速PHP動かす環境を構築していきたいと思います。
※Visual Studio CodeとDockerをインストール済みであることが前提となります。

使用するツールはこちらです。

  • Visual Studio Code
    拡張機能：Remote Development

  • Docker

Visual Studio Code　ってなんだろう？って方は☞こちらをクリック
Remote Development　ってなんだろう？って方は☞こちらをクリック
Docker　ってなんだろう？って方は☞こちらをクリック

拡張機能インストール

まずはVisual Studio Codeの拡張機能である Remote Development をインストールしていきましょう。

インストール方法は左部メニュー下の方にあるアイコン(四角が4つ並んでいるもの)をクリックします。
「remote development」を検索し、表示されたRemote Developmentの拡張機能をインストールします。

インストールすると、画面左下「><」ボタンからリモート接続ができるようになります。
接続方法に関してはまたご説明しますので、今は「そうなんだ～」くらいで大丈夫です！

ディレクトリ構成

次に必要なファイルを作成していきます。構成は以下の通りです。

 |― sample/
 |   |― Dockerfile
 |   |― docker-compose.yml
 |   |― html/
 |   |    |― index.php
 |   |― xdebug/
 |   |    |― xdebug.ini
 |   |― .devcontainer/
 |　　　　　　 |― devcontainer.json

それでは中身をみていきましょう！

  • Dockerfile

Dockerコンテナを作成するためのDockerfileになります。

# Apache上でPHPが動くDockerイメージを取得します。
FROM php:7.4.16-apache
 
# xdebugの設定をコンテナにコピーします。このディレクトリに
# コピーするとPHPの設定として有効になります。xdebug.iniについては後述します。
ADD xdebug/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini
 
# デバッグ対象のPHPをコンテナにコピーします。
ADD html/index.php /var/www/html
 
# xdebugのインストールをします。
RUN pecl install xdebug && docker-php-ext-enable xdebug
  • docker-compose.yml

Dockerアプリケーションを動かすための処理を記述しているファイルとなります。

version: '3'
services:
  php:
    build: .
    volumes:
      - ./html:/var/www/html
    ports:
      - '8080:80'
  • html/index.php

デバッグ用のPHPファイルになります。

<?php
$a = 1;
if ($a === 1) {
    echo "hoge";
} else {
    echo "fuga";
}
  • xdebug/xdebug.ini

xdebug用の設定ファイルです。
Xdebug2からXdebug3にアップグレードされたことにより、古い記事だと動かないかもしれません。
どういったことが変わったのか見ていきましょう。

Xdebug2からXdebug3の変更点
今回私が使用する設定の変更箇所をご紹介します。
  • バッギングポート

標準のバッギングポートが「9000」⇒「9003」に変更されました。
また「client_port」に設定名が変わっています。

  • ステップデバッグ

Xdebug2では以下のように書いていました。

xdebug.remote_enable=1
xdebug.default_enable=0
xdebug.profiler_enable=0
xdebug.auto_trace=0
xdebug.coverage_enable=0

Xdebug3はこのようになります。

xdebug.mode=debug
  • remote_autostart

リモートデバッグを自動で開始する「xdebug.remote_autostart」は削除されました。
代わりに「xdebug.start_with_request = yes」をセットしてください。

  • remote_host

「remote_host」から「client_host」に変わっているので注意が必要です。

Xdebug3用に修正したxdebug.iniがこちらです。

# デバッグ接続先です。今回はサーバー側にXdebugが動くので、
# 127.0.0.1を指定します。
xdebug.client_host = 127.0.0.1
# デバッグを自動で開始します。
xdebug.start_with_request = yes
# ステップデバッギング
xdebug.mode = debug
# デバッグの接続ポートです。
xdebug.client_port = 9003
  • .devcontainer/devcontainer.json

Visual Studio CodeがDockerコンテナに接続するための設定ファイルです。

{
  # 任意の名前でOKです。
  "name": "Existing Docker Compose (Extend)",
 
  # Remoteでログインしたいコンテナを作成するためのdocker-composeファイルを指定してください。
  "dockerComposeFile": [
    "../docker-compose.yml",
  ],
 
  # 先程指定したdocker-composeファイル内に定義しているサービスで
  # 起動したいものを指定してください。
  "service": "php",
  # コンテナに入ったときに最初にここで指定したものがカレントディレクトリになります。。
  "workspaceFolder": "/var/www/html",
  # コンテナが生成されたときに、コンテナ側にインストールする拡張機能です。
  # これを指定しないと、コンテナが再生成すると拡張機能が消えます。
  # 今回はXdebugとPHP IntelliSenseをインストールします。
  "extensions": [
    "felixfbecker.php-debug",
    "felixfbecker.php-intellisense"
  ]
}

以上が環境に必要なファイルになります。
それでは動かしてみましょう！

リモート接続

先ほども出てきましたVisual Studio Codeの左下赤枠の「><」ボタンをクリックしてください。

「Remote-Containers: Open Folder in Container…」をクリックします。

先程のファイルを作成したディレクトリを選択し「Open」をクリックします。
例：sample

Visual Studio Code画面右下にコンテナが起動中である旨を表すメッセージが現れます。

 

画面に表示させてみよう！

「docker ps」で確認すると、Dockerコンテナが立ち上がっているのがわかります。

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
0d34ddcdc131        sample_php          "docker-php-entrypoi…"   48 seconds ago      Up 46 seconds       0.0.0.0:8080->80/tcp   sample_php_1

ブラウザに「https://localhost:8080/」アクセスしてみるとPHPも正常に動作しています！

デバッグしてみよう！

赤枠部分の「デバッグアイコン」をクリックすると、おそらくこのような画面が表示されると思います。
これではまだデバッグはできません。

「launch.jsonファイルを作成します。」をクリックし「PHP」を選択します。

launch.jsonファイルが作成されたかと思いますが、まだ動きません！！
こちらのファイルを以下のように修正していきます。
port番号は先ほどの設定で9003にしていたので合わせます。

  • launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        }
    ]
}

これで準備が整ったのでデバッグを実行してみたいと思います！
index.phpで試します。

①止めたい箇所をブレークポイントします。今回は3行目にクリックします。
②赤枠で囲っている緑のボタンを押します。

ブラウザでアクセスしてみると、、、、ブレークポイント打ったところで止まりました＼(^o^)／
デバッグを終了するには右の「□」停止ボタンを押してください。

PHP IntelliSenseについて

PHP IntelliSenseが正常に動いているか確認してみます。

  • コードの補完

キーワードから候補を出してくれます。

  • 構文チェック

入力したPHPコードの構文を確認し、構文エラーがある場合はエラー行と内容を表示します。

この他にもクラスやメソッド、変数の「定義に移動」、「すべての参照の検索」など様々機能があります！

リモート接続終了

リモート接続を終了させるには、Visual Studio Codeの左下赤枠の「><」ボタンをクリックします。
クリックすると「リモート接続を終了する」が出てくるので選択すると終了することが出来ます。

まとめ

いかがでしたでしょうか。こんなにも簡単にPHPの環境が作れるなんて感動しました。
次回は、「Hello World」など表示させていきたいと思います。
第2回☞文字列の出力 – Hello World! –

最後までお読みいただきまして、ありがとうございました(＾ω＾)

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

リモートワークによる 情報の隙間 を埋める方法

次の記事

【連載】春の新入社員におくるPHP超入門 ～ その2：文字列の…