2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

NetlifyにNuxt3の静的サイトをデプロイする時の公開ディクレトリはdistにする

Posted at

Nuxt3からNuxtを触り始めたNuxt初心者によるメモです。

.output/publicを公開ディレクトリにするとこけてしまう

Nuxt3で静的サイトを生成するときは、npm run generateなどのコマンドで実行ファイルを生成します。
その時の出力先として、Nuxt3のドキュメントには.outputであると書かれており、
https://nuxt.com/docs/guide/directory-structure/output

npm run build実行時には以下が出力されます。

ではNetlifyの公開ディレクトリも .outpu/publicに設定すればいいのかと思ったのですが、

Deploy directory ".output/public" does not existというエラーでこけてしまう...

.output/publicへのシンボリックリンクとして設定されているdistディレクトリ

Nuxt2では、静的ファイルはdistディレクトリに格納される。
.output以下に静的ファイルが格納されるようになったのはNuxt3から。

いろいろ調べたのをまとめると、Nuxt 3プロジェクトでは、ビルドプロセスが.output/publicディレクトリを生成し、それと同時に同時に、互換性のためにdistディレクトリは.output/publicへのシンボリックリンクとして設定され、Nuxt2以前のツールや設定との互換を保つ感じのようです。

https://qiita.com/ayumun_jp/items/bf7ff6d0002c4b48c5a9
https://v2.nuxt.com/ja/docs/directory-structure/dist/

Netlifyでの公開ディクレトリをdistにしたらうまく行った

タイトルの通りです。
公開ディレクトリを.output/publicからdistに変更したらうまくいきました。

実体である.output/publicの設定でエラーになってしまうのはなぜか今のところわからずですが、netlifyでNuxt3の静的サイトを公開するときのディレクトリはdistにしておくのが良さそうです。。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?