🔥

WSL2を使って、Laravel Sailで環境構築

2023/12/11に公開

背景

もともとLaravelで開発したものを、Sailに移行するうえで、いろいろな記事を見ながら行ったので、行う順にまとめなおした。

前提

・Windows
・PHP8.3
・Laravel10
・Inertia.js1.0(React、typescript)

WSL2・Linuxをインストール

下記を参考に。
https://chigusa-web.com/blog/wsl2-win11/

Docker Desktopをインストール

下記を参考に。
https://chigusa-web.com/blog/windowsにdockerをインストールしてpython環境を構築/
Pythonのインストールは不要。

ディレクトリの準備

普通にPC上のそこらへんのディレクトリで開発をすると、起動した開発中のアプリがめちゃくちゃ遅くなる。
対策として、
デフォルトの/mnt/~~~ではなく、
/home/~~~に、開発用のディレクトリを設置する。
下記の記事を参考にした。
https://www.aska-ltd.jp/jp/blog/197

コードの準備

Ubuntsu(wsl)のターミナルで、
/home/<user_name>
で、git cloneでソースコードを持ってくる。

この状態だと、vendorがないので、composer install をしたいが、
php、composerがない場合は、

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php83-composer:latest \
    composer install --ignore-platform-reqs

で、composer install を実行する。

.envがないはずなので、.env.exampleをコピーするなどして作成。
DB_DATABASE,DB_USERNAME,DB_PASSWORDはこれまでのSailを使わないときに使っていたものと同じでOK。(違ってもいいはず)
ここに入力した情報を参照してテーブルが作られる。

git cloneで持ってきたコードのcomposer.jsonにsailが含まれない(これからsailの構築をする場合)は、

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php83-composer:latest \
    composer require laravel/sail --dev

を実行。

また、docker-compose.ymlがない場合は、

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php83-composer:latest \
    php artisan sail:install

を実行。
このとき、デフォルトだとmysqlになるが、今回pgsqlにしたい。
ただ、追加するDB等の選択ができなかったので、

php artisan sail:install --with=pgsql

に変えるとpgsqlになる。

下記の記事を参考にした。
https://zenn.dev/wadakatu/articles/afc2c86306ca88

sailの立ち上げ

./vendor/bin/sail up

でSailを立ち上げられる。
が、これをイチイチ打つのは面倒なので、

vim ~/.bashrc

で、.bashrcファイルの末尾に、

alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'

を追記して、エイリアスを設定。
これで、

sail up

で立ち上げられるようになる。
※初回はめっちゃ時間かかるかも。

基本的には、

sail up -d

-d でバックグラウンドにしたのは、続けてphp artisan や npm のコマンドを打つから。

sail ~~ で諸々の準備

sail artisan migrate

で、DBの用意。適宜Seederも。

sail npm install

で、node_modulesを入れる。

そしたら、Inertia.jsを起動するため、
.env で

APP_URL=http://localhost/

があるのを確認した上で、

sail npm run dev

※これを実行するとき、sail upでコンテナが動いている前提。

ただ、これだけだと、画面が真っ白。
なので、
vite.config.tsに、

server: {
        hmr: {
            host: 'localhost',
        },
    },

を追記。
下記の記事を参考にした。
https://qiita.com/r2katayama/items/a6f8166f43aa339f29ba

完了

これで、
http:localhost/
にアクセスできる。

pgAdminを使う場合

pgAdminを使う場合、
下記の記事を参考に、.envと、docker.compose.ymlを編集。
https://chigusa-web.com/blog/laravel-sail-postgresql/
sail upして、
localhost:8888
にアクセスするとpgAdminが開ける。
.envで設定する、pgAdminのメールアドレスとPWでログインして、serverを作成すると、
migrateで作成したテーブルが確認できる。

+α

Docker(Sail)を使えば、
MinIOをいれれば、開発環境用にS3のバケットを用意しなくてよかったり、
Mailpitをいれれば、Mailtrapとかを使わなくてもメール送信の確認ができたり、
する模様。
今回はすでに実装済みのものを移管したので、使わないが、また今度最初から立ち上げる場合はやってみたい

https://readouble.com/laravel/10.x/ja/sail.html

Discussion