manifest.jsonからファイル名を動的に取得してみようとした[Vite][WordPress]（失敗談）

この前vite でビルドして、これを各ファイルから参照しようとパスを書こうとしてました。
でもmain-DRN○○〇.cssみたいに、mainの後ろに見知らぬ文字がついてたんですよね。

「単純にこの名前を参照するようにパスを書けばいいのかな？」

でもこれ、ビルドするたびに名前が変わるようなんです。

<link  ="<?php echo get_template_directory_uri();?>/dist/assets/main-DRn〇〇〇.js"></link>

このようなパスの一般的な参照の仕方では、この動的に変わるパスに対応できません。毎回パスかえるのかな？と思って簡単に調べてみました！

hashはブラウザキャッシュ無効のため

後につく文字列は’hash’といって、ブラウザのキャッシュを無効にするためのものでした。
毎回違う名前のファイルを参照することによって、キャッシュを無視して新しいファイルを確実に参照するようにするらしいです。

AWSが必要？

結論から書くと、毎回変わるパスを参照するのには、「サーバーサイドでコードを動かせるレンタルサーバー」を契約する必要があります。

• AWS
• lolipopマネージドクラウド
• googleクラウド　など

これはXServerやconoha wingとは別物みたい。
自分はlolipopを使用していますが、普通のlolipopでは駄目なので、新たに契約しなければならないということですね。月千円くらいでできるとかなんとか。

ファイル名を動的に取得する流れとしては、

1. サーバー側でNode.jsを起動、コードを回し始める。
2. manifest.jsonを参照し、読み込むべきファイル名を取得する。
3. PugやEJSを使って、PHPファイル内に<link>の部分だけコードを挿入。
4. ユーザーがCSSやJSファイルを読み込める。

PugやEJSとは、npm installでインストールできるモジュールの一つ。

サーバー契約はまた今度

node.jsとかローカルでしかやったことなかったので、あまりサーバーで起動するっていうイメージが湧かないんですよね。ターミナルみたいなそういう操作パネルがあるんでしょうか。

今回調べて大体流れはわかったので、今度はサーバー契約しようと思います