駆け出しWebエンジニアの勉強日記vol.1

2024年1月10日 02:08

安直な題名！
思い浮かばなかったので題名に何日も悩むより、とりあえず書いてしまえという勢いで筆をとっています。

いやー正月休み過ぎ去るの早かった……。皆さんはこの年末年始どう過ごされましたか？
私はというと28日から職場が休みだったので、年末はゆっくり筑前煮やお汁粉を仕込みのんびりと過ごしていました。
今年は気温おかしかったですね。秋くらいの体感温度でとても過ごしやすかったです。

この年末年始休暇中の勉強はというと、まずはNext.jsの課題を進めていました。

Next.js

上記の動画を見ながらToDoアプリを作ろうという課題です。
これにToDoの追加・削除・編集の機能を実装していたのですがかなり難しかった。Next.jsに関してはチュートリアルを１周しましたがさすがに習得にはかなり時間かかりそうです。
それでもどうにかこうにか作り上げ、いざverselにデプロイするぞ！と行った所このようなエラーに。

Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process
digest: "3747308182"
 ✓ Compiled in 235ms (240 modules)
 ✓ Compiled /favicon.ico/route in 402ms (506 modules)
 ⚠️ Fast Refresh had to perform a full reload due to a runtime e
 ⨯ Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process
Cause: AggregateError
    at internalConnectMultiple (node:net:1114:18)
    at afterConnectMultiple (node:net:1667:5)
    at TCPConnectWrap.callbackTrampoline (node:internal/async_h
  code: 'ECONNREFUSED',
  [errors]: [
    Error: connect ECONNREFUSED 127.0.0.1:3001
        at createConnectionError (node:net:1634:14)
        at afterConnectMultiple (node:net:1664:40)
        at TCPConnectWrap.callbackTrampoline (node:internal/asy
      errno: -4078,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 3001
    },
    Error: connect ECONNREFUSED :-3001
        at createConnectionError (node:net:1634:14)
        at afterConnectMultiple (node:net:1664:40)
        at TCPConnectWrap.callbackTrampoline (node:internal/asy
      address: '::1',
      port: 3001
    }
  ]
}

何だこれ？？？？

色々と解決法をネットサーフィンをしたところ、同様のエラーが出た方がいました。
どうやらNext.jsをアップデートしてからこのエラーが発生するようになったと。なるほど。
ということでNext.jsを14→13に下げてもう一度チャレンジしました。

いや変わらんが

また同じエラーが発生しました。そのあとも様々な方法を試行錯誤したのですが結果は変わらず……。
流石に2週間ほど詰まってしまったので講師の方にアドバイスを仰ぎ教えてもらうことに。

結果

このアプリには仮想サーバーとしてjson-Serverを使うというものだったのですが
私はnpm run devをする際に勝手にjson-Serverも立ち上がると思い込んでいたのが原因でした。
立ち上がっていない状態であればそりゃエラーも吐く……。
加えて、verselはjson-Serverのような仮想サーバーだとデプロイ出来ないということが判明しました。
おそらくFireBaseなど使えば出来る、とのこと。

解決（？）

サーバー周りはやっぱり難しいですね……。
フロントエンドとはいえ理解できていないと実装できないということも多くなりそうなので、技術面に加え知識も取り入れていく必要がありそうです。
フロントエンドはとくに流行が移り変わりやすい分野ということもあり、インプットそしてアウトプットを癖付けていきたいです。