ITキャリアゼミフルスタック株式会社のメディア
トップテックブログmicrocms_service_domain is requiredエラーに苦戦した話
テックブログ
2024年2月10日 05:07

microcms_service_domain is requiredエラーに苦戦した話

はじめに

こんにちは。フルスタック株式会社です。

最近、Next.jsとmicroCMSを組み合わせて新しいウェブサイトを開発し、そのサイトをAmplifyでデプロイする過程でいくつかの課題に直面しました。

環境

  • Next.js13:Next.jsはReactベースのフレームワーク。
  • microCMS:microCMSは柔軟でAPIベースのCMS。RESTful API、ヘッドレスCMSで、多言語対応。
  • AWS Amplify:モダンなウェブアプリ構築のためのフルスタックプラットフォーム。

エラー内容と結論

Amplifyデプロイ時に、「Error: microcms_service_domain is required」というエラーに苦戦。解決策は「NEXT_PUBLIC_」を環境変数に追加することでした。本記事では、このような環境変数の設定で陥ったエラーと対応について記述しています。

問題起因

サイトがAmplifyにデプロイされると、microCMSの記事へのリンクが機能しなくなりました。ローカルサーバーでは問題なく動作していたダイナミックルーティングのページで、「Application error: a server-side exception has occurred」というエラーが発生。

コンソールに「Error: Page "/business/[slug]" is missing "generateStaticParams()"」というエラーがあったので、generateStaticParamsのコードの追加してみる。

export async function generateStaticParams() {
  const posts = await getBusinessList();

  return posts.contents.map((post: { id: string }) => ({
    slug: post.id,
  }))
}

gitにコミットし、再デプロイ。しかし、エラー解決できず…

CloudWatchでログを確認すると、「Error: microcms_service_domain is required」というエラーが見つかりました。Amplifyの環境変数は設定されているはずなのに、なぜ発生するのか…

エラー解決

様々な試行錯誤の末、最終的にenvファイルの環境変数名に「NEXT_PUBLIC_」をつけていなかったことが原因であることが判明。この単純な見落としで生じたAmplify上のエラーに対処する過程を、開発者仲間に共有し、同様の問題に対処する手助けとなればと思います。

この記事を書いた人

フルスタック株式会社代表取締役中満悠人

2022年3月に当社を設立。 クラウドサービスの導入支援、WEBエンジニアの育成事業を経営。 大阪出身、高専出身。

フルスタック株式会社代表取締役中満悠人

2022年3月に当社を設立。 クラウドサービスの導入支援、WEBエンジニアの育成事業を経営。 大阪出身、高専出身。

「記事名」に関する資料ダウンロードフォーム

このフォームから送信された情報は、プライバシーポリシーに基づいて処理されます。ご同意の上お申し込み下さい。

おすすめの記事

記事が見つかりませんでした

We Are Hiring!

もっと色々な情報を知りたい方はこちらからそうぞ

私たちはミッション・価値観への共感を何よりも大切に考え、一緒に働くメンバーを探しています。SNSや企業ブログでさらにフルスタックの情報をご覧いただき、また戻ってきてくださいね。お待ちしております。