ECSにNext.jsをデプロイすると画像が404になる

プライバシーの都合上デプロイしたドメインをxxx.comとしています。

解決したいこと

AWSのECSにNext.jsをデプロイしたところ、/favicon.icoをはじめとするpublicフォルダの内容が全て404になってしまいます。404はsrc/pages/404.tsxでカスタムページにしてあります。

ソースコード

src/pages/_document.tsx

tsx
1import { Head, Html, Main, NextScript } from 'next/document';
2
3export default function Document() {
4  return (
5    <Html>
6      <Head>
7        {/* Faviconはちゃんと設定したはず、、 */}
8        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
9      </Head>
10      <body>
11        <Main />
12        <NextScript />
13      </body>
14    </Html>
15  );

環境

共通

Next.js: 12.1.6
TypeScript: 4.8.4

開発環境

Docker: 20.10.6
Docker compose: v2.6.0

本番環境

全てAWS、Terraformで管理
ECRから取得したNext.jsのビルド済みイメージをECSで起動
ECSはFargate 1.4 on Linux
Route53にALBのDNSを登録
ALBはhttpをhttpsにリダイレクト
httpsはhost_headerがxxx.comという条件付きでターゲットグループにforward
ターゲットグループはECSのサービスのNext.jsコンテナの8000ポートに結びついている

試したこと

別タブでxxx.com/favicon.icoなどにアクセス

-> カスタムした404ページが表示されてしまう

開発環境では404ページ・publicフォルダの画像全て問題なく取得できる。
next buildを行った後にローカルでnext startで起動した本番環境に近いアプリケーションにおいても問題はなかった
next build時のwarningなどはなかった

と言うことはおそらくAWSの設定に問題があるのでは無いかと疑っています。
Content-Typeが制限されてるとか？
何か心当たりがありましたらご教授いただけますと幸いです。

yu_1985

2022/11/16 07:22

デプロイしたイメージの中身は確認されましたか？してないならどうなっているか確認してみてください。また、開発環境はどのように構成されていますか？

reizt

2022/11/16 08:12

こちら本番用Dockerfileになります。 ``` FROM node:19-slim as base COPY package.json yarn.lock ./ RUN NODE_ENV=production yarn install FROM node:19-slim as build COPY package.json yarn.lock ./ RUN yarn install COPY . . RUN yarn build FROM node:19-slim as production WORKDIR /app ENV NODE_ENV=production COPY --from=base node_modules node_modules COPY --from=base package.json yarn.lock ./ COPY --from=build .next .next EXPOSE 8000 CMD ["yarn", "start", "-p", "8000"] ``` publicフォルダをCOPYしてないからかと思って`COPY public public`を追加したところ問題なく動きました！Multistage buildを使う際はCOPYのし忘れに気をつけたいですね、、

yu_1985

2022/11/16 09:03

往々にしてあるのが、ローカル環境ではdocker-composeでボリュームマウントしてるから動くけど実環境ではソースがないから動かない、というミスですね。ご注意ください。