Zenn
👻

XAMPPを捨ててlaravel開発をvscodeでやるには (wsl2 + devcontainer + laravel sail)

に公開
Laravel
VS Code
devcontainer
Laravel Sail
tech

なぜXAMPPを捨てるのか？

まあ、まずpostgres使えないし...

WSL2という選択肢

wsl2のインストール方法は適当に検索してもらうとして、ここではwsl2内でdockerを使ってdevcontainerでlaravel開発するドキュメントを以下に記していく。

なお、vscodeは日本語化前提で話をすすめる

wsl2内でlaravelコマンドを用意する

これはlaravelプロジェクトを最初から構築する場合、今日日必ず必要なコマンドである。
laravelのプロジェクト作成に関してはwsl2の環境内でphpとcomposerを入れた後laravelコマンドを導入するのがてっとり早い。これは、dockerでやれなくもないんでしょうけど、、、うーん、ちょっと面倒っちゃ面倒だしlaravelコマンドだけ使える用のdockerイメージも無いので何とか作ってみることにする。

インストールしていく

まず、wsl2内でphpコマンドを利用できるようにする

wsl2のシェルから

sudo apt install php-cli

とするとwsl2内にphpがinstallされ、バージョンは8.3が導入された

$ php --version
PHP 8.3.6 (cli) (built: Mar 19 2025 10:08:38) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.3.6, Copyright (c) Zend Technologies
    with Zend OPcache v8.3.6, Copyright (c), by Zend Technologies

このままさらにcomposerもaptしてしまう

sudo apt install composer

$ composer --version
Composer version 2.7.1 2024-02-09 15:26:28

これで準備が整った

laravel installerを取得

composer global require laravel/installer

すると

./.config/composer/vendor/laravel/installer/bin/laravel

こんなところにinstallerが格納される。pathを通してもよいのだが、どうぜプロジェクトを作る時にしか使わないのでここではpathは通していない、このあたりはお好みで。

laravel newする

ここでは適当に moge/ とかいう適当なディレクトリにlaravel一式を作成している。もちろんwsl2内のシェルで行う。

$ ./.config/composer/vendor/laravel/installer/bin/laravel new moge

   _                               _
  | |                             | |
  | |     __ _ _ __ __ ___   _____| |
  | |    / _` |  __/ _` \ \ / / _ \ |
  | |___| (_| | | | (_| |\ V /  __/ |
  |______\__,_|_|  \__,_| \_/ \___|_|


 ┌ Which starter kit would you like to install? ────────────────┐
 │ › ● None                                                     │
 │   ○ React                                                    │
 │   ○ Vue                                                      │
 │   ○ Livewire                                                 │
 └──────────────────────────────────────────────────────────────┘

こんな感じで起動できる。ここではreactとかを選んでいきましたよ。

すると

$ ls moge
app        components.json  database           package.json  resources  tests
artisan    composer.json    eslint.config.js   phpunit.xml   routes     tsconfig.json
bootstrap  config           package-lock.json  public        storage    vite.config.ts

このような形でプロジェクトが生成される

wsl拡張入れる

これによりwsl内のディレクトリが見えるようになる。とりあえずここでlaravelのプロジェクトディレクトリーに辿りついておく。

ここでwslからディレクトリーにたどりついておかないとdevコンテナーで開けんからね。

wsl2内でdocker-composeをinstall

開発自体はdockerコンテナーの中で行うのでwsl2の中にdockerを導入する。windowsのdocker desktopはここでは利用していない。

というわけでwsl2内のtermで

sudo apt install docker-compose

後

sudo adduser <操作ユーザー> docker

とする

sail

sailはdockerの開発イメージとlaravelをうまいこと結合するものである。インストールする必要は実は無く、最初からcomposer.jsonに依存として書かれているものである。

ともあれ、現在のプロジェクトには vendor/ ディレクトリが無いだろうから、いずれにせよ、composer installする

$ composer install
No composer.lock file present. Updating dependencies to latest instead of installing from lock file. See https://getcomposer.org/install for more information.
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - tijsverkoyen/css-to-inline-styles[2.2.5, ..., v2.3.0] require ext-dom * -> it is
missing from your system. Install or enable PHP's dom extension.
    - tightenco/ziggy[v2.4.0, ..., v2.5.3] require laravel/framework >=9.0 -> satisfiable by laravel/framework[v12.0.0, ..., v12.15.0].
    - laravel/framework[v12.0.0, ..., v12.15.0] require tijsverkoyen/css-to-inline-styles ^2.2.5 -> satisfiable by tijsverkoyen/css-to-inline-styles[2.2.5, 2.2.6, v2.2.7, v2.3.0].
    - Root composer.json requires tightenco/ziggy ^2.4 -> satisfiable by tightenco/ziggy[v2.4.0, ..., v2.5.3].

To enable extensions, verify that they are enabled in your .ini files:
    - /etc/php/8.3/cli/php.ini
    - /etc/php/8.3/cli/conf.d/10-opcache.ini
    - /etc/php/8.3/cli/conf.d/10-pdo.ini
    - /etc/php/8.3/cli/conf.d/20-calendar.ini
    - /etc/php/8.3/cli/conf.d/20-ctype.ini
    - /etc/php/8.3/cli/conf.d/20-curl.ini
    - /etc/php/8.3/cli/conf.d/20-exif.ini
    - /etc/php/8.3/cli/conf.d/20-ffi.ini
    - /etc/php/8.3/cli/conf.d/20-fileinfo.ini
    - /etc/php/8.3/cli/conf.d/20-ftp.ini
    - /etc/php/8.3/cli/conf.d/20-gettext.ini
    - /etc/php/8.3/cli/conf.d/20-iconv.ini
    - /etc/php/8.3/cli/conf.d/20-intl.ini
    - /etc/php/8.3/cli/conf.d/20-mbstring.ini
    - /etc/php/8.3/cli/conf.d/20-phar.ini
    - /etc/php/8.3/cli/conf.d/20-posix.ini
    - /etc/php/8.3/cli/conf.d/20-readline.ini
    - /etc/php/8.3/cli/conf.d/20-shmop.ini
    - /etc/php/8.3/cli/conf.d/20-sockets.ini
    - /etc/php/8.3/cli/conf.d/20-sysvmsg.ini
    - /etc/php/8.3/cli/conf.d/20-sysvsem.ini
    - /etc/php/8.3/cli/conf.d/20-sysvshm.ini
    - /etc/php/8.3/cli/conf.d/20-tokenizer.ini
    - /etc/php/8.3/cli/conf.d/20-zip.ini
You can also run `php --ini` in a terminal to see which files are used by PHP in CLI mode.
Alternatively, you can run Composer with `--ignore-platform-req=ext-dom` to temporarily ignore these required extensions.

このようにextensionの足りなさを指摘されるのでphp-xmlをaptする。もちろんwsl2のターミナルからやる

sudo apt install php-xml

こんな感じで導入される。実は表示の通りsailも入っているがツリーに組み込まれていない

sailをインストールし、開発ツリーに組み込む

ここで

php artisan sail:install --devcontainer

すると

 ┌ Which services would you like to install? ───────────────────┐
 │ › ◻ mysql                                                  ┃ │
 │   ◼ pgsql                                                  │ │
 │   ◻ mariadb                                                │ │
 │   ◻ mongodb                                                │ │
 │   ◻ redis                                                  │ │
 └────────────────────────────────────────────────── 1 selected ┘
  Use the space bar to select options.

このようにmysqlを外してpgsqlを選択する。mailpitも付けておくと便利かも。

vscodeを開き直す

こんなのが出る

言われるがままに「コンテナーで再度開」き直すと

こんな感じになる。この時点でlaravel(sail)が起動している

localhostにアクセスしてみると

こうなる。つまりvscodeを起動した時点でlaravelがport80で起動するという挙動になる。

laravelのAPP_KEYをセットしてエラーを解消する

「新しいターミナル」より

php artisan key:generate

と入力してenterするとキーがセットされるはずだ

localhostにアクセスするとエラーの種類が変更される

これはフロントエンドがどうにもなってない事を示唆するエラーなので、どうにかして行く。

npmの問題

開発コンテナーの中にnpmはコマンドとして導入されているのでnpm installすればokだ。以下のコマンドをvscodeのターミナルから入力する

npm install


必須ライブラリーがインストールされたはずだ

run devモード(HMR)

これはVSCODEでもう1つターミナルをひらいて

npm run dev

と入力しEnterする

すると

こんな感じになってwelcomeページが起動してくる

HMRが効いているかチェックする

welcomeページを軽く編集してHMRが効いているのかどうかチェックしよう。

こんな感じで「welcome」とか打ってwelcome.tsxを発見する

Ctrl+FでLet's get startedとかで検索して当該に飛ぶ、あるいはreactなら44行目くらい

Ctrl+sとかで保存したら即座に変更されるかチェック

このときコンソールに

hmr updateとか出ていればok

DBのmigrate

一応.envを確認しておく

DB_CONNECTION=pgsql
DB_HOST=pgsql
DB_PORT=5432
DB_DATABASE=laravel
DB_USERNAME=sail
DB_PASSWORD=password

とかになっていること。割とdefaultがmysqlなので落とし穴があるが正しくpgsqlにセットすること

ターミナルを上げてmigrate

php artisan migrate


   INFO  Running migrations.  

  0001_01_01_000000_create_users_table ....................................... 16.18ms DONE
  0001_01_01_000001_create_cache_table ........................................ 5.81ms DONE
  0001_01_01_000002_create_jobs_table ........................................ 10.59ms DONE


   INFO  Seeding database.

こんな感じになるはずだ

この時点でログインできるようになっている

  • test@example.com
  • password


ログインした

ポスグレのシェルに入るとかDBのローレベルの操作

これはwsl2から入った方が便利だと思うけどねえ

まあ、あるいはSQLToolとかの導入も考えてみましょう

Discussion