Nuxt3 (Nitroサーバ) で動的にアップロードした画像を表示する
Nuxt3で動的に追加されたファイルはただのリンクでは参照できない
正確には Nitroサーバの仕様らしいですが、サーバ実行後に動的にサイトから、またはFTP等でアップロードされた画像やファイルは、リンクでただアクセスすることができません。
理由1: publicは開発環境ではプロジェクト直下にいるが、ビルド後の本番環 境では .output/_nuxt/ へ移動となり、参照もそちらを参照する
理由2: ビルドした時点で publicにあるファイルへのみマッピングされる
等だそうです。認識誤ってたら申し訳なかです。
じゃあ、どうやって参照するか!
1. CDNサーバ使う
参照ファイルを置いておくだけのサーバを作って、そこを参照する
そりゃあ問題なく動作する。だってサーバが違うんですもの
2. APIにファイルを返却する機能を作成する
たぶん皆さんこっち。実際にはAPサーバ、DBサーバ、素材系のサーバすべてを分割して、かつ冗長化していくよう構築していくのが安全で、ベストで今後進んでいくんでしょうけど、小さなサービス作ったり遊んだりしている分にはそこまでできない、またはしたくない、労力!ってなると思うので、そんなときの対処法
server/api/[...file].get.ts
import fs from 'fs'
export default defineEventHandler((event) => {
// ファイルのパスをURLからパラメータとして取得
const file = event.context.params.file
// 返却をsendStrem でカスタム
return sendStream(
event,
// ファイルをそのまま返す
fs.createReadStream(
'ファイルがあるところまでの絶対パス'+ file
)
)
})
こんな形でしょうか。
ぜひよりよいもの、またはそんな問題はとうの昔に解決しているぞ!
という方、もし情報等お持ちでしたら教えていただけますと幸いです!