質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

Q&A

解決済

1回答

1800閲覧

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

jun__

総合スコア0

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

0グッド

0クリップ

投稿2021/11/26 14:33

編集2021/11/28 01:54

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」となる

![イメージ説明

発生タイミング

  1. NuxtアプリへNetlifyCMSの導入

  2. NetlifyCMSからブログの作成、投稿

  3. プッシュ、デプロイ

  4. ブログ一覧ページへ行き、先ほど投稿したブログを確認

  5. ブログタイトルをクリック

  6. 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.jsgeneratecrawler を解除

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/<ブログ名>としてもブログは表示されませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

<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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問