Laravel入門 WSL2でのLaravel環境構築(第3回)

2021-01-01
11 min read

開発環境をwindowsのWSL2で用意します。

はじめに

今回、PHPの開発環境として、WindowsのWSL2にてLinuxOSのUbuntuをインストールし、Ubuntu上にPHP、Apache、PostgreSQLを用意します。

従来、WindowsでPHPを用いてWebシステムを開発するときは、Windows上にApache、PostgreSQLなどをインストールして開発していました。しかし、本番運用は、WindowsではなくLinuxサーバーです。開発環境では動作していたものが本番環境では動作しないということがよく起こっていました。

それならば、最初からLinux上で開発をすればということになりますが、Linuxマシン1台だけでは不便なこともありWindowsとの併用で2つのマシンが必要となっていました。

しかし、最新のWindowsで導入されたWSL2とVSCODEのリモート開発拡張機能によって、Windowsマシン1台でLinuxでの開発環境を用意することができるようになりました。

WSL2のインストール

公式サイトにインストール手順が記載されています。 下記のページの「手動インストールの手順」に沿ってインストールを行ってください。

https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

手順は下記の1から6になります。

  • 手順 1: Linux 用 Windows サブシステムを有効にする
  • 手順 2: WSL 2 の実行に関する要件を確認する
  • 手順 3: 仮想マシンの機能を有効にする
  • 手順 4: Linux カーネル更新プログラム パッケージをダウンロードする
  • 手順 5: WSL 2 を既定のバージョンとして設定する
  • 手順 6: 選択した Linux ディストリビューションをインストールする

手順の中で、「管理者として PowerShell を開く」という指示があります。開き方は下記になります。

  • [Windows]+[R]キーで、[ファイル名を指定して実行]ダイアログを開きます。
  • powershell と入力
  • [Shift]+[Ctrl]キーを押しながら[Enter]キーを押します。(管理者としてPowerShellが起動)

もしくは、Winアイコンを右クリックしてメニューから「Windows Power Shell (管理者)を選んでください

初回のユーザー作成

手順6完了後に、スタートメニューから Ubuntu を選んで起動します。 コマンドプロンプトの画面が開き、ユーザー作成となります。

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: 

ID:developer

New password:
Retype new password:

Password:developer

vscode

Visual Studio Code(以下"VSCode"とする)とは、Windowsの開発元であるMicrosoftが開発したオープンソースの開発環境です。このVSCodeが優れているのは、追加機能にて、リモートOSにログインして開発ができることです。

インストール

下記からダウンロードしてインストールしてください。

https://code.visualstudio.com/

リモート開発拡張機能(Remote Development extensions)の追加

VSCodeに、「Remote development in WSL」という追加の拡張機能をインストールします。 VSCodeを起動している場合は、一旦、終了してください。

下記にアクセスして、Installをクリックしてください。 https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

Visual Studio Codeを開きますか? と確認ダイアログが表示されます。 Visual Studio Codeを開くをクリックしてください。

VSCODEが起動して、画面右下にInstall and Reload のボタンが表示されるのでクリックします。

ubuntu

ubuntuにログインして、必要なアプリなどをインストールしていきます。

WSL2上のubuntuにログイン

VSCODE メニューバーのTerminalのNew Terminal を選んでください。 画面下部に下記が表示されます。

To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

developer@Ryzen:~$ 

developer@Ryzen:~$ の @の前にあるdeveloperがユーザー名、@の後ろのRyzenがマシン名になります。マシン名は各自異なります。変更したい場合は、Windowsの設定にて、「PC名を表示する」を検索してください。すると「このPCの名前」を変更というボタンが現れますので、そこで変更できます。

もしくは、PowerShell を開いて、下記のコマンドを入力することでubuntuにログインできます。

WSL

ログイン直後のカレントディレクトリは、 /mnt/c/Users/XXXXXX$ です。(XXXXXはユーザー名) Ubuntuのホームディレクトリに移動します。

developer@<Ryzen>:/mnt/c/Users/XXXXXX$ CD ~

パッケージのアップグレード

Linuxでは、アプリはパッケージ管理システムで管理されています。 パッケージリストを最新にして、アップデートされたアプリを更新します。

developer@<Ryzen>:~$ sudo apt -y update && sudo apt -y upgrade
[sudo] password for developer: 

アプリのインストールなどはルートの権限が必要なためsudoにてコマンドを実行します。 コマンド実行時にパスワードの入力を求められますので、パスーワードを入力してくだdさい。

追加アプリ

通常のアプリで追加が必要となってくるようなものをインストールします。

developer@<Ryzen>:~$ sudo apt -y install supervisor \
libcap2-bin \
curl \
sqlite3 \
git \
libzip-dev zip unzip \
postgresql-client \
libpq-dev \
libicu-dev \
locales \
libmcrypt-dev \
libfreetype6-dev \
libjpeg-turbo8-dev \
libpng-dev \
libwebp-dev

apache をインストール

apache2をインストールします。

developer@<Ryzen>:~$ sudo apt -y install apache2

グループ追加

ログインユーザーのdeveloperwww-dataに所属させます。 www-dataグループは、apacheの実行ユーザーのグループです。 -aG オプションで現在の副グループにグループを追加できます。

developer@<Ryzen>:~$ sudo usermod -aG www-data developer

グループの追加を反映させるためには、VSCODEを再起動します。

developerが所属するグループの一覧にwww-dataが含まれているかを確認します。

developer@Ryzen:~$ id 
uid=1000(developer) gid=1000(developer) groups=1000(developer),4(adm),20(dialout),24(cdrom),25(floppy),27(sudo),29(audio),30(dip),33(www-data),44(video),46(plugdev),117(netdev)

33(www-data)が表示されています。

ディレクトリの設定

apacheの公開ディレクトリー(document root)である/var/www/htmlの所有者を developer 所有グループをwww-dataに変更します。 また、権限を755に変更します。

developer@<Ryzen>:~$ sudo chown -R developer:www-data /var/www/html
developer@<Ryzen>:~$ sudo chmod -R 755 /var/www/html

apacheの起動と動作確認

apacheを再起動させます。

sudo service apache2 restart

ブラウザで『http://localhost/』にアクセスします。

下記の Apache2 Ubuntu Default Page が表示されればOKです。

Apache2 Ubuntu Default Page

PHPをインストール

php7.4をインストールします。

developer@<Ryzen>:~$ sudo apt -y install php7.4

PHPの拡張モジュールをインストールします。

PHPには、PHPを拡張するためのモジュールがあります。 通常、いくつかのモジュールをインストールすることになります。

Laravel のシステム要件

Laravelでは、以下の拡張モジュールが必要と公式ドキュメントに記載されています。

  • BCMath PHP拡張
  • Ctype PHP拡張
  • Fileinfo PHP拡張
  • JSON PHP拡張
  • Mbstring PHP拡張
  • OpenSSL PHP拡張
  • PDO PHP拡張
  • Tokenizer PHP拡張
  • XML PHP拡張

インストール済みのphp拡張モジュールを調べます。

現状、インストール済みのphp拡張モジュールを調べます。

developer@<Ryzen>:~$ php -m
[PHP Modules]
calendar
Core
ctype
date
exif
FFI
fileinfo
filter
ftp
gettext
hash
iconv
json
libxml
openssl
pcntl
pcre
PDO
Phar
posix
readline
Reflection
session
shmop
sockets
sodium
SPL
standard
sysvmsg
sysvsem
sysvshm
tokenizer
Zend OPcache
zlib

[Zend Modules]
Zend OPcache

不足しているphp拡張モジュールを特定します。

先程の表示されたリストと必要となるリストを照らし合わせてチェックします。

  • BCMath PHP拡張 =>
  • Ctype PHP拡張 => ctype OK
  • Fileinfo PHP extension => fileinfo OK
  • JSON PHP拡張 => json OK
  • Mbstring PHP拡張 =>
  • OpenSSL PHP拡張 => openssl OK
  • PDO PHP拡張 => PDO OK
  • Tokenizer PHP拡張 => tokenizer OK
  • XML PHP拡張 =>

以下が追加でインストールが必要なPHP拡張モジュールです。

  • BCMath PHP拡張
  • Mbstring PHP拡張
  • XML PHP拡張

拡張モジュールの追加

不足しているPHP拡張モジュールに加えて、よく使われる拡張モジュールも追加します。

developer@<Ryzen>:~$ sudo apt -y install php7.4-cli \
php7.4-dev \
php7.4-pgsql \
php7.4-sqlite3 \
php7.4-gd \
php7.4-curl \
php7.4-memcached \
php7.4-imap \
php7.4-mysql \
php7.4-mbstring \
php7.4-xml \
php7.4-xmlrpc \
php7.4-zip \
php7.4-bcmath \
php7.4-soap \
php7.4-intl \
php7.4-ldap \
php7.4-redis \
php7.4-uuid \
php7.4-pcov \
php7.4-msgpack \
php7.4-igbinary 

apacheを再起動させます。

sudo service apache2 restart

PHP動作確認用の画面作成

/var/www/html/html/index.phpの作成

メニューバーのFile の NewFile をクリックします。 下記を入力します。

<?php
phpinfo();
?>

メニューバーのSave As で、/var/www/html/html/index.php で保存します。

ブラウザで『http://localhost/index.php』にアクセスします。

下記が表示されれば、PHPが正常にインストールできています。

PHP INFO

PostgreSQLのインストール

PostgreSQLと追加のアドオンをインストールします。

developer@Ryzen:~$ sudo apt -y install postgresql postgresql-contrib

バージョンを確認します。

developer@Ryzen:~$ psql --version
psql (PostgreSQL) 12.5 (Ubuntu 12.5-0ubuntu0.20.04.1)

PostgreSQLの起動

PostgreSQLを起動します。

developer@Ryzen:~$ sudo service postgresql start
 * Starting PostgreSQL 12 database server                                                                                                                                                                 [ OK ] 

ユーザー作成 & DB作成

ログインユーザーのdeveloperから、postgres の管理者にスイッチします。

developer@Ryzen:~$ sudo -i -u postgres

PostgreSQLにdeveloperというユーザーを追加します。 パスワードはdeveloperにしてください。

postgres@Ryzen:~$ createuser developer -P 
Enter password for new role: 
Enter it again: 

todoという名称のデータベースを作成します。

postgres@Ryzen:~$ createdb -O developer todo

念のためtodoが作成されたかを確認します。 確認のため psql というpostgresのツールにログインします。 psqlは、データの追加や取得をするためのコマンドラインベースのツールです。

postgres@Ryzen:~$ psql 
psql (12.5 (Ubuntu 12.5-0ubuntu0.20.04.1))
Type "help" for help.

postgres=#

データーベース一覧を表示します。 \lを入力してenter を押してください。

postgres=# \l
                              List of databases
   Name    |  Owner   | Encoding | Collate |  Ctype  |   Access privileges
-----------+----------+----------+---------+---------+-----------------------
 postgres  | postgres | UTF8     | C.UTF-8 | C.UTF-8 |
 template0 | postgres | UTF8     | C.UTF-8 | C.UTF-8 | =c/postgres          +
           |          |          |         |         | postgres=CTc/postgres
 template1 | postgres | UTF8     | C.UTF-8 | C.UTF-8 | =c/postgres          +
           |          |          |         |         | postgres=CTc/postgres
 todo      | dev      | UTF8     | C.UTF-8 | C.UTF-8 |
(4 rows)

todo があることが確認できました。

ツールからログアウトします。

postgres=# exit

テーブル作成

postgresSQLのユーザーとして、developer を作成したので、現在のpostgresをログアウトします。

postgres@Ryzen:~$ exit
logout

psqlでtodoにログインします。

psql -d todo 

テーブルを作成します。

todo=> create table tasks (
  id bigserial not null
  , title character varying(40) not null
  , status integer not null
  , description character varying(200)
  , created_at timestamp
  , updated_at timestamp
  , constraint tasks_PKC primary key (id)
) ;

テーブル一覧を表示します。

todo=> \dt
         List of relations
 Schema | Name  | Type  |   Owner   
--------+-------+-------+-----------
 public | tasks | table | developer
(1 row)

tasks テーブルが作成されていることが確認できました。 もし、名前を間違った場合は、drop table tasks; とテーブルを削除できます。

データ登録

データを4件登録します。1件ずつ登録してください。

todo=> INSERT INTO tasks (title,status,description) VALUES ('bitcoinの半減期を調べる',1,'bitcoinの半減期と価格の相関性を調べる');
todo=> INSERT INTO tasks (title,status,description) VALUES ('サンフランシスコ旅行',1,'サンノゼ空港からパロ・アルトへの行き方を調べる');
todo=> INSERT INTO tasks (title,status,description) VALUES ('アクアパッツァ',1,'再来週の食事会のためにアクアパッツァの作り方を学ぶ');
todo=> INSERT INTO tasks (title,status,description) VALUES ('サンフランシスコ行きの航空券',1,'羽田からサンノゼ空港行きのチケットを予約');

レコードの状況を確認します。

todo=> select * from tasks;
 id |            title             | status |                    description                     | created_at | updated_at 
----+------------------------------+--------+----------------------------------------------------+------------+------------
  1 | bitcoinの半減期を調べる      |      1 | bitcoinの半減期と価格の相関性を調べる              |            | 
  2 | サンフランシスコ旅行         |      1 | サンノゼ空港からパロ・アルトへの行き方を調べる     |            | 
  3 | アクアパッツァ               |      1 | 再来週の食事会のためにアクアパッツァの作り方を学ぶ |            | 
  4 | サンフランシスコ行きの航空券 |      1 | 羽田からサンノゼ空港行きのチケットを予約           |            | 
(4 rows)

4件登録できています。

確認できればEXITします。

postgres@Ryzen:~$ exit
logout

自動起動設定

windows再起動時などにApacheとPostgresqlを自動で起動するように設定します。

ファイルエクスプローラーでStartupフォルダを開く

  • Win+R で『ファイル名を指定して実行』を開く
  • shell:startup を入力してEnter

batファイル作成

  • XXXX.batファイルを作成する。(XXXXは任意の名前)
  • XXXX.batファイルは、以下の内容とする。
@echo off
wsl -d Ubuntu-20.04 -u root -- service apache2 start
wsl -d Ubuntu-20.04 -u root -- service postgresql start

通常、Ubuntuではsystemctlで自動起動の設定をするのですが、WSL2ではsystemctlが「PID 1」として起動されていないため設定が行えません。これを回避する方法として、systemctlを「PID 1」として起動させるツール「arkane-systems/genie」というものがあります。しかし、インストールが面等なため上記の方法で対応します。

composer

PHP関連のライブラリを管理するcomposerをインストールします。 Laravelは、composerを通してインストールすることになります。

developer@Ryzen:~$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');";
developer@Ryzen:~$ sudo php composer-setup.php --install-dir=/usr/bin --filename=composer;
developer@Ryzen:~$ composer -v
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.0.13 2021-04-27 13:11:08

次回からの apache & postgreSQL 起動

Windowsを終了させると、Ubuntuも停止するため起動していたapacheとpostgreSQLも停止します。 windowsを起動する度に、apacheとpostgreSQLも起動する必要があります。

手間であればWindowsの起動と共に起動させるように設定することもできます。

Dockerについて

最近では、開発環境を構築するのにDockerというコンテナツールが使われることが多いです。 私自身は、Dockerで構築したコンテナ上で、VSCODEのリモートコンテナ開発を利用して開発をしています。 しかも、DockerはLinuxマシンで動作させています。

構成図