「this page could not be found」NetlifyCMS x Nuxt.js

Nuxt x NetlifyCMS デプロイ先でブログを開くと
「this page could not be found」（※ローカル動作正常）
となってしまいます。

私の質問投稿をご覧いただき、誠にありがとうございます。
Webエンジニア転職を志しているものです。現在、Nuxt.jsを勉強中です。
ローカルでは問題なく動作するのですが、デプロイするとなぜか「This page could not be found」となってしまいます。
どなたかこのようなご経験のある方、どうかご教授いただけませんでしょうか。

今回teratailに質問を初投稿します。
自分で作ったNuxtアプリで技術ブログを投稿するため、NetlifyCMSを導入することにしました。
よろしくお願い致します。

前提・実現したいこと

NetlifyCMSで作成したブログを表示させたい。

※ なぜかローカルではうまくいきます。

発生している問題・エラーメッセージ

ブログを開こうとすると、「This page could not be found」となる

発生タイミング

NuxtアプリへNetlifyCMSの導入
NetlifyCMSからブログの作成、投稿
プッシュ、デプロイ
ブログ一覧ページへ行き、先ほど投稿したブログを確認
ブログタイトルをクリック
This page could not be found」 <- このタイミングでエラー

※ ローカル環境では問題なくブログを閲覧できます。

試したこと

crawlerの削除

こちらのサイト (https://scrapbox.io/minato86/Nuxt.js_2.13.0でNetlify_CMSが「this_page_could_not_be_found」になる)を参考にし、 nuxt.config.js の generate で crawler を解除

export default {
  generate: {
    crawler: false
  }
}

=> 効果なしでした。

独自ドメインを付与し、HTTPS対応に。

NetlifyでGitHubに紐づく自動デプロイを設定しました。ただ、公開URLに独自ドメインを付与するため、Cloudflareも使用してます。独自ドメインをCloudflareで移管し、使用しました。

=> 効果なしでした。NetlifyとCloudflase、それぞれの自動生成URL、独自ドメインURLで確認しても、やはりいつもブログの表示ができません。ルーティングもなんだかおかしくなってしまいます。

補足情報（FW/ツールのバージョンなど）

問題なくブログを見れるローカルでは、ブログページへ遷移する際、URLがhttp://localhost:3000/<ブログ名> となるのに対し、

問題のあるデプロイ先ではURLが https://~~~.netlify.app/blog/<ブログ名> となり、プロジェクトとブログ名の間にある blog というディレクトリが余分にあることに気づきました。
ところが、https://~~~.netlify.app/blog/<ブログ名> を https://~~~.netlify.app/<ブログ名>としてもブログは表示されませんでした。

行動規範の内容に同意します

回答1件

自己解決

【一旦安直な解決方法で.. 】

※ 結局ローカルで正常に動いてデプロイ時にルーティングがおかしくなる原因はわかりませんでしたが、目的は達成しました。

<nuxt-link :to="post.slug">エラーになってたルート先</nuxt-link>
を
<nuxt-link :to="'/' + post.slug">エラーになってたルート先</nuxt-link>
と無理矢理変更することで解決しました。
本来ならnuxt-linkの設定をnuxt.config.jsなどで変更するべきなのでしょうが、わかりませんでした。悔しいです。

投稿2021/11/28 10:29

jun__

総合スコア0