🧟

[PHP]Laravel 11をGlitchで動かす(FrankenPHP)

2024/06/07に公開

TL;DR

https://glitch.com/edit/#!/remix/glitch-hello-website

$ curl -fsSL https://tkithrta.gitlab.io/u/glitch-laravel.sh | bash

Intro

https://readouble.com/laravel/11.x/ja/releases.html

https://frankenphp.dev/

https://caddyserver.com/

最近PHPの世界ではFrankenPHPというCaddyにPHPモジュールを組み込んだワンバイナリで動くWebサーバーが登場したりLaravel 11のDBでSQLiteがデフォルトで使用されるようになったり、様々なOSで簡単に開発を始めることができる環境が整い始めてきました。

https://glitch.com/

ではアカウントがなくてもアクセスするだけで簡単にBashやLinuxコマンドが使えるGlitchでもLaravel 11を動かせるのは? と思い試しにやってみたところ、ある程度簡単に動かせることが分かったので紹介したいと思います。

  • FrankenPHP 1.2.0
  • Laravel 11.10.0
  • Composer 2.7.6
  • PHP 8.3.7

glitch-laravel.sh

$ curl https://tkithrta.gitlab.io/u/glitch-laravel.sh

こんな感じのコマンドが表示されます。

cd
curl -Lo bin/frankenphp --create-dirs https://github.com/dunglas/frankenphp/releases/latest/download/frankenphp-linux-x86_64
chmod 755 bin/frankenphp
curl -Lo phars/composer.phar --create-dirs https://getcomposer.org/download/latest-stable/composer.phar
frankenphp php-cli ~/phars/composer.phar create-project laravel/laravel --no-scripts example-app
echo -e '/bin\n/phars\n/example-app/vendor\n/example-app/composer.lock' > .gitignore
echo '{"scripts":{"start":"frankenphp php-server -r ~/example-app/public -l :${PORT:-3000}"}}' > package.json
cd ~/example-app
cp .env.example .env
frankenphp php-cli artisan key:generate --ansi
touch database/database.sqlite
frankenphp php-cli artisan migrate --graceful --ansi
cd && rm -rf .cache .git && refresh

順番に紹介していきます。

cd
curl -Lo bin/frankenphp --create-dirs https://github.com/dunglas/frankenphp/releases/latest/download/frankenphp-linux-x86_64
chmod 755 bin/frankenphp
curl -Lo phars/composer.phar --create-dirs https://getcomposer.org/download/latest-stable/composer.phar

まず最初にcdコマンドでホームディレクトリをカレントディレクトリにします。
その後、FrankenPHPをcurlでbinディレクトリにダウンロードしてきて、実行権限をつけます。
Composerのpharファイルも同様にcurlでpharsディレクトリにダウンロードします。

frankenphp php-cli ~/phars/composer.phar create-project laravel/laravel --no-scripts example-app

FrankenPHPのphp-cliコマンドを使いComposerを動かして、laravelのプロジェクトを作成します。

https://laravel.com/docs/11.x/installation

composer create-project laravel/laravel example-app

Laravel公式ドキュメントでよく見る上記コマンドと同じ働きをしますが、このままだとcomposer.json内のpost-root-package-installコマンドを実行するときにFrankenPHPのphp-cliコマンドを呼び出せずエラーが出てしまうので、--no-scriptsオプションで呼び出さないようにします。

echo -e '/bin\n/phars\n/example-app/vendor\n/example-app/composer.lock' > .gitignore
echo '{"scripts":{"start":"frankenphp php-server -r ~/example-app/public -l :${PORT:-3000}"}}' > package.json

Glitchで必要な.gitignoreファイルとpackage.jsonファイルを用意します。

/bin
/phars
/example-app/vendor
/example-app/composer.lock

.gitignoreファイルに上記ディレクトリを追加しておかないと巨大なファイルやディレクトリを読み込みブラウザがフリーズしてしまいます。

{"scripts":{"start":"frankenphp php-server -r ~/example-app/public -l :${PORT:-3000}"}}

package.jsonファイル内ではFrankenPHPのphp-serverコマンドを使いホームディレクトリにあるexample-appプロジェクトのpublicフォルダ内のindex.phpを3000ポートから起動できるようにします。
Glitchでは環境変数PORTに3000が設定されているので環境変数で設定しましょう。

frankenphp help php-server
$ frankenphp help php-server

A simple but production-ready PHP server. Useful for quick deployments,
demos, and development.

The listener's socket address can be customized with the --listen flag.

If a domain name is specified with --domain, the default listener address
will be changed to the HTTPS port and the server will use HTTPS. If using
a public domain, ensure A/AAAA records are properly configured before
using this option.

For more advanced use cases, see https://github.com/dunglas/frankenphp/blob/main/docs/config.md

Usage:
  caddy php-server [--domain <example.com>] [--root <path>] [--listen <addr>] [--worker /path/to/worker.php<,nb-workers>] [--access-log] [--debug] [--no-compress] [--mercure] [flags]

Flags:
  -a, --access-log           Enable the access log
  -v, --debug                Enable verbose debug logs
  -d, --domain string        Domain name at which to serve the files
  -h, --help                 help for php-server
  -l, --listen string        The address to which to bind the listener
  -m, --mercure              Enable the built-in Mercure.rocks hub
      --no-compress          Disable Zstandard, Brotli and Gzip compression
  -r, --root string          The path to the root of the site
  -w, --worker stringArray   Worker script

Full documentation is available at:
https://caddyserver.com/docs/command-line
cd ~/example-app
cp .env.example .env
frankenphp php-cli artisan key:generate --ansi
touch database/database.sqlite
frankenphp php-cli artisan migrate --graceful --ansi

https://github.com/laravel/laravel/blob/11.x/composer.json#L40-L47

これはカレントディレクトリをプロジェクト内に変更し、先程呼び出さなかったpost-root-package-installコマンドとpost-create-project-cmdコマンドをLinuxコマンドやartisanコマンドから呼び出すようにしたものです。

https://frankenphp.dev/docs/laravel/

FrankenPHPドキュメントのLaravelページでも詳しく紹介されています。

https://frankenphp.dev/docs/known-issues/#composer-scripts-referencing-php

一応composer.json内の@phpから始まるコマンドはBashでhackyなコードを書き環境変数を設定すれば使えないことはないようです。

cd && rm -rf .cache .git && refresh

最後にホームディレクトリに戻って.gitディレクトリと.cacheディレクトリを削除してリフレッシュすればpackage.json内のstartスクリプトが自動的に実行されます。
なお、削除したディレクトリはGlitchを動かしているといつの間にか作成、肥大化していることが多いので、定期的に上記コマンドを叩きリフレッシュしてあげましょう。

{"level":"warn","ts":1717686635.7849231,"logger":"admin","msg":"admin endpoint disabled"}
{"level":"info","ts":1717686635.7852721,"msg":"FrankenPHP started 🐘","php_version":"8.3.7","num_threads":1}
{"level":"info","ts":1717686635.7853768,"logger":"http.log","msg":"server running","name":"php","protocols":["h1","h2","h3"]}
{"level":"info","ts":1717686635.7853878,"msg":"Caddy serving PHP app on :3000"}
{"level":"info","ts":1717686635.7854626,"logger":"tls.cache.maintenance","msg":"started background certificate maintenance","cache":"0xc000646e00"}
{"level":"info","ts":1717686635.8174589,"logger":"tls","msg":"cleaning storage unit","storage":"FileStorage:/app/.local/share/caddy"}
{"level":"info","ts":1717686635.8176012,"logger":"tls","msg":"finished cleaning storage units"}

Glitchのログにこのような表示があれば正常に動いています。

laravel

Laravel 11をGlitchで動かせるようになりました。
FrankenPHPとSQLiteのおかげです。

Outro

PHPとLaravelはFrankenPHPとSQLiteのおかげで驚くほど簡単に始めることができるようになりました。
ぜひ皆さんGlitchでこの素晴らしい開発体験を試してみてください。

Discussion