search

ECMaker / blog

https://blog.ec-maker.com/
0 stars 0 forks source link

notion の更新で404になる #5

Closed u-ecmaker closed 1 year ago

u-ecmaker commented 1 year ago

わかったこと

keyword;

(解決にむけてググるときに必要なキーワード) slug, mapping,webhook, trigger

疑い

\src\pages[slug]\index.tsx が怪しい

本番環境(deployしたいページ)の確認の仕方

公開したいならmainにマージしなければいけない。
が、 デバックだけならプルリクエスト作成すれば↓のプレビューで確認ができる。 image ここのプレビューが使えるので、mainにマージしなくてもdraftのPRで確かめられる。 プルリク出した後に再度変更を加えて確認したい場合も、 同じブランチにプッシュすれば再度プレビューページが作られる。 (プレビューのurlは同じなので注意。)

u-ecmaker commented 1 year ago

参考になる？ https://youtu.be/04exSpZ9IZ8

プロンプト

NEXT JS, tailwindCSS, notion, netlifyを使用してブログを開発しています。githubのリポジトリは以下になります。 githubリポジトリのurl：https://github.com/ECMaker/blognotion notionを更新するたびにブログが更新されるようにしたいのです。デプロイする前にnotionにあった記事はちゃんと表示されるのですが、デプロイしたあとにnotionに新しい記事を追加するとその記事のページが404エラーになってしまいます。記事一覧のtopページは404エラーにならず更新され、記事に飛ぶリンクも生成されているのですが、topページから記事のリンク先に飛ぶと404エラーになってしまいます。考えられる可能性を上げた後、それぞれの対応策を教えてください。

Next.jsのexportPathMap設定を疑っています。

u-ecmaker commented 1 year ago

bing ai の回答 参考文献 使えない https://www.udemy.com/course/notion-nextjs-blog-dev/ https://qiita.com/Daisuke_PHPer/items/3d55e40f4cb5f89efdc1

u-ecmaker commented 1 year ago

ほかの回答　使えそう

https://stackoverflow.com/questions/66084031/next-js-error-getting-404-when-fetching-js-resources-after-refresh

ありがとうございます。このページも参考になるかもしれませんね。このページでは、Next.jsのexportPathMap設定が原因で404エラーが発生する場合の対処法を紹介しています。exportPathMapとは、Next.jsで静的なサイトを生成するときに、URLとページコンポーネントの対応関係を定義する機能です。

しかし、exportPathMapの設定で指定したURL以外のページにアクセスすると、404エラーが発生します。例えば、/posts/helloというページがあるとします。exportPathMapの設定で/posts/helloを指定していない場合、このページにアクセスすると404エラーになります。

対処法としては、次の手順を実行します。

next.config.jsファイルでexportPathMapの設定を確認して、アクセスしたいページのURLが含まれているかどうかチェックします。 URLが含まれていない場合は、追加して保存します。 詳細なコード例はを参照してください。

この方法で解決できるかどうかお試しください

u-ecmaker commented 1 year ago

ほかの回答

exportPathMapを動的に生成するために、Notion APIを使ってNotionのページの情報を取得し、それをもとにパスを設定する

  1. Notion APIを使って、NotionのページのIDやタイトルなどの情報を取得する関数を作成する。
  2. next.config.jsのexportPathMapで、上記の関数を呼び出して、Notionのページとブログのパスのマッピングを定義する。
  3. ブログの各ページで、Notion APIを使って、Notionのページの内容を取得して表示する。

この方法で試してみてください。

https://zenn.dev/aono/articles/3a1c78ec9c6d1c Notion APIとNext.jsを使ってSSG（静的サイトジェネレート）を利用したポートフォリオサイトを作る方法を詳しく解説しています。 exportPathMapの設定やNotion APIの使い方など、参考になると思います。

https://nextjs.org/docs/pages/api-reference/next-config-js/exportPathMap exportPathMapの公式ドキュメントが日本語で読めます。 exportPathMapの仕組みや注意点など、基本的な情報がまとまっています。

u-ecmaker commented 1 year ago

やっぱchatGPT先輩のほうが的確

Next.jsでNotionを使用してブログを開発する際に、デプロイ後にNotionページを更新した際に404エラーが発生する問題について、いくつかの可能性と対策策を考えることができます。

  1. デプロイ時のビルド設定の確認:
    Next.jsのexportPathMap設定を確認してください。この設定は、ビルド時に生成されるページのパスを指定するものです。Notionのページが正しくビルドされるように、exportPathMapにNotionのページのパスを追加する必要があります。 next.config.jsファイルでexportPathMapを定義しているか確認しましょう。以下は例です:

    // next.config.js
module.exports = {
 // 他の設定...

 exportPathMap: async function () {
   const pages = await fetchPagesFromNotion(); // Notionからページを取得する関数を呼び出す例

   // ページのパスを生成するロジックを追加する
   const paths = {
     '/': { page: '/' },
   };

   pages.forEach((page) => {
     paths[`/blog/${page.slug}`] = {
       page: '/blog/[slug]',
       query: { slug: page.slug },
     };
   });

   return paths;
 },
};

    fetchPagesFromNotion関数は、NotionのAPIなどを使用してNotionのページを取得する関数です。必要に応じて実装してください。

  2. ビルド時にNotionのデータを取得する方法の確認:
    Notionのデータを取得する方法として、Notionの公式APIを使用しているか確認しましょう。Notionのページが更新された際に、最新のデータを取得する必要があります。 NotionのAPIを使用する場合、アクセストークンの設定などが正しく行われているか確認してください。アクセストークンが不正な場合、データの取得ができないため404エラーが発生する可能性があります。
  3. Netlifyの設定の確認:
    Netlifyのビルド設定を確認し、必要なビルドコマンドが正しく設定されていることを確認してください。Next.jsの場合、通常はnext buildというビルドコマンドを使用します。 ビルド時にNotionのデータを取得する必要がある場合、ビルドスクリプト内でデータの取得を行う必要があります。ビルドスクリプト内でNotionのデータを取得し、ビルドプロセスに組み込むように設定してください。
  4. デプロイ前のテストとデバッグ:
    ローカル環境でのテストとデバッグを行い、Notionのデータを正しく取得し、ページが正常にビルドされることを確認してください。 ローカルでのテストでは、next buildコマンドやnext exportコマンドを使用してビルドを実行し、生成されたページをローカルで確認します。Notionのデータが正しく組み込まれ、リンクが正常に機能することを確認してください。

以上の手順を確認し、問題の原因を特定して修正することができるはずです。Notionのデータの取得やビルド設定に関する問題がある場合、ページが更新されても最新のデータが取得されずに404エラーが発生する可能性があります。適切な設定とコードを使用して、NotionとNetlifyを連携させて正しく更新されるようにしてください。

u-ecmaker commented 1 year ago

上記の 3の設定方法を詳しく教えて　　

  1. ビルドスクリプト内でNotion APIを使ってデータを取得し、ビルドプロセスに組み込むように設定してください。

記事の中で、以下のようなビルドスクリプトを作成しています。

// ビルドスクリプト
const fs = require("fs");
const { Client } = require("@notionhq/client");

// Notion APIのアクセストークンとデータベースIDを環境変数から取得
const notion = new Client({ auth: process.env.NOTION_TOKEN });
const databaseId = process.env.NOTION_DATABASE_ID;

// データベースからブログ記事のデータを取得する関数
async function getBlogPosts() {
  const response = await notion.databases.query({
    database_id: databaseId,
  });
  return response.results;
}

// ブログ記事のデータをJSONファイルに保存する関数
async function saveBlogPosts() {
  const posts = await getBlogPosts();
  fs.writeFileSync("posts.json", JSON.stringify(posts));
}

// ビルドスクリプトを実行
saveBlogPosts();

このビルドスクリプトは、Notion APIのクライアントを作成し、データベースからブログ記事のデータを取得して、JSONファイルに保存しています。このJSONファイルは、Next.jsのgetStaticPropsやgetStaticPathsなどの関数で読み込んで、静的ページを生成するために使われます。

Notion APIとNext.jsで日記サイトを作った 【Next.js × Notion API】SSGを利用したポートフォリオサイトを作る

u-ecmaker commented 1 year ago

bardｾﾝｾｲ

Netlify の設定が正しくありません。 Netlify がブログを正しくデプロイしていない可能性があります。これは、Netlify の設定が正しくないか、またはブログのファイルが正しい場所に配置されていないためです。

Netlify の設定を確認するには、Netlify ダッシュボードにアクセスして [設定] タブをクリックします。ブログのファイルが .next ディレクトリに配置されていること、および build タスクが有効になっていることを確認します。

u-ecmaker commented 1 year ago

やっぱりgoogle検索か。
"netlify" "notion" "ブログ" "デプロイ"　next.js "netlify" "notion" "blog" "deploy" "404"

SSGとSSRとISR notion API + NEXT.js + netlify でブログ立ち上げ ③ NEXT.jsのお勉強

u-ecmaker commented 1 year ago

これか ブログを Gatsby + Netlify + Notion に移行

u-ecmaker commented 1 year ago

isr実装だけでは未解決でした

u-ecmaker commented 1 year ago

topページには表示されるのに、その後のリンクを踏むと表示されなくなる。ということは… マッピング？page配下？の問題？

u-ecmaker commented 1 year ago

filter無効化は意味がなかった . (ので、mainはrevertした)

u-ecmaker commented 1 year ago

slug に文字を入れていたら 404になった。 　slug=pageのurlを決定するもの。 slug の文字を消したら 404 が消えた。 でも "新しい投稿"私は軽いうつ病です。だけ404となった。謎。description に文字を書いていたからか？

u-ecmaker commented 1 year ago

ここのプレビューでは404にならなかった。 image

そしてdeployしても404にならなかった。 ここのプレビューが使えるので、mainにマージしなくてもdraftのPRで確かめられる。

u-ecmaker commented 1 year ago

mergeしてもslugは成功。publishにチェックされていないcardもチェックで404回避成功。 ただし、新規投稿ではNG。slugを変えてもNG。 TOPページではURLが変わっている。しかしcardページで前のURLに飛んでいてNG.

u-ecmaker commented 1 year ago

こんにちは、これはBingです。😊 ブログの開発にお困りのようですね。404エラーの原因はいくつか考えられますが、まずは以下のことを確認してみてください。

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

これで、すべてのリクエストをindex.htmlにリダイレクトし、ルーティングをReactに任せることができます⁴。

これらの方法で解決できましたか？それとも他に何か問題がありますか？

ソース: Bing との会話 2023/5/21 (1) 404エラー（not found）とは？よくある原因と解決方法を解説 .... https://gmotech.jp/semlabo/seo/blog/404-error-commentary/. (2) netlifyで作ったサイトがブラウザリロードすると404になる. https://teratail.com/questions/134508. (3) Netlifyにて404エラー発生 - teratail【テラテイル】. https://teratail.com/questions/371791. (4) Netlify renders 404 on page refresh (using React and react-router). https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router.

u-ecmaker commented 1 year ago

↑から、やはりnetlifyの設定か https://stackoverflow.com/questions/66084031/next-js-error-getting-404-when-fetching-js-resources-after-refresh

u-ecmaker commented 1 year ago

この回答も試したがだめだった

なるほど、node.jsを使っているのですね。その場合、netlify.tomlの設定は以下のようになります²。

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

ここで、commandはビルドコマンド、publishはビルド後のフォルダ名を指定します。これで、netlifyがnode.jsのビルドを正しく行い、ルーティングをReactに任せることができます。

もし、これでも404エラーが出る場合は、netlifyのビルドログを確認してみてください²。ビルドに失敗している可能性があります。また、_redirectsというファイルを作成し、"""/index.html"""にリダイレクトするように指定する方法もあります³。

これらの方法で解決できましたか？それとも他に何か問題がありますか？

ソース: Bing との会話 2023/5/21 (1) Build troubleshooting tips | Netlify Docs. https://docs.netlify.com/configure-builds/troubleshooting-tips/. (2) "Page Not Found" when trying to access a site deployed on .... https://stackoverflow.com/questions/50752350/page-not-found-when-trying-to-access-a-site-deployed-on-netlify. (3) netlifyで作ったサイトがブラウザリロードすると404になる. https://teratail.com/questions/134508.

u-ecmaker commented 1 year ago

こっちを試してみる https://teratail.com/questions/134508#reply-203897

u-ecmaker commented 1 year ago

netlify.toml の設定ではないっぽい。以下を試したがだめでした。 https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router https://teratail.com/questions/134508#reply-203897

\src\pages[slug]\index.tsx が怪しいんだけどなー

u-ecmaker commented 1 year ago

bingAi先生

Notionの記事が更新されるたびにブログの記事も更新されるようにするには、Notion APIを使って、Notionのデータベース内の記事を監視し、記事が更新されたらNetlifyのビルドをトリガーする必要があります。Notion APIを使って、データベース内の記事を監視する方法については、Qiitaの記事¹やZennの記事³が参考になるでしょう。また、Netlifyでビルドをトリガーする方法については、Next on Netlifyプラグイン²が参考になるでしょう。

以上、参考になれば幸いです。

ソース: Bing との会話 2023/5/22 (1) Notion APIとNext.jsで日記サイトを作った - Qiita. https://qiita.com/Yuki_Oshima/items/515d415dc663e285a64e. (2) Next.jsヘッドレスCMS構成でNetlifyにデプロイしてみる - Zenn. https://zenn.dev/ttani/articles/nextjs-netlify-deploy. (3) Next on Netlifyプラグインを使ってNext.jsのサーバ機能をNetlifyへ .... https://recruit.gmo.jp/engineer/jisedai/blog/next-on-netlify/.

u-ecmaker commented 1 year ago

ビルドフック、トリガーが必要？

To trigger a Netlify build when Notion is updated, you can use build hooks. Build hooks are URLs that you can use to trigger new builds and deploys. You can find them in Site settings > Build & deploy > Continuous deployment > Build hooks¹. You can also use Zapier to connect Netlify and Notion. This integration allows you to create a new build hook when a new page is created in Notion².

I hope this helps!

ソース: Bing との会話 2023/5/22 (1) Build hooks | Netlify Docs. https://docs.netlify.com/configure-builds/build-hooks/. (2) Connect your Netlify to Notion integration in 2 minutes | Zapier. https://zapier.com/apps/netlify/integrations/notion. (3) Automatically trigger Netlify Functions on specific events. https://www.netlify.com/blog/2021/12/19/automatically-trigger-netlify-functions-on-specific-events/.

u-ecmaker commented 1 year ago

みんなwebhookで苦しんでいる！？

https://qiita.com/_P0cChi_/items/b88bd0d69da4a1e90e71

webhook ちゃんと運用していくためにはNotionを更新したらNetlify側でデプロイするようなwebhookの設定が必要です。 ちょっとだけ調べてみたのですが、Notion側からデプロイをアクションするための、ブラウザ拡張を自作するようなアプローチを見つけました。 https://github.com/dragonman225/trigger-webhook-from-notion

twitter https://twitter.com/malillu/status/1432000508781162504

https://shunta.dev/blog/9e53257181be463d9fcb47546cb6672f/

webhookサービス https://apidog.com/jp/blog/how-to-work-with-notion-api/

google検索 https://www.google.com/search?q=notion-blog+webhook&rlz=1C1GCEB_enJP1058&oq=notion-blog+webhook&aqs=chrome..69i57j0i30j0i19i512j0i19i30l2j69i60l3.5151j0j4&sourceid=chrome&ie=UTF-8

notion-blogの仕様

Vercelにnotion-blogをデプロイする

u-ecmaker commented 1 year ago

これはデプロイ通らなかった。 netlify.toml

[build]
  publish = ""
  command = "yarn build"
[[plugins]]
  package = "@netlify/plugin-nextjs"
[[plugins]]
  package = "netlify-plugin-cache-nextjs"

(3) Next on Netlifyプラグインを使ってNext.jsのサーバ機能をNetlifyへ .... https://recruit.gmo.jp/engineer/jisedai/blog/next-on-netlify/.

これも通らなかった。やっぱtomlの設定ではなさそう。 https://shunta.dev/blog/9e53257181be463d9fcb47546cb6672f/

[build]
  Command = "CI= yarn generate"
  publish = "dist/"
u-ecmaker commented 1 year ago

これか！！！ NotionをCMSとして使う、astro-notion-blogをVercelで動かしてみた

デプロイリンクを作成する astro-notion-blogは、Notionで記事を作成したり、変更しても、公開サイト上には即時反映されません。Vercelでデプロイをかけた場合にのみ公開サイトに反映されます。

VercelのダッシュボードへのリンクをNotionに設置して、ダッシュボードでRe-deployボタンを押して更新するのも一案ですが、Vercelのデプロイフックを利用すれば、NotionページからURLをワンクリックするだけでデプロイを作動させられるようになります。

VercelのProject Settings→Gitを開きます（1）。Deploy Hooksにて、Hookの名称とブランチ名を指定して（2）、 Create Hookボタンを押して（3）新しいデプロイフックを作成します。

※スクリーンショットではブランチ名を指定し忘れていますが、mainを指定します

u-ecmaker commented 1 year ago

shinさんのnotion-blogなら404にならない

ドラフトのデプロイ ただし、slugとかが使えないということかな。

u-ecmaker commented 1 year ago

notionを更新したら手動でdeployし直すしかなさそう。 それで、netlifyの設定で手動更新用のURLを発行できるから、generateして欲しい。 →batファイルとかにしておいて、notionを更新したらbatをダブルクリックする感じにしようかと。

ecmaker00 commented 1 year ago

@keit0728 @u-ecmaker hi. i'm joined. please set using my netlify.

u-ecmaker commented 1 year ago

解決しました。こちらにまとめました。 https://blog.ecmaker00.com/netlify-deploy-methods https://blog-ecmaker00.notion.site/notion-blog-2-Notion-Netlify-d11e9abed26e483fab9a4e07fd8441f3