😵‍💫

Docker上でNext.js から Ruby on Rails で定義したJSONを取りに行ったときのエラーを解決した

に公開
Docker
Next.js
Rails
JSON
tech

状況

  • Docker で Next.js と Ruby on Rails (APIモード) をそれぞれ別のコンテナで立ち上げた
  • Ruby on Rails 側のDBに入れたJSONデータを Next.js で getStaticProps() で取得しようとした
  • JSONデータに異常はないのに SyntaxError: Unexpected token < in JSON at position 0 エラーが発生した

解決

  • {Railsのプロジェクトフォルダ}/config/environments/development.rb の do文 の中に config.hosts << "{Railsを立ち上げたコンテナ名}" を追記する
    ↓ Railsを立ち上げたコンテナの名前が railsserver だった場合の例 ↓
Rails.application.configure do
(省略)
　config.hosts << "railsserver"
end
  • Next.js 側の getStaticProps() の中の fetch の引数で http://localhost:3000 と書いていた部分を http://{Railsを立ち上げたコンテナ名}:3000 に変更する
    ↓ Railsのコンテナが railsserver 、Railsで定義したapi名がpostsだった場合の例 ↓
export async function getStaticProps() {
  const res = await fetch("http://railsserver:3000/posts");
  const posts = await res.json();

  return{
    props: {
      posts,
    },
  };
}
  • getStaticProps() の return の直前で console.log で確認したらJSONデータを引っ張ってこれてました。

Discussion