2022年8月 – oki2a24

直面した問題

環境

WLS2 (その後 Mac でも実施)
Vue – アセットの構築（Vite） 9.x Laravel のところまで設定を進めた。

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 すると次のようになります。

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

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

コマンド

# サーバ証明書 (および秘密鍵) の作成 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#

直面した問題

コマンド

まとめ・ポイント