laravel sail(docker desktop)とvscode(1) - セットアップ

2023年8月15日 13:35

windows環境にてdocker desktopとwsl2は入っているものとする。

この環境のちょっとややこしい点

それはphpのバージョンの問題であーる。

% sudo apt install -s php-cli                                      
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています... 完了
状態情報を読み取っています... 完了
以下の追加パッケージがインストールされます:
  mailcap mime-support php-common php8.1-cli php8.1-common php8.1-opcache php8.1-readline
提案パッケージ:
  php-pear
以下のパッケージが新たにインストールされます:
  mailcap mime-support php-cli php-common php8.1-cli php8.1-common php8.1-opcache php8.1-readline
アップグレード: 0 個、新規インストール: 8 個、削除: 0 個、保留: 0 個。
Inst mailcap (3.70+nmu1ubuntu1 Ubuntu:22.04/jammy [all])
Inst mime-support (3.66 Ubuntu:22.04/jammy [all])
Inst php-common (2:92ubuntu1 Ubuntu:22.04/jammy [all])
Inst php8.1-common (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Inst php8.1-opcache (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Inst php8.1-readline (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Inst php8.1-cli (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Inst php-cli (2:8.1+92ubuntu1 Ubuntu:22.04/jammy [all])
Conf mailcap (3.70+nmu1ubuntu1 Ubuntu:22.04/jammy [all])
Conf mime-support (3.66 Ubuntu:22.04/jammy [all])
Conf php-common (2:92ubuntu1 Ubuntu:22.04/jammy [all])
Conf php8.1-common (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Conf php8.1-opcache (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Conf php8.1-readline (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Conf php8.1-cli (8.1.2-1ubuntu2.13 Ubuntu:22.04/jammy-updates, Ubuntu:22.04/jammy-security [amd64])
Conf php-cli (2:8.1+92ubuntu1 Ubuntu:22.04/jammy [all])

ま、今はubuntuだから何とかなってんだろうけどdebianとかだとstableでもバージョンがアレだったりといろいろ忙しい、であればもうsailで片付けちゃった方が早いんじゃないかという話(開発チームで環境を揃えるという意味でも)。

最新版は8.2だし、sailを使うと最新版が入る、システムに別reposから最新のphpを入れる方法もあるが、とりあえずそういうのも面倒なのでdockerつかっちゃおうよって話。

入れる

これは過去記事で散々書いてきてはいるんだけど、まいいや、やろう。

% curl "https://laravel.build/example-app?with=mysql" | bash

ちなみに、https://laravel.build/example-app?with=mysql なサイトは結構簡単なシェルスクリプトを出力しているだけなのでまあ見てみるといいかも(パラメータを変えてみたりとかもあり)

sailをupする

コンソールでやってもいいんだけどvscodeとwsl連携できていればvscodeからターミナル起動できるからいいんじゃないだろうかという。

portを変更したい時に関しては以下のように設定してねと。

portを変更したい場合は.envのAPP_PORT=に設定する事
ex.)
 
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:eIAUeyDnGN/T5xazXaUnXyBcLkwgK6PUTgjoNsa7K7s=
APP_DEBUG=true
APP_URL=http://localhost
APP_PORT=8000 # <-

そしたらWSLと接続されている事を確認しつつ、フォルダを開いてさっきのexample_appを開く

するとまあこんな感じになるだろう

そしたらターミナルを開いて

./vendor/bin/sail up

こんな感じになれば、localhostで大抵laravelのwelcomeページが見えるはずであーる。

そうしたらターミナルをもう1つ起動して

./vendor/bin/sail artisan migrate

とか行うと、ちゃんとDBにtable作ってくれると思う、多分。
このように開発用ターミナルを複数起動して右ペインで選択できるのが強みであるとも言えるね。

ちなみに現状では

laravel 10.18.0
php 8.2.8

が入った

vite連携

これはlaravel breezeでもlaravel uiでも、どっちでもいいんだけど、今までずっとlaravel breezeで記事を書いてきたから今回はlaravel uiでも使ってみますか。laravel ui + bootstrap5というややレガシーみのある構成にしてみよう

./vendor/bin/sail composer require laravel/ui

でlaravel uiをinstallして

./vendor/bin/sail artisan ui bootstrap --auth

するとまあこんな風味で出てくるんだけど、そのままnpm run devしてもあんまうまくいかないかもしれない。いずれにせよ、npm installはする

そうするとvite.config.jsというのが出来ているから開く。まあvscodeから開いたらいいでしょう。

おそらく、大抵の場合localhostで開発していると思うから、以下のようにするといい。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// const host = 'example.org';
// const host = process.env.VITE_HOST;
const host = 'localhost';

export default defineConfig({
    server: {
        hmr: { host },
    },
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

まあいろいろコメント書いておいたけど基本的にはlocalhostだけでいいんじゃないかな…

そしたらコンソールで

% ./vendor/bin/sail npm run dev

と入力すると

こんな感じで待ち受けになる。つまり

この開発手法ではコンソール2つを待ち受け状態にしている必要がある(裏に送ってもいいけど、まあせっかくvscodeで画面見れるならどんどん待ち受けちゃっていいんじゃないかな？)

laravel uiで追加された認証画面の確認

以上を踏まえてwelcomeページを表示すると

このように、Log inとか Registerとかが増えている。たとえばLogin画面を押すと…

このようなbootstrapyなデザインの画面が出来ている。

書き換えてみる

これは resources/views/auth/login.blade.php にある。開くと…

これは、まあとりあえず放置して(えっ)

拡張とかもいれたければいれるとして、

ここではそうではなく、何か書き換える

今回はここまで、ってvscodeでlaravelのコードなんてほとんど書いてないやないかーいというんだけどまあwebプログラミングって前段に時間がかかっちゃうからね…

この記事が気に入ったらサポートをしてみませんか？