質問編集履歴

4

自分のPC(Windows11)では事象が発生しないことを追記

2023/03/08 23:54

投稿

ap2c9w
ap2c9w

スコア40

test CHANGED
File without changes
test CHANGED
@@ -23,7 +23,8 @@
23
23
  https://example.com/_next/image?url=https%3A%2F%2Fexample.net%2Fsample001.jpg&w=256&q=75
24
24
  にアクセスすると200が返ってくる場合もありますし、しばらくして500が返ってくることもあります。
25
25
 
26
- 本事象は`yarn dev`で開発用で立ち上げた際、事象は発生せず、`yarn start`で立ち上げた場合、事象が発生いたします。
26
+ 本事象は借用しているベアメタルの専用サーバー(AlmaLinux)で、`yarn dev`で開発用で立ち上げた際、事象は発生せず、`yarn start`で立ち上げた場合、事象が発生いたします。
27
+ 自分のPC(Windows11)で`yarn start`で立ち上げた場合、事象は発生いたしません。
27
28
 
28
29
  とりあえずの対処として、<Image>を<img>にすれば問題なく表示されることが分かったのですが、Next.jsの機能を使いたいので、解決する方法があればご教示頂きたいです。
29
30
  以下の補足情報の通りnext.config.jsのimagesのremotePatternsは適切に設定しております。

3

出力されるエラーとyarn devで立ち上げた際にはエラーがでないことを追記

2023/03/08 23:15

投稿

ap2c9w
ap2c9w

スコア40

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,7 @@
10
10
  ></Image>
11
11
  ```
12
12
  上記のImageタグが60個あるComponentを表示しようとすると画像によって500が返ってきます。
13
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-03-09/2fb78697-b20e-4a8b-83c2-3afb50e45d7f.png)
13
14
  Imageのうち30個ほどは正常に表示される(200が返ってくる)のですが、30個ほどは500が返ってきてしまいます。
14
15
  例えば
15
16
  https://example.com/_next/image?url=https%3A%2F%2Fexample.net%2Fsample001.jpg&w=256&q=75
@@ -22,14 +23,93 @@
22
23
  https://example.com/_next/image?url=https%3A%2F%2Fexample.net%2Fsample001.jpg&w=256&q=75
23
24
  にアクセスすると200が返ってくる場合もありますし、しばらくして500が返ってくることもあります。
24
25
 
26
+ 本事象は`yarn dev`で開発用で立ち上げた際、事象は発生せず、`yarn start`で立ち上げた場合、事象が発生いたします。
27
+
25
28
  とりあえずの対処として、<Image>を<img>にすれば問題なく表示されることが分かったのですが、Next.jsの機能を使いたいので、解決する方法があればご教示頂きたいです。
26
29
  以下の補足情報の通りnext.config.jsのimagesのremotePatternsは適切に設定しております。
30
+
31
+ 500が返ってきた際のサーバーの応答は以下の通りです。
32
+ ```
33
+ 全般
34
+ リクエスト URL: https://discounted-video.dyndns.org/_next/image?url=https%3A%2F%2Fpics.dmm.co.jp%2Fdigital%2Fvideo%2Fipx00312%2Fipx00312ps.jpg&w=128&q=75
35
+ リクエスト メソッド: GET
36
+ ステータス コード: 500 (service worker から)
37
+ 参照ポリシー: strict-origin-when-cross-origin
38
+ ```
39
+ ```html
40
+ レスポンス
41
+ <!DOCTYPE html>
42
+ <html lang="ja">
43
+ <head>
44
+ <style data-next-hide-fouc="true">body{display:none}</style>
45
+ <noscript data-next-hide-fouc="true">
46
+ <style>body{display:block}</style>
47
+ </noscript>
48
+ <meta charSet="utf-8"/>
49
+ <meta name="viewport" content="width=device-width"/>
50
+ <meta name="next-head-count" content="2"/>
51
+ <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"/>
52
+ <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"/>
53
+ <meta name="msapplication-wide310x150logo" content="/site-tile-310x150.png"/>
54
+ <meta name="msapplication-square310x310logo" content="/site-tile-310x310.png"/>
55
+ <meta name="msapplication-TileColor" content="#000"/>
56
+ <meta name="apple-mobile-web-app-capable" content="yes"/>
57
+ <meta name="apple-mobile-web-app-status-bar-style" content="#000"/>
58
+ <meta name="apple-mobile-web-app-title" content="myapp"/>
59
+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/>
60
+ <meta name="application-name" content="myapp"/>
61
+ <meta name="theme-color" content="#000"/>
62
+ <meta name="description" content="this is myapp"/>
63
+ <link rel="icon" sizes="192x192" href="/icon-192x192.png"/>
64
+ <link rel="icon" href="/favicon.ico"/>
65
+ <link rel="manifest" href="/manifest.json"/>
66
+ <noscript data-n-css=""></noscript>
67
+ <script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1678315631101"></script>
68
+ <script src="/_next/static/chunks/webpack.js?ts=1678315631101" defer=""></script>
69
+ <script src="/_next/static/chunks/main.js?ts=1678315631101" defer=""></script>
70
+ <script src="/_next/static/chunks/pages/_app.js?ts=1678315631101" defer=""></script>
71
+ <script src="/_next/static/chunks/pages/_error.js?ts=1678315631101" defer=""></script>
72
+ <script src="/_next/static/development/_buildManifest.js?ts=1678315631101" defer=""></script>
73
+ <script src="/_next/static/development/_ssgManifest.js?ts=1678315631101" defer=""></script>
74
+ <noscript id="__next_css__DO_NOT_USE__"></noscript>
75
+ <style data-emotion="mantine "></style>
76
+ </head>
77
+ <body>
78
+ <div id="__next"></div>
79
+ <script src="/_next/static/chunks/react-refresh.js?ts=1678315631101"></script>
80
+ <script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":500}},"page":"/_error","query":{"__NEXT_PAGE":"/_next/image"},"buildId":"development","isFallback":false,"err":{"name":"TypeError","source":"server","message":"fetch failed","stack":"TypeError: fetch failedn at Object.fetch (node:internal/deps/undici/undici:11118:11)n at processTicksAndRejections (node:internal/process/task_queues:95:5)n at runNextTicks (node:internal/process/task_queues:64:3)n at process.processImmediate (node:internal/timers:442:9)n at async imageOptimizer (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/image-optimizer.js:473:29)n at async cacheEntry.imageResponseCache.get.incrementalCache (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/next-server.js:238:72)n at async /home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/response-cache/index.js:83:36"},"gip":true,"scriptLoader":[]}</script>
81
+ </body>
82
+ </html>
83
+ ```
84
+
85
+ Nexs.jsのログは以下の通りです。
86
+ ```
87
+ TypeError: fetch failed
88
+ at Object.fetch (node:internal/deps/undici/undici:11118:11)
89
+ at processTicksAndRejections (node:internal/process/task_queues:95:5)
90
+ at runNextTicks (node:internal/process/task_queues:64:3)
91
+ at process.processImmediate (node:internal/timers:442:9)
92
+ at async imageOptimizer (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/image-optimizer.js:473:29)
93
+ at async cacheEntry.imageResponseCache.get.incrementalCache (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/next-server.js:238:72)
94
+ at async /home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/response-cache/index.js:83:36 {
95
+ cause: ConnectTimeoutError: Connect Timeout Error
96
+ at onConnectTimeout (node:internal/deps/undici/undici:6625:28)
97
+ at node:internal/deps/undici/undici:6583:50
98
+ at Immediate._onImmediate (node:internal/deps/undici/undici:6614:13)
99
+ at process.processImmediate (node:internal/timers:471:21) {
100
+ code: 'UND_ERR_CONNECT_TIMEOUT'
101
+ }
102
+ }
103
+ ```
104
+
27
105
 
28
106
  ### 環境
29
107
  ```
30
108
  クラアント --- Apache(プロキシ) --- 専用サーバー(Next.jsを配置、dockerは使用しておらず、直接yarn startしています。Vercelではないです。)
31
109
  ```
32
110
  Apacheを通さず、直接専用サーバーにデプロイしたNext.jsにアクセスしても現象が起こることから、Apache被疑ではないです。
111
+
112
+ `yarn dev`で開発用で立ち上げた際、事象は発生せず、`yarn start`で立ち上げた場合、事象が発生いたします。
33
113
 
34
114
  ### 補足情報(FW/ツールのバージョンなど)
35
115
  ```next.config.js

2

環境がVercelではないことを追記

2023/03/08 22:06

投稿

ap2c9w
ap2c9w

スコア40

test CHANGED
File without changes
test CHANGED
@@ -27,7 +27,7 @@
27
27
 
28
28
  ### 環境
29
29
  ```
30
- クラアント --- Apache(プロキシ) --- 専用サーバー(Next.jsを配置、dockerは使用しておらず、直接yarn startしてい)
30
+ クラアント --- Apache(プロキシ) --- 専用サーバー(Next.jsを配置、dockerは使用しておらず、直接yarn startしています。Vercelではないです。)
31
31
  ```
32
32
  Apacheを通さず、直接専用サーバーにデプロイしたNext.jsにアクセスしても現象が起こることから、Apache被疑ではないです。
33
33
 

1

環境を追記いたしました

2023/03/08 22:02

投稿

ap2c9w
ap2c9w

スコア40

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,12 @@
24
24
 
25
25
  とりあえずの対処として、<Image>を<img>にすれば問題なく表示されることが分かったのですが、Next.jsの機能を使いたいので、解決する方法があればご教示頂きたいです。
26
26
  以下の補足情報の通りnext.config.jsのimagesのremotePatternsは適切に設定しております。
27
+
28
+ ### 環境
29
+ ```
30
+ クラアント --- Apache(プロキシ) --- 専用サーバー(Next.jsを配置、dockerは使用しておらず、直接yarn startしている)
31
+ ```
32
+ Apacheを通さず、直接専用サーバーにデプロイしたNext.jsにアクセスしても現象が起こることから、Apache被疑ではないです。
27
33
 
28
34
  ### 補足情報(FW/ツールのバージョンなど)
29
35
  ```next.config.js