見出し画像

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
    )
  )
})

こんな形でしょうか。
ぜひよりよいもの、またはそんな問題はとうの昔に解決しているぞ!
という方、もし情報等お持ちでしたら教えていただけますと幸いです!

この記事が気に入ったらサポートをしてみませんか?