2020-03-07に更新

nuxt.jsプロジェクトをnetlifyで公開してredirectを使うときの罠


3/6 11:15追記

サブディレクトリにあるときだけ発生する問題ぽい。問題をまとめてサポートに報告しました https://community.netlify.com/t/subdirectory-and-publish-directory-redirection/10120


netlifyにはnetlity.tomlという設定ファイルを書くといろいろ設定ができることになっていて、従来nginxでやっていたような各種リダイレクトも、ここに書くことで実行してくれることになっている。
Syntax for the Netlify configuration file

これと、nuxt.jsみたいにビルド結果をサブディレクトリに出力するツールが組み合わさるとちょっと予想しない対応が必要になる話。


ルートディレクトリに配置したnetlify.tomlにビルドとリダイレクトの設定を書く。

[build]
  base = "front/"
  publish = "dist/"
  command = "npm run generate"

[[redirects]]
  from = "https://gisyohub.netlify.com/"
  to = "https://gisyohub.com/"
  status = 301
  force = true

結果、ビルドはしてくれるのだけれど、リダイレクトは動かない。

ぼくの実験結果だと、同じファイルをコピーして、staticディレクトリにもnetlify.tomlを配置してあげると、ビルドする時dist/にコピーされて、その結果redirectが動作するようになる。

おそらくnetlifyは、ビルド時はルートディレクトリにあるnetlify.tomlを見るけど、リダイレクトのときはpublishディレクトリにあるnetlify.tomlを見ているらしい。実装の都合は何となく分かるんだけど、せめてドキュメントに明示してほしい感じ。

こことかここで話題に上がってるんだけど、バグとしては認めてもらえなかったぽい。
https://community.netlify.com/t/redirects-within-netlify-toml-not-working/1731
https://community.netlify.com/t/netlify-toml-folder-with-nuxtjs-and-netlify-cli/4659/3

シンプル再現環境を作ればバグだと認めてもらえそうな気がするんだけど、この問題のミニマム環境って何で作るのがいいのだろう。nuxtとかの開発環境なしに、index.htmlだけをnetlifyで公開するような構成って作れるのかな?

ツイッターでシェア
みんなに共有、忘れないようにメモ

daisuke furukawa

おひるねのできるフリーランサー。「モバイラーズオアシス」の中の人でもあります。

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント