[メモ] php開発環境 (Windows10, Vagrant, Docker, VSCode)

普段Web関連の開発してない個人の開発環境メモ.

概要

Vagrantにて、VirtualBoxで centos/7 を起動して、Docker環境をインストール。
php(php:7.3-apache-stretchベース) + mysql(mariadb:10) + phpmyadminの環境を入れる。
Visual Studio Codeで、デバッグする。

環境

• Windows 10 64bit

手順

1. ホスト側の環境のセットアップ
   git、Vagrant、VirtualBox、phpとvscodeをインストール

   Power Shellを管理者で開いて、以下を実行

   Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
   cinst -y git vagrant virtualbox php vscode
   

2. ゲスト側の環境のセットアップ
   Git Bash (コマンドライン) を開いて、以下実行。
   (ネットワークインターフェースが複数あると、vagrant up時に、どれを使うか聞かれる。番号入れて、[Enter])

   mkdir -p /c/Vagrant
   cd /c/Vagrant
   git clone https://github.com/mt08xx/phpdev2019.git
   cd phpdev2019
   vagrant plugin install vagrant-vbguest
   vagrant up && vagrant halt
   # しばらく待つ: 15分~ (PC,ネット環境によりけり)
   

3. php-apache, mysql, phpmyadminのコンテナ起動。
   以下、実行

   cd /c/Vagrant/phpdev2019
   vagrant up
   vagrant ssh
   cp -rv /vagrant/wwwphp /home/vagrant
   cd wwwphp
   rm -rfv www
   ln -sf /vagrant/wwwphp/www .
   docker-compose up -d
   

4. ブラウザでアクセス
   ゲスト内で、ip addr show eth1 にて、IPアドレスを取得して、ホスト側(Windows)のブラウザを開いて、アドレスバーに、IPを入れる (phpinfo()が表示されるハズ)

• http://xxx.yyy.zzz.www で wwwphp/www 内の index.phpを表示

• http://xxx.yyy.zzz.www:8081 (8081番ポート)で phpmyadminが起動する

  実行例(192.168.1.123がIP)

  [vagrant@localhost wwwphp]$ ip -4 addr show eth1
  4: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
  	inet 192.168.1.123/24 brd 192.168.1.255 scope global noprefixroute dynamic eth1
  	   valid_lft 685178sec preferred_lft 685178sec
  [vagrant@localhost wwwphp]$
  

1. VSCodeの整備
   1. VSCodeを起動
      エクスプローラーで、C:\Vagrant\phpdev2019\wwwphp\wwwを開いて、右クリック。
      Open with Code(VSCodeでフォルダを開く)
   2. Extensionをインストールする
      Ctrl + Shift + X を押して、以下のExtensionを探して、インストール
      (PHP IntelliSenseとphpfmtは、ホストにphpの実行ファイルが必要らしい)
      • PHP Debug
      • PHP IntelliSense
      • phpfmt (phpのファイルを開いたら、[F1]をおして、phpfmt+[Enter]すると、整形される)
      • HTMLHint
      • IntelliSense for CSS class names in HTML
   3. index.phpを開く(Ctrl + Shift + Eで、VSCodeのExplorerを開いて、クリック)
   4. phpinfo(); の行に、ブレークポイントを張る（行番号の左側のほうをクリック)
   5. デバッグ開始: メニューの Debug > Start Debugging または、[F5] を押す。
   6. ブラウザで、該当のページをひらく。　http://xxx.yyy.zzz.www
   7. 該当箇所で、止まってるはず。あとは、ステップ実行したりして、楽しむ。

その他

• ゲストは、2GBとかでもだいじょぶそう。。
  Vagrantfileの VM_MEMORY=4096 => VM_MEMORY=2048
• ネットワークがいちいち聞かれて面倒なら
  config.vm.network "public_network", bridge: ""Realtek USB GbE Family Controller"
  のようにしてしまうとよい。