AIMEK's blog: PHP + WSL2 + docker on Windows環境構築

どうも、もりもりです。

今回はPHPを初めて触る機会があったので自分用に環境構築メモ。
Windowsでの実施となりますが、ローカル環境をあまり汚したくないので「WSL2 + Docker」上で動かしてvscodeからリモート接続し、「Hello World」を表示するところまでやってみました。

目次
■ 1. Install WSL
■ 2. Install Docker
■ 3. Ubuntu上に作業場所を作成
■ 4. PHPでHello World
■ 5. vscodeでコンテナの作業フォルダを再開
■ 6. リモート接続終了
■ 7. コンテナ内のWorkspaceを変更
■ 8. 参考

1. Install WSL

■ 管理者でPowerShellを起動

win + R
「powershell」と入力
Ctrl + Shiftを押しながらOK

■ インストール可能なディストリビューションを確認

> wsl --list --online
インストールできる有効なディストリビューションの一覧を次に示します。
既定の分布は ' * ' で表されます。
    'wsl --install -d <Distro>'を使用してインストールします。

  NAME            FRIENDLY NAME
* Ubuntu          Ubuntu
  Debian          Debian GNU/Linux
  kali-linux      Kali Linux Rolling
  openSUSE-42     openSUSE Leap 42
  SLES-12         SUSE Linux Enterprise Server v12
  Ubuntu-16.04    Ubuntu 16.04 LTS
  Ubuntu-18.04    Ubuntu 18.04 LTS
  Ubuntu-20.04    Ubuntu 20.04 LTS

■ インストール

下記コマンドにてディストリビューションを指定してインストール

> wsl --install -d <Distribution Name>

今回は「Ubuntu-20.04」を指定

> wsl --install -d Ubuntu-20.04
インストール中: 仮想マシン プラットフォーム
仮想マシン プラットフォーム はインストールされました。
インストール中: Linux 用 Windows サブシステム
Linux 用 Windows サブシステム はインストールされました。
ダウンロード中: WSL カーネル
インストール中: WSL カーネル
WSL カーネル はインストールされました。
ダウンロード中: Ubuntu 20.04 LTS
要求された操作は正常に終了しました。変更を有効にするには、システムを再起動する必要があります。

完了したらPCを再起動

■ バージョン確認

> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-20.04    Stopped         2

■ 既定のディストリビューションを設定

既定のディストリビューションを設定したい場合は下記コマンドを実行

> wsl --set-default Ubuntu-20.04

■ 起動＆ユーザー登録

IDとパスワードを登録

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: dev
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 20.04 LTS (GNU/Linux 5.10.16.3-microsoft-standard-WSL2 x86_64)

    * Documentation:  https://help.ubuntu.com
    * Management:     https://landscape.canonical.com
    * Support:        https://ubuntu.com/advantage

    System information as of Tue Jun 28 10:42:35 JST 2022

    System load:  0.0                Processes:             8
    Usage of /:   0.4% of 250.98GB   Users logged in:       0
    Memory usage: 0%                 IPv4 address for eth0: 172.20.163.190
    Swap usage:   0%

0 updates can be installed immediately.
0 of these updates are security updates.


The list of available updates is more than a week old.
To check for new updates run: sudo apt update


This message is shown once once a day. To disable it please create the
/home/dev/.hushlogin file.

■ パッケージ更新＆アップグレード

$ sudo apt update && sudo apt upgrade

2. Install Docker

■ ダウンロード

Docker Desktopをダウンロード
※2022/06/28 時点 : Version 4.9.1

■ インストール

インストーラを実行

■ 設定の変更

下記のトグルをONに変更

3. Ubuntu上に作業場所を作成

■ vscodeから作成したディレクトリに入る

下記を選択

「New ESL Window using Distro...」を選択

「Ubuntu-20.04」を選択

■ Ubuntu上に作業ディレクトリを作成

$ cd ~
$ mkdir -p work/php-test

■ vscodeで開く

作成した作業ディレクトリを選択してOK

4. PHPでHello World

■ DockerファイルやPHPファイルを作成

作業ディレクトリに下記の構成でファイルを作成

work
└── php-test
    ├── .devcontainer
    │   └── devcontainer.json
    ├── Dockerfile
    ├── docker-compose.yml
    └── src
        └── index.php

■ devcontainer.json

コンテナ内でもファイルをvscodeで開けるよう設定ファイルを作成

{
    "name": "php8.1",
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],
    "service": "php",
    "workspaceFolder": "/var/www/html",
    "settings": {
        // "editor.fontSize": 32
    },
    "extensions": [
        "xdebug.php-pack"
    ]
}

extensions : ローカルの拡張機能が使用できないため、使用したい拡張機能があれば指定。指定するIDは下記の「Copy Extension ID」でコピーした値。

■ Dockerfile

FROM php:8.1-apache

■ docker-compose.yml

version: '3'

services:
    php:
    container_name: php8.1-test
    build: .
    ports:
        - 8080:80
    volumes:
        - ./src:/var/www/html

■ index.php

<?php echo "Hello World!"; ?>

5. vscodeでコンテナの作業フォルダを再開

■ Reopen in Container

■ PHPのバージョン確認

# php -v 
PHP 8.1.7 (cli) (built: Jun 23 2022 07:54:35) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.7, Copyright (c) Zend Technologies

■ Hello World を表示

http://localhost:8080/ にアクセス

■ vscodeの拡張機能を確認

■ docker周辺の設定を変更した際は再ビルド

$ docker-compose build --no-cache

6. リモート接続終了

7. コンテナ内のWorkspaceを変更

作業ディレクトリに下記の構成でファイルを作成

work
└── php-test2
    ├── .devcontainer
    │   └── devcontainer.json
    ├── Dockerfile
    ├── docker-compose.yml
    └── src
        └── index.php

※「3. Ubuntu上に作業場所を作成」で作成したディレクトリをコピーでOK

$ cp -r php-test/ php-test2

■ devcontainer.json

{
    "name": "php8.1-2",
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],
    "service": "php",
    "workspaceFolder": "/work/php/test2",
    "settings": {
    },
    "extensions": [
        "bmewburn.vscode-intelephense-client",
        "xdebug.php-debug",
        "formulahendry.code-runner"
    ]
}

■ Dockerfile

FROM php:8.1-apache

ARG project_dir=/work/php/test2

# なければ新規作成
WORKDIR $project_dir

CMD [ "php", "-S", "0.0.0.0:8000", "-t", "/work/php/test2" ]

■ docker-compose.yml

version: '3'

services:
    php:
    container_name: php8.1-test2
    build: .
    ports:
        - 8080:8000
    volumes:
        - ./src:/work/php/test2

最近はWeb関連の仕事が多く、CSSやらJSも勉強中です。
PHPは一切触ったことないのでまずはイマドキな感じの環境周りのメモでした。
次はPHPのフレームワークLaravelあたりの記事でも書こうかと思います。

8. 参考

以上、もりもりでした。

AIMEK's blog

2022年7月1日金曜日

PHP + WSL2 + docker on Windows環境構築