投稿者: oki2a24

カテゴリー
Linux コンピューター

WLS2 の Docker コンテナ内の Laravel9.2 Vite SPA 。 `npm run dev` 時に Docker ホストのウェブブラウザからコンテナ内の Vite 開発サーバに繋がるようにした記録

ウェブページのソースコードに Vite 開発サーバへの URL が適切に埋め込まれるように設定することができた。

直面した問題

環境

npm run prod の場合は、静的ファイルを書き出してそのファイルへのリンクを HTML ファイルへ埋め込むようになっています。よって、ビルドされたファイルへのリンクは Laravel へアクセスするときの Apache なり Nginx なり PHP ビルトインサーバなりの URL と同じ URL が埋め込まれ、この URL でアクセスできるため問題はありません。

一方で、 npm run dev の場合は、 Vite の開発サーバが別途立ち上がります。そして Vite でビルドされたファイルへアクセスするための埋め込みリンクは、 Vite の開発サーバの URL となります。 Docker を使う場合、 Docker ホスト側から Docker コンテナ内の Vite 開発サーバへどうやってアクセスするのかが、問題になりました。

例えば、カスタマイズしていない vite.config.js で npm run dev すると次のようになります。

  1. URL は次のように表示された。
    • VITE ➜ Local: http://localhost:5173/
    • LARAVEL ➜ APP_URL: http://localhost
  2. Docker ホストにて、ウェブブラウザで http://localhost/ にアクセスすると画面真っ白になった。
  3. ページのソースコードを見てみると、 Vite でビルドされたファイルへのリンクは <script type="module" src="http://127.0.0.1:5173/resources/js/app.js"></script> となっていた。この URL にアクセスしてみても ERR_CONNECTION_REFUSED のエラーページとなった。
  4. Docker コンテナの port に "5173:5173" を追加し、再度 http://127.0.0.1:5173 へのアクセスを試したところ、異なるエラー ERR_EMPTY_RESPONSE となったもののやはりエラーページとなった。

今回、これを解決しましたのでメモいたします。

続きを読む “WLS2 の Docker コンテナ内の Laravel9.2 Vite SPA 。 `npm run dev` 時に Docker ホストのウェブブラウザからコンテナ内の Vite 開発サーバに繋がるようにした記録”
カテゴリー
コンピューター

Google Chrome に怒られない開発用途限定の自己署名なSSLサーバ証明書をコマンド一発で作る方法

Google Chrome に怒られない開発用途限定の自己署名なSSLサーバ証明書を作成している

コマンド

# サーバ証明書 (および秘密鍵) の作成
openssl req -x509 -newkey rsa:2048 -nodes -days 3650 \
-keyout private_key.pem \
-out certificate.pem \
-config - <<EOF
[req]
distinguished_name = req_distinguished_name
x509_extensions = usr_cert
prompt = no

[req_distinguished_name]
C = JP
O = oki2a24.com
OU = MyDivision
CN = localhost

[usr_cert]
basicConstraints = critical, CA:FALSE
subjectAltName = DNS:localhost
EOF

# サーバ証明書の確認
openssl x509 -text -noout -in certificate.pem

使用したバージョン

root@495db3743f1d:/var/www/html# openssl version
OpenSSL 1.1.1n  15 Mar 2022
root@495db3743f1d:/var/www/html#

まとめ・ポイント

続きを読む “Google Chrome に怒られない開発用途限定の自己署名なSSLサーバ証明書をコマンド一発で作る方法”
カテゴリー
Linux

nunomaduro/larastan 1.0.3 で Laravel 8 の無編集のソースコードへのエラーに対応したメモ

nunomaduro/larastan 1.0.3 で Laravel 8 の無編集のソースコードに対して出力されたエラー

まとめ

  • composer update nunomaduro/larastan:^1.0 --dev でアップデートしたところ、 Laravel インストールして生成された無編集のソースコードでエラーが発生した、
  • https://github.com/laravel/laravel/blob/8.x/app から最新ソースコードを適用することで解決したエラーもあった。
  • どうしても解決できないものは、 Ignoring Errors | PHPStan を参考にエラー抑制した。
続きを読む “nunomaduro/larastan 1.0.3 で Laravel 8 の無編集のソースコードへのエラーに対応したメモ”
カテゴリー
Linux

Laravel 8 、 Larastan 1.0.3 。API リソースクラスに対してプロパティが無いエラー、例えば Access to an undefined property App\Http\Resources\UserResource::$id. に対応する方法メモ

Laravel 8 、 Larastan 1.0.3 。API リソースクラスに対してプロパティが無いエラー、例えば Access to an undefined property App\Http\Resources\UserResource::$id. が表示された

対応方法まとめ

  • その１
    • API リソースクラスの toArray メソッド冒頭に、例えば /** @var \App\Models\User $this */ と書く。
    • 要は、 PHPDocs で API リソースクラスで使用するモデルを $this に紐づければ良いようだ。
  • その２
    • クラスコメントに、例えば /** @mixin \App\Models\User */ と書く。
    • 要は、 PHPDocs で API リソースクラスに使用するモデルを混ぜ込めば良いようだ。
続きを読む “Laravel 8 、 Larastan 1.0.3 。API リソースクラスに対してプロパティが無いエラー、例えば Access to an undefined property App\Http\Resources\UserResource::$id. に対応する方法メモ”
カテゴリー
Linux

Laravel 8 での Vue.js 3 を使った SPA に Bootstrap Icons を導入するためのメモ

Laravel 8 での Vue.js 3 を使った SPA に Bootstrap Icons を導入できた状態

なぜメモったか

Bootstrap Icons · Bootstrap 向けのオープンソース SVG アイコンライブラリ のページを見ると、インストールと使い方は書いてあるものの、それだけでは足りず、調べなければうまく使うことができませんでした。

ですので、調べた内容を、走り書き程度ですが、メモいたします。

続きを読む “Laravel 8 での Vue.js 3 を使った SPA に Bootstrap Icons を導入するためのメモ”
カテゴリー
Linux

Laravel 8 の Vue.js 3 の SPA に laravel/ui を使わないで Bootstrap 5 を導入するまでのメモ

Laravel 8 の Vue.js 3 の SPA に laravel/ui を使わないで Bootstrap 5 を導入してテスト表示

まとめ

続きを読む “Laravel 8 の Vue.js 3 の SPA に laravel/ui を使わないで Bootstrap 5 を導入するまでのメモ”
カテゴリー
Linux

Docker のホスト側に在る VS Code にて Docker コンテナ内の Xdebug と通信してステップ実行するための勉強と理解とポイントと設定

ステップデバッギングが行われる時のブラウザ、 PHP/Xdebug 、 Visual Studio Code の接続の図

状況

  • Remote – Containers – Visual Studio Marketplace は使わない。
  • ホスト側にデバッグしたい PHP コードがあり、同じコードが Docker コンテナにもある状況。ボリューム共有はしていない。
  • 本当は Remote – Containers を使いたいが、古い Docker イメージでは使えない場合がある。そしてそのようなケースでは大抵 PHP も古く、 Xdebug も最新のバージョン 3 は使えず、バージョン 2 を使うことになる。この投稿では Xdebug 2 を取り扱う。
続きを読む “Docker のホスト側に在る VS Code にて Docker コンテナ内の Xdebug と通信してステップ実行するための勉強と理解とポイントと設定”
カテゴリー
Linux

Laravel 8 で Vue.js 3 を SPA として使えるようにした記録メモ

Laravel 8 で Vue.js 3 を SPA として使えるようにしたページ

どの状態から始めたか?

Laravel 8 をインストールした直後に Vue.js 3 を SPA として最低限使えるようにしました。

続きを読む “Laravel 8 で Vue.js 3 を SPA として使えるようにした記録メモ”
カテゴリー
Linux

Chart.js 3.7.0 、 90度回転させた線チャートのグラフ両側にラベルを表示する方法

Chart.js 3.7.0 、 90度回転させた線チャートのグラフ両側にラベルを表示した

まとめ

  • チャートの右側にラベルを表示するためのプラグインを用意し、これを使用した。
  • Chart.js のオプションで設定する方法を見つけることはできなかった。
続きを読む “Chart.js 3.7.0 、 90度回転させた線チャートのグラフ両側にラベルを表示する方法”
カテゴリー
コンピューター

Laravel の `DATABASE_URL` を外部の環境変数 (server レベル) で設定している場合、 PHPUnit テストの 1 個目は通常に行われるのに 2 個目で DB 接続エラーとなってしまう問題を解決した

Laravel の `DATABASE_URL` を外部の環境変数 (server レベル) で設定している場合、 PHPUnit テストの 1 個目は通常に行われるのに 2 個目で DB 接続エラーとなってしまう問題

エラー対処まとめ

  • 今回の状況
    • Laravel 8.55.0
    • PHPUnit テストをインメモリ SQLite で行いたい。
    • DATABASE_URL を外部の環境変数 (server レベル) で設定している。
  • テスト用に DATABASE_URL を指定する以外に、 DB_CONNECTION と DB_DATABASE も指定する必要がある。
  • 次のように phpunit.xml に指定すればよい。
        <server name="DATABASE_URL" value="sqlite:///:memory:?foreign_key_constraints=true" force="true"/>
        <server name="DB_CONNECTION" value="sqlite"/>
        <server name="DB_DATABASE" value=":memory:"/>
続きを読む “Laravel の `DATABASE_URL` を外部の環境変数 (server レベル) で設定している場合、 PHPUnit テストの 1 個目は通常に行われるのに 2 個目で DB 接続エラーとなってしまう問題を解決した”