【Vue+PHP+Mariadb】忘備録：ビルド時にenvファイルはあるか？

これは、これまでPHPを手動でサーバにアップロードしてwebシステムを構築するというレガシーな手法から逃れるために、Docker + Vue + PHP + Mariadbの構築に試みる男の失敗と学びの記録である。

遭遇した現象

ローカルでは正しく動作していたが、サーバへデプロイしたら正しく動作しなくなった。具体的には、fetch先が何故かlocalhostのままになっていた。

詳細

Vue側でこのようにしている処理がある。

const apiPath = import.meta.env.VITE_API_BASE;
const payload = {
	call: 'SAVEITEM',
	items: this.items
};
const res = await fetch(`${apiPath}/php/api.php`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(payload)
});

根本的な原因は、ローカルでVueのビルドを行う際、.envにVITE_API_BASEを含めていなかったため。（アホすぎる）

ただ、この根本的な原因究明に至るまで時間を要してしまった。このエラーに遭遇した際、ローカルとサーバそれぞれDockerが立ち上がっていた。サーバのPOST先がlocalhostになっていても、ローカル側へのPOSTが成功してしまっていたことが原因と思われる。事実、ローカルで起動していたDockerを停止させたところ、サーバ側のfetchでconnection errorが発生した。

fetchのPOST先がlocalhostになっていたため、「サーバがlocalhostにPOSTしている」と思い込んでいたが、実際にはブラウザ（クライアント側）が自分のlocalhostへリクエストを出していた（当然すぎる・・・）。Vueのfetchはクライアントサイドで動作するため、環境変数の設定ミスが根本の原因でした。