メモ | refirio.org

Memo

初期設定
■環境の調整

Sail環境の現状を確認する。
タイムゾーンがUTCで、文字コードがlatin1になっている箇所があるので調整する。

$ sail shell
$ date
Tue Apr  2 09:25:59 UTC 2024
$ exit
$ sail mysql
> SELECT NOW();
+---------------------+
| NOW()               |
+---------------------+
| 2024-04-13 11:07:14 |
+---------------------+
1 row in set (0.00 sec)

> SHOW VARIABLES LIKE '%char%';
+--------------------------+--------------------------------+
| Variable_name            | Value                          |
+--------------------------+--------------------------------+
| character_set_client     | latin1                         |
| character_set_connection | latin1                         |
| character_set_database   | utf8mb4                        |
| character_set_filesystem | binary                         |
| character_set_results    | latin1                         |
| character_set_server     | utf8mb4                        |
| character_set_system     | utf8mb3                        |
| character_sets_dir       | /usr/share/mysql-8.0/charsets/ |
+--------------------------+--------------------------------+
8 rows in set (0.00 sec)

mysql> QUIT


Sail環境をカスタマイズする。
以下のコマンドを実行すると、dockerフォルダ内にDocker用のファイルが出力され、これを編集することでSail環境をカスタマイズできる。
また docker-compose.yml も編集され、vendor/laravel/sail/runtimes/8.3 内ではなく docker/8.3 内のファイルが参照されるようになる。

$ sail artisan sail:publish


以下のとおり、タイムゾーンと文字コードを変更する。

docker/8.3/Dockerfile
ENV TZ=UTC
↓
ENV TZ="Asia/Tokyo"


docker/8.3/my.cnf（新規に作成。）
[mysqld]
character-set-server = utf8mb4
collation-server = utf8mb4_bin
default-time-zone = 'Asia/Tokyo'

[client]
default-character-set = utf8mb4


docker-compose.yml
        volumes:
            - 'sail-mysql:/var/lib/mysql'
↓
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './docker/8.3/my.cnf:/etc/my.cnf'


Dockerfileを編集したので、ビルドし直す。

$ sail down
$ sail build
$ sail up -d


完了したら、変更を確認する。
タイムゾーンがJSTで、文字コードがutf8mb4になっていることを確認できる。

$ sail shell
$ date
Sat Apr 13 20:20:07 JST 2024
$ exit
$ sail mysql
mysql> SELECT NOW();
+---------------------+
| NOW()               |
+---------------------+
| 2024-04-13 20:20:38 |
+---------------------+
1 row in set (0.00 sec)

mysql> SHOW VARIABLES LIKE '%char%';
+--------------------------+--------------------------------+
| Variable_name            | Value                          |
+--------------------------+--------------------------------+
| character_set_client     | utf8mb4                        |
| character_set_connection | utf8mb4                        |
| character_set_database   | utf8mb4                        |
| character_set_filesystem | binary                         |
| character_set_results    | utf8mb4                        |
| character_set_server     | utf8mb4                        |
| character_set_system     | utf8mb3                        |
| character_sets_dir       | /usr/share/mysql-8.0/charsets/ |
+--------------------------+--------------------------------+
8 rows in set (0.01 sec)

mysql> QUIT
■デバッグバーの導入

Laravel Debugbarをインストールする。

$ sail composer require barryvdh/laravel-debugbar --dev
■認証機能の作成

Laravel Breezeをインストールする。

$ sail composer require laravel/breeze --dev
$ sail artisan breeze:install

 Which Breeze stack would you like to install?
 Blade with Alpine

 Would you like dark mode support?
 No

 Which testing framework do you prefer?
 PHPUnit

$ sail artisan migrate

  Creating migration table ................................................................................ 238ms DONE

  2014_10_12_000000_create_users_table .................................................................... 374ms DONE
  2014_10_12_100000_create_password_reset_tokens_table .................................................... 440ms DONE
  2019_08_19_000000_create_failed_jobs_table .............................................................. 411ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ................................................... 443ms DONE
■日本語化

GitHub - askdkc/breezejp
https://github.com/askdkc/breezejp$ sail composer require askdkc/breezejp --dev
$ sail artisan breezejp
Laravel Breeze用に日本語翻訳ファイルを準備します
config/app.phpのlocaleをjaにします

 GitHubリポジトリにスターの御協力をお願いします (yes/no) [yes]:
 > yes

sh: 1: xdg-open: not found
Thank you! / ありがとう
日本語ファイルのインストールが完了しました!


lang/ 内に日本語用のファイルが作成されている。
また config/app.php が以下のとおり変更されている。

    'timezone' => 'UTC',
    'locale' => 'en',
    'faker_locale' => 'en_US',
↓
    'timezone' => 'Asia/Tokyo',
    'locale' => 'ja',
    'faker_locale' => 'ja_JP',
■見た目の修正

見た目を修正したら、以下を実行してアセットをコンパイルする。
実行中は他のコマンドを入力できなくなるため、別タブでコマンドを入力するといい。

$ sail npm run dev


本番環境用にビルドする場合、以下を実行する。
これにより public/build 内にコンパイル済みのファイルが作成される。

$ sail npm run build


なお、bladeファイル内でclassを追加するだけであっても、コンパイルされないと正しく反映されない可能性があるので注意。

Tailwind CSS とは｜Tailwind CSS 入門と実践
https://zenn.dev/yohei_watanabe/books/c0b573713734b9/viewer/275f32

記事内に

> Tailwind CSSには汎用的なクラスがたくさん用意されていますが、実稼働用にビルドする際には、未使用のクラスは自動的に全て削除されます。
> つまり、使っているクラスしかCSSファイルに出力されないので、最小のCSSファイルが生成されるということです。
> これにより、パフォーマンスの向上を見込むことができます。

と書かれているが、この機能の影響で
「それまで使われていなかったクラスはCSSファイルに含まれていない」
となっているためだと思われる。
Memo

Advertisement
