おうちk8s、フロントの画面がちゃんと表示されない問題への対応

はじめに
事象
1. 事象①：Frontendの読込み多すぎる問題
2. 事象②：Cannot read properties of null (reading ‘refs’)
最後に

はじめに

自作アプリのブラウザ表示が時々表示されない時が見受けられました。

以下が正常な時の画面です。

時折、以下のような白い画面になる時があります。

また、以下のような変な画面になる場合もあります。こちらもほぼ白。

フロントエンドのpodは2つあり、AとBどちらにアクセスしても表示が異常になるときはなりました。

よって、フロントエンドのどちらかのpodが上手くいっていない訳では無さそうです。

じゃあ正常時と異常時で何が違うのかと言うと、それはログが多すぎてよくわかりませんでした。

そして調査していく中でおそらく以下２つの事象によって引き起こされていたように見えます。

事象

事象①：Frontendの読込み多すぎる問題

以下はnginx-ingress-controllerのログで、一回のアクセスで以下のようなログが走ります。

10.244.1.1 - - [15/Aug/2025:06:06:37 +0000] "GET /node_modules/@amcharts/amcharts5/.internal/charts/map/GraticuleSeries.js?v=b311b1e0 HTTP/1.1" 200 7992 "http://change-view.cospa-tank.com/node_modules/@amcharts/amcharts5/map.js?v=b311b1e0" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36" 564 0.003 [change-view-change-view-frontend-svc-8080] [] 10.244.1.118:8080 7992 0.003 200 8ed68795707f17604292d7ea59679392
10.244.1.1 - - [15/Aug/2025:06:06:37 +0000] "GET /node_modules/@amcharts/amcharts5/.internal/charts/map/MapChart.js?v=b311b1e0 HTTP/1.1" 200 136843 "http://change-view.cospa-tank.com/node_modules/@amcharts/amcharts5/map.js?v=b311b1e0" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36" 557 0.009 [change-view-change-view-frontend-svc-8080] [] 10.244.1.118:8080 136843 0.009 200 7e3c3a9355bc6005adeb3dd21a50ffb9
・・・【略】・・・

このGET、616行分のログが1回のアクセス時に表示されていました。。。

なので、実際のページが表示されるまでの時間はとても長く感じます。

悠久のように感じます。

事象②：Cannot read properties of null (reading ‘refs’)

もう一つの事象は、コンソールには以下のようなエラーが表示されていました。

TypeError: Cannot read properties of null (reading 'refs')
    at setRef (chunk-HADYZQDX.js?v=098ef5f4:3478:22)
    at patch (chunk-HADYZQDX.js?v=098ef5f4:6469:7)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-HADYZQDX.js?v=098ef5f4:7055:11)
    at ReactiveEffect.run (chunk-HADYZQDX.js?v=098ef5f4:488:19)
    at setupRenderEffect (chunk-HADYZQDX.js?v=098ef5f4:7183:5)
    at mountComponent (chunk-HADYZQDX.js?v=098ef5f4:6957:7)
    at processComponent (chunk-HADYZQDX.js?v=098ef5f4:6910:9)
    at patch (chunk-HADYZQDX.js?v=098ef5f4:6427:11)
    at mountChildren (chunk-HADYZQDX.js?v=098ef5f4:6661:7)
    at mountElement (chunk-HADYZQDX.js?v=098ef5f4:6584:7)

とりあえず、コード内で$refsを使用している箇所は使わないように書き換えましたが、まだ発生していました。

エラーの発生源となるファイルはnode_modulesフォルダ配下にあって、ブラウザからだと検証のSourcesから確認できました。（以下のように）

エラーの発生源である、chunk-XXXXX.jsのようなファイルは

Vue (Vite / Webpack など) がビルド時にまとめたバンドル後のJSファイルです。

バンドルとは開発したソースコード（JS, TS, Vue, React, CSS, 画像などのアセット）を、本番環境で動かすのに最適化された少数のファイルにまとめる処理のことです。

よって、chunk-XXXXX.jsのようなファイルはビルドツールが自動生成したファイルになります。

Vite は開発時にはESM（ネイティブ ES Modules）を活用して、必要なモジュールだけ即座にブラウザに配信します。

ESMとはJavaScriptで「import」と「export」でファイル間の機能をやり取りできる仕組み」です。

一方、本番ビルド（vite build）ではRollupを使って以下のことを行います

Rollupは複数ファイルに書かれたJavaScriptを、ひとつのバンドルにしてくれるツールです。

依存関係の解決
- import や require で分割されたモジュールを解析し、依存関係グラフを作る。
モジュールの結合（バンドル）
- たくさんの小さな JS ファイルをまとめて少数のファイルにする。
- HTTP リクエストの数を減らし、ブラウザのロードを高速化。
不要コードの削除（Tree Shaking）
- 実際に使っていない関数やクラスを削除してファイルを小さくする。
最適化
- minify（圧縮）してファイルサイズを減らす。
- 画像や CSS も必要に応じてまとめる。
- 動的 import（コード分割, lazy load）に対応。
キャッシュや CDN 向けの最適化
- ハッシュ付きのファイル名を生成（例: index-abc123.js）。
- 変更があったファイルだけキャッシュが更新される。

一方、開発環境ではnpm run devまたは、npm run serveを実行し、Vite の開発サーバーが立ち上がってソースを即時に配信して HMR（ホットリロード）が効くようにします。（結果、処理が重くなります。）

本番環境ではVite の開発サーバーを使わず、ビルドして生成された静的ファイルを配信するようにするため、実行は以下のコマンドを実施します。

npm run build

これで dist/ フォルダが生成されます。
中には最適化された JS / CSS / HTML / 画像などが入っています。

次に、dist/ の中身を配信するために以下のコマンドを実行します。

npx vite preview

これで dist/ をローカルサーバーから配信できます。

👉 したがって、本番環境で npm run dev を使うのはNGなのでコマンドを以下のように書き換えます。

command: [ "sh", "-c", "npm install --include=dev && npm run dev -- --host" ]

👇に変更したら問題は解消した

command: [ "sh", "-c", "npm install --include=dev && npm run build && npx vite preview --host" ]

★Cannot read properties of null (reading ‘refs’)の解消の解決策になってなくない？

と思っているのですが、こちらで一旦、問題は解消されました。。。

モヤモヤが残るのですが、一旦、解消と言う事で、、、

２つの事象が見られなくなり、ブラウザから安定してサービスを確認することができるようになりました。